Wednesday, April 2, 2008

Five layers of separation - designing high quality dynamic websites

by Saul Dobney

Websites are evolving and becoming more dynamic and more interactive. This means that the sites themselves have to cater for more and changing content and a variety of ways of interacting with the site. With bigger and more dynamic sites, designers have to design for growth and evolution of the content, which means designing in terms of five layers: content, page structure, page style (CSS), page interactivity and site structure.

The content

The base level for any website is the content - the information on the page. Dynamic design recognises that content is the responsibility first and foremost of the user, not the designer. This means the design has to work whatever the content and the designer takes responsibility for the page framework, not what goes inside it.

This is challenging. If content is the responsibility of the user, how do you ensure compliance with web-standards? How do you make sure the content works correctly? One way might be to rule that content is only allowed in plain text or plain text and paragraphs. Another is that content has to be tuned or vetted by the designer first. Neither are fully acceptable outside of large corporations. For small and medium sized businesses, flexibility and local user control are much more important.

Our experience is that whenever users start to be able to generate content, they want control over the content themselves. They want to add an image in a certain place, highlight some text in a different color, put two lists side-by-side (eg pros and cons). To make the content they want, they have to be able to add HTML or some subset of HTML to the page. This may well break a standards compliant site, but the design decision should be in favour of more and more dynamic content. The reason HTML was so successful and WAP such a failure was the ease of creating content. Ultimately content should be supported by, not constrained by, design.

The second issue is that content may need to be edited and created using in-line mark up. The 'rule' designers use for static sites around semantically correct mark-up and CSS-based styling will not always be true content generated by users. In dynamic contexts, you either remove all formatting control, or accept that users will add some formatting themselves. As a designer, you cannot create a style-sheet class for every content possibility.

Page structure

With user-driven content, the page structure is the preserve of the designer. The site has to look good without fixing the content. This means the structure has to flex with the content giving the user space to put their content, but bringing that content alive through appropriate fonting, spacing and graphics. This includes headers, columns on the page, footnotes, sidebars and so on.

As the content is user generated this means the designer cannot make any assumption about the length or size of the text to be used. In a multi-lingual dynamic site for example, space for navigation links may need to grow with certain languages, or with accessibility options, font sizes may be increased. Creating an box to hold a navigational element with a fixed height and width will not work in these circumstances and flexibility will be needed with one or both of height and width. Similarly absolute positioning is likely to break the site as font-sizes are changes for accessibility for instance.

What the designer can control though are areas which have no user content or which are reserved for 'designed content' - the header banner for instance and left-right positioning or certain graphical elements of known size on the page.

These choices between where content goes and design structures will be eased with HTML 5.0 (which is unlikely to be mainstream for the next 3-4 years), new HTML elements of