Jump to content

Convert Table Layouts to CSS Layouts to Speed Up Web Pages

  simonstl's Photo
Posted Oct 29 2009 05:02 PM

Using CSS to lay out your page can save you a significant amount of markup, typically 25% to 50%.1 First look at the layout to see whether you can substitute CSS lists and positioned divs to simulate the effects that are typically done with tables. Next, strip down the content to structural markup and build it back up again using CSS style and positioning. Then test the new layout with different browsers. We recommend using BrowserCam to quickly test your new CSS layout on different browsers (see the image below, "BrowserCam.com renders web pages on different browsers").

BrowserCam.com renders web pages on different browsers

Attached Image

CSS page layout

You can use CSS to position your entire layout or to format smaller sections of your web pages. We often see tables used to format pages when CSS could have been used more efficiently. You can create multicolumn layouts using CSS floats and margins applied to divs (http://alistapart.com/topics/code/css/). You can make complex hierarchical menus by using lists controlled by CSS, not lists controlled by Javascript as is usually the case, as described in More Eric Meyer on CSS. You can create simple rollover effects using CSS, with and without graphics. For examples of CSS rollover effects and menu conversion, see Chapter 7, CSS Optimization, of Website Optimization.

[1] According to Jeffrey Zeldman's Designing with Web Standards (New Riders), converting to CSS layout typically saves from 25% to 50% off XHTML file size, and a net savings overall. We've found similar results in our conversions.

Website Optimization

Learn more about this topic from Website Optimization.

Is your site easy to find, simple to navigate, and enticing enough to convert prospects into buyers? Website Optimization shows you how. It reveals a comprehensive set of techniques to improve your site's performance by boosting search engine visibility for more traffic, increasing conversion rates to maximize leads and profits, revving up site speed to retain users, and measuring your site's effectiveness (before and after these changes) with best-practice metrics and tools.

See what you'll learn

0 Replies