HTML Design

Web applications support visual design through the implementation of the Template View, allowing content declaration and presentation logic to be self-contained, and separated from the underlying application logic. What might initially seem like a simple matter is complicated by the fact that there are as many different approaches to HTML design as there are to templating itself.

One of the great ironies of the web is that HTML appeared before XML. Some authors claim that it’s widespread success is actually due to fundamental weaknesses and inconsistencies (see In Praise of Evolvable Systems)

Early web browser software did not support any specialized visual formatting. Markup was rendered as structural content based on conventional document metaphors - headings, paragraphs, lists, and hyperlinks. The idea was that users would set their own preferences for font display- presentation was not considered relevant.

It wasn’t long before authors, designers, and programmers started to experiment with graphic design, pushing the evolution of web browsers, and resulting in widely used and accepted HTML markup becoming the default standard for visual design in this medium, even though it was never intended to represent visual structure.

Tables initiated the of development of visual design techniques for web browsers. As an element designed for the display of tabular data, tables can be manipulated through the border=”0” attribute to provide an abstract representation of a layout grid with invisible spacer images controlling margins (See Single Pixel Gif Trick. Table based layouts led to the evolution of WYSIWYG editors, allowing designers to construct elaborate nesting structures and gain pixel level control over vertical and horizontal space on web pages.

• precise control over visual grid
• all popular browsers are optimized for efficient table display (See W3 Table Design Rationale)
• presentation is compatible with most legacy browsers
• well supported by WYSIWYG tools (eg: Dreamweaver)

• presentation data mixed into content
• unnecessarily large files
• can destroy logical document flow - content does not necessarily appear in the order in which a human could understand it
• less accessible to non browser based readers (portable devices, voice readers, etc)
• entire contents of table must be loaded before browser rendering begins (this is a problem on longer pages with more content)

Example of the table design paradigm: CNN.com

Table based approaches break the semantic concept of markup describing the structure of the underlying content. CSS provides designers with a visual language that is abstracted from the document markup itself, emphasising a separation of presentation and content. In practice this means a return to the simplified markup style of early HTML content, relying on semantic document level tags such as heading and list items (See Using Lists For DHTML Menus and Sliding Doors of CSS)

CSS provides the tools to achieve modular presentation effects that are not possible in HTML alone. With CSS, a series of different layouts and color schemes can be applied to the same underlying HTML structure.

CSS properties can also be dynamically accessed and manipulated using JavaScript

Example of the CSS design paradigm: Wired News