Five Reasons to Design With Standards
9 comments | Posted: 4 January 06 in General, by Ryan Heneise
When I first started designing for the web, I learned that the easiest way to lay out web pages was with tables. It really made sense back then. Tables give you nice, structured columns that are really easy to work with in a visual web page layout program like Dreamweaver, FrontPage, or even PageMill (my first web page layout program).
That was a long time ago – before Wi-Fi, Amazon.com, and even before Google, if you can remember such a time. Most importantly, that was before CSS (Cascading Style Sheets) was widely adopted, and before the makers of web browsers agreed on how they would render the web pages that people visit. Those were the days when Tables (with a capital T) ruled the Web.
But no longer. In the past several years something wonderful has happened. The old, non-standard browsers have gone away, and have been almost totally replaced by browsers that can render web pages fairly consistently across the board. Web designers have celebrated the emergence of what we now call Web Standards, which is a collection of programming languages, rules, and guides that all the current browsers have agreed to live by. Well, that’s mostly true. Most web developers will be quick to tell you about certain browsers’ myriad quirks and bugs that make developing web pages more difficult. Despite these bugs though, it is possible to develop web pages entirely using standards-compliant CSS, which opens up a new realm of cross-platform compatibility, improved handicap accessibility, printer-friendly pages, and easier-to-update content.
This all means that web developers now have the tools and the responsibility to design web pages using web standards. One of the most important aspects of correct design is the choice of page layout techniques. Because of the cross-platform nature of the web, it’s not enough for a website just to look good – it must also be well-constructed. A poorly constructed website (even a good looking one) can cause a variety of problems for disabled users, is more difficult to maintain, and can detract from the professional image of both the website and the developer. The most common way that web pages are constructed incorrectly is using tables to lay out the page. Lets look at a few reasons why tables are a poor choice for web page layout:
Tables are for tabular data
Tables are intended for the display of charts, tabular lists, and other data that makes sense in a grid, not for layout. Most web-based content is not tabular data, so it doesn’t make sense to use tables to lay out that type of web page content.
Tables break up the flow of information
Tables are rigid, and force the information in your page to be broken up in unnatural ways. This can make it difficult to extract information from a page, and really causes problems for mobile users and users with disabilities. Blind people using a screen reader may have an especially difficult time, since the flow of information may not be intuitive if you take away the layout elements, leaving just the text, the way a screen reader does. More importantly (depending on your priorities) it can cause Google and other search engines to incorrectly index your site. A web standards-based layout, on the other hand, allows you to structure the information so that the content can have meaning apart from the visual design of the page. Standards-based layouts use “div” tags and CSS instead of tables to accomplish the same page layout. Div tags (think divider) let you position elements on the screen with pixel-level precision, using just a few keywords. To understand how important this difference really is, try pulling up a table-based web page on a mobile phone browser, and then look at this site.
Tables emphasize layout first, content next
Unless you have nothing to say, you probably want people to read what you have to say. If that’s the case, you don’t want to obscure your content behind design – even good-looking design. A web developer who works with web standards knows how to craft the visual design of a page around the page’s content rather than the other way around.
Tables are slower
Table-based layouts require a lot more HTML markup than do standards-based layouts. Extra markup means bigger file size and slower rendering times. Bigger file size means that your pages will take longer to download. If your users have slow internet connections, it will take them quite a bit longer to download a tables-based page than a similar standards-based page. Once they’ve downloaded your web page, all that extra markup has to be rendered in the browser. More markup code simply takes longer for a browser to render on the screen. These days download time isn’t as much of an issue as it used to be, but users with slower computers may feel a noticable delay if your page is big.
Tables make it more difficult to change the page layout
It’s much easier to change the layout of a page designed with web standards than one designed with tables. Because tables lock the page into a rigid layout, even the slightest change can really mess up the layout. You’ll end up using lots of empty cells, spacer images, hidden graphics, and other atrocious page layout no-nos just to get things to stay in their proper place. In a web standards-based design, on the other hand, a web developer can tweak the layout with just a few changes to the CSS. Want to swap the left and right columns? That takes just two lines of code (in most cases). Change the font styles throughout the site? Easy. Need to move it over a few pixels? No spacer.gifs required – just give it an absolute or relative position and tell it where to go. In practical terms, this means that an developer can create and update the design of web pages much more quickly with web standards techniques than with tables. This can translate into cost savings, since the design will probably be easier to maintain in the future.
Why should you care?
Great question. How does good technique vs. bad technique affect you? There are lots of answers. Here’s a biggie: Your credibility is on the line. Having a poorly-constructed website reflects badly on you and your company, your church, or whoever your website represents. Remember, that’s the key – your website represents you. Increasingly, people look to your website for information about you, and many will make judgement calls based heavily or entirely on the quality of your website. Your website is going to become more and more important as more people begin to rely on the web as their first source of information. There’s no need to be afraid of this trend – embrace it! The web is one of the easiest, most effective, and least expensive ways to communicate with your customers, constituents, and members. You’ll never regret investing in a great website.
- Art of Mission – Bye Bye Tables (this article was originally posted here.)
- Godbit – Do We Really Care?
- Web Standards Project
- Designing with Web Standards, by Jeffry Zeldman
Discuss This Topic
Comments closed after 2 weeks.