XHTML: Layer Tables and Divs

Many sites use one table to layout their entire page. This technique can force the browser to render the entire table before any content displays. The trick is to break up your table into layers, like a layer cake.

Feedback and Perceived Speed

By breaking up your pages into layers, be they tables or DIVs, you increase perceived display speed. Even though the code is slightly larger, your pages feel faster. Ideally you want to give users something useful to interact with within one or two seconds, like a navigation bar or search form (Schneiderman 1984, Miller 1968).

Layered content displays incrementally, which is a crude form of feedback. Feedback can extend the time that users are willing to wait for your pages to display (Bouch, Kuchinsky, and Bhatti 2000). With a slim text navigation bar for example, users will see something appear nearly instantly. They click a link to go to your page, and something happens. By providing useful content within the first few seconds, the user has something to interact with to keep them occupied while the rest of your page loads.

Above the Fold

The old newspaper term for content "above the fold" also applies to web pages. You can break up longer pages into three or more layers: a top layer for a thin navigation bar and advertising, a second layer for the content "above the fold," and a third layer for the rest of the page. By creating a layer that approximates what the user actually sees on their screen, you can increase the apparent speed of your pages.

Positioning, Layering, and SEO

A related technique is to use CSS positioning to place important content high up within your XHTML code. By positioning the main content area below any navigation bars your most important content displays first (Veen 2001), while appearing earlier in your XHTML for better search engine rankings. You can combine this technique with layering for a staged page load.

Conclusion

With layering, useful and important content displays fast and first, while secondary content "below the fold" appears last. Layering lets you can have your cake and eat it too.

Further Reading

Bouch, A., A. Kuchinsky, and N. Bhatti, "Quality is in the Eye of the Beholder: Meeting Users' Requirements for Internet Quality of Service"

in Proceedings of CHI2000 Conference on Human Factors in Computer Systems (New York: ACM Press, 2000), 297-304. Found that latency quality ratings show a drop-off from 8 to 10 seconds for non-incremental display, but incremental display extends delay tolerance.

King, A. B., "Response Time: Eight Seconds, Plus or Minus Two"

in Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com), (Indianapolis: New Riders Publishing, 2003). The consensus among HCI researchers is to deliver useful content within 1 to 2 seconds (navigation bar, search form) and to deliver your entire page within 8 to 10 seconds (8.6 seconds was the figure most cited). Slow web sites and difficult navigation are the most common complaints of web users in survey after survey (page 4).

Miller, R. B., "Response Time in Man-Computer Conversational Transactions"

in Proceedings of the AFIPS Fall Joint Computer Conference 33 (Montvale, NJ: AFIPS Press, 1968), 267-277. In studying human satisfaction and response times, Miller found three thresholds of human attention: 0.1 second was viewed as instantaneous, a 1 second response time was needed for users to feel they were moving freely through an information space, and a response time below 10 seconds was required for users to keep their attention focused on the task. Miller proposed that the ideal response time is around two seconds.

Schneiderman, B., "Response Time and Display Rate in Human Performance with Computers"

Computing Surveys 16, no. 3 (1984): 265-285. Keep it under 1 to 2 seconds, please.

Veen, J., "Speed"

in The Art and Science of Web Design. (Indianapolis: New Riders Publishing, 2001). Veen says at Hotbot.com they used CSS positioning to display important content first, high up within the XHTML code.

By website optimization on 11 Apr 2004 PM

Comments

Post a comment