This is still the catch phrase of the year – Web Standards. Everyone is talking about it, lots of folks are developing to this ideology – and yet, why is it so hard to do? You can’t have an article, blog post or discussion about Standards or Tableless Design without some Standardista or Web Relic spouting irrational emotions about how their way is the best. In the not too distant past, Andy Clarke was quoted as saying:
"Those people still delivering nested table layout, spacer gifs or ignoring accessibility can no longer call themselves web professionals."
As inflammatory, elitist, and narrow minded as this may seem from an initial pass, it really isn’t. Point in fact – he’s right. If you really delve deep into what that statement means, you will quickly see that it’s simple. If you develop, design, post, or conjure a website into being all the while ignoring the basic needs of users who navigate the web, you are not a professional – that is to say you are not acting in a professional manner. My job as a Web Designer is to consider the user when creating a site. Not to consider what my own selfish desires are in order to get the job done quickly, or in the easiest way possible to make more money or because I don’t want to do it. Both of which are poor excuses, and completely invalid.
The Easy Way
The list is long, the list is varied. Big name corporations are on this list, so are one-man-shops. I would wager that at least 60% of all websites in existence suffer from this, if not far more. Sorry, I’m trying to be a bit generous. So what is the easy way? Simple. Slap up a bunch of pages with 15 nested tables, no alt text on any of the images, incomplete or inaccurate tab ordering on forms, no abbr tags when you include acronyms in text, yada yada yada. This is indeed the easy way. We’re all guilty of it at one time or another. What counts in the end is that you try to do something about it. You can create sites much faster this way, especially if you are unfamiliar with CSS structuring. It takes effort to learn new things, but the pay-off is worth it.
There is also a gray area to this – as there always is. There was a trend for a while when CSS starting to become really popular for folks to use classes like body-bold-blue, or body-bold. I can hang my head in shame and say that I have been guilty of this. It’s crap, and I freely admit it. What good is it to use this over the <b>or <strong> tag? If you’re making a sub heading, why not use an h3, and give it a class of subheading, and style that class with CSS. That gives the style meaning – and starts you along the road of Semantics.
The Hard Way
You knew it had to come. Let the keywords and catch-phrases fly! Tableless design, accessibility, CSS, Semantic Web, Web 2.0, I could go on for miles. But you get the idea.
The first thing to do is ditch the table to wrap your page layout with. The ditch the table that is inside the wrapper table. Okay, so you have a table for the header, and one for the menu, then another for the body area with 2 columns and yet another table for the footer. So right of the bat, you can cut your code down by what? 30 tags? Consider if you have a basic table, with 5 rows and 1 columns, that’s 14 tags per table. Now multiply that by 4 or five tables and you have a mess on your hands.
Tables are for tablature data – not layout.
It’s a daunting task. I know. It wasn’t that long ago that I started attacking my work in earnest, actively removing table based layout and replacing it with CSS based design. It was a pain in the arse. And at times, still sends me screaming to the vending machine for another Mt. Dew. You know what? It’s worth it. Why?
- Easier to update layout
- much lower code to content ration (this gets you smaller files, faster load times and lower bandwidth bills)
- Easier for Spiders to crawl
- Semantic structure gets you better page ranking
- ability to quickly change format to be accessed by devices other than web browsers (screen readers, mobile devices)
- More Accessible
That’s a good place to start. Sounds good doesn’t it? Wouldn’t it be nice to be able to spend just a few day updating a design rather than weeks wading through data trying to change pages form the old to the new? Then having to go back and clean up the parts you goofed up or forgot.
As a side note: I just about always break this rule of thumb for forms. I tend to employ tables for form layout since it makes more sense, resulting in a more usable form with far less time spent. I have toiled for days working on a good model for a CSS based form, and in the end it just isn’t worth the trouble. Unless you only have 4 items in a forms, I would use a table to hold it all together, and spend your time working on something more valuable.
Where to start
Start simple.
If you are designing a new layout for a huge site, with tomes of data and a decade of Legacy Data and static pages, going whole hog for the CSS based layout gusto may wind you up in the poor house. Especially if you are on a tight deadline. Start with the small projects, and as you become more comfortable, go bigger. Look at lots of examples and see how folks are conquering problems. You will always have to use hacks to overcome the fact that non of the browsers render anything the same way. They are all different with their own unique quirks.
Look at other sites.
Poke around the web and see what other folks are doing with tableless design, and how they tamed the beast. There is a myriad of information available to find information and examples. The British Secret Service did a great job on their site.
There is an endless supply of excellent websites to look at as well as plethora of resources all aimed at getting you on board and up-to-speed quickly. We may be a pushy group, trying to cram standards down the throat of every would-be designer/developer – but what you can’t say is that there isn’t enough information that is FREE on the web.
References like:
- A List Apart
- Molly Holzschlag
- The Web Standards Project
- Eric Meyer
- W3C Sites – List of compliant websites
- Quirks mode CSS Hacks
- Tantek Celics Box Model Hack
- Digital Web – Keep it Simple
are all excellent places to start. Check out my new site too, perubique.com, and feel free to swipe the CSS, I use Nifty Corners and some other cool JavaScript functions, like LiteBox and submodal windows too.