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.

Further reading

Discuss This Topic

  1. 1 Matt Heerema

    A good article for an ametuer Web designer to get up to speed. Thanks!

     
  2. 2 Chris Harrison

    Great article.

    I can remember the days where I (and other designers) would create massively complex layouts where tables were nested within tables nested within tables (ad infinitum).

    There is a better way of doing things… (thank God!)... but many designers still do things the way they’re used to… which creates a challenge for those of us who have adopted standards.

     
  3. 3 Corby Simpson

    Reinforcing good points. One thing I’ve noticed is that clients DON’T CARE if the site conforms to web standards or not… It’s our job to explain to them the advantages, BUT if it doesn’t increase their bottom line, they don’t seem to care and this seems true for both small and big companies… Anyways, article was well done and I agree 100%! The question is do our clients?

    BTW, check out my blog at www.realmoneywebdesign.com

    As part of a new years resolution, I’m documenting my success becoming a freelance web designer. I’ll be keeping a tally of $ earned freelance as well and all the ups and downs.

    Cheers!

     
  4. 4 Ryan Heneise

    Corby,

    You are right, most people don’t care how a site is constructed. After all, you would have to be a programmer to understand all that HTML code, right?

    I’ve found that a big part of my job is educating my clients. I try to help people understand that web standards-based design CAN translate into indirect cost benefits for them. Their website will be easier to build, which will mean less up-front dollars paid to me for design. It will be easier to change, which means that it costs them less if someday they want this bit moved over to that side of the page, or if they want to add some element to the design. And it is easier to maintain, which means that it takes time to update content.

    These assertions don’t hold true in every case, but as a generalization I’ve found them to be fairly accurate.

    I know it’s frustrating when people don’t care about web standards, but whether clients care or not, using the best web design techniques will only benefit them in the end.

    Best of luck in your new venture! I’ll be looking forward to reading about your progress.

     
  5. 5 Ray

    Thanks for the article, Ryan. I’m going to be adding this article to the list of great articles given to me on the forums, helping me explain why CSS is so much better than Tables.

     
  6. 6 Yannick

    Nice article Ryan. I think this will come in handy for those new to tableless layouts. It definitely hits home as to the benefits of using tableless over tabled layouts.

    Corby: Despite the fact that (some) clients don’t care, I think we as the designers should take on the “quiet revolution” approach as mentioned by Malarkey. It can only serve to benefit them in the long run.

    All the best in your venture. :)

     
  7. 7 Ryan Heneise

    Thanks for the kind words everyone!

    There is indeed a “quiet revolution” going on in the world of web design. Look at movements like CSS Reboot, this site, and the proliferation of CSS design galleries in the past year or two.

     
  8. 8 Dennis Bullock

    As a beginnner I really appreciate this kind of information. Thanks and keep it coming.

     
  9. 9 James Mitchell

    Wonderful article. 5 good and quick reasons, well explained. I have been dealing with a few people lately who like to say there is really no need for standards. With them in mind and this article I have posted about it, lets hope it gets them thinking outside of their own box/limitations.

    The trackback link is: Tables are for data, not layout

     

Comments closed after 2 weeks.