Yesterday, we learned how to manipulate images to reduce your download time. Now, it's time to dig even deeper into the fine art of slimming down those pages.
We're going to talk about page layout, and that means talking about HTML tables, first and foremost. First, because table-based layouts are the de facto Web standard, and foremost because table-heavy designs have a nasty reputation for poor performance.
And CSS layout? It's faster, better, and smarter. We'll cover it later. Now, you're welcome to skip ahead, but The House bets that you'll keep reading.
Even though pure CSS positioning is the ideal way to lay out a page, it can make your site look funny (if not ugly) for Internet Explorer 4 and Netscape 4.x users. That's still a fair enough shake of the Web audience. And while you can design CSS that degrades nicely in older browsers, it still tends to look, well, degraded. If what you want is the most cross-browser, cross-platform, business-friendly design solution, you still have to lay things out on the table.
I know, I know, CSS is cooler. And smaller. And in the long run, its better. Now, these may be fightin' words in some crowds, but take a look at Google's source. Or Ebay. Or the New York Times, Blogger, The Onion. Let's face it, sometimes right-now compatability trumps future-compatability.
Tables aren't all bad, anyways. Most designers are taught to design with a grid, so dropping things into a table comes naturally. We're also fond of their duality; variable-width tables can both define a layout and respond to the unpredictable elements of a page. Being a Web designer means coping with unpredictability, and striking a compromise between your design and the user's flexibility. (Users should be afforded the ability to make fonts larger, for instance). Unfortunately, tables also increase the time it takes to display a Web page, and sometimes by a substantial amount.