When I started with web design in 2000, I learned how to make a website stick to it’s design by using tables.

It was kinda like an art to be able to use the right amount of nested tables to get the site to look just like the design. To Rafiek, Guillermo and I virtually any design could be converted to a web site. I remember working with Mariel, who visited from the Netherlands, when a little <td> messed up our whole design. But we were determined to find what the problem was, because “that” was what the site should look like, so we spent a couple of days looking for the problem. Too bad that site never got launched.

In 2004 I started to understand that those tabled site are a pain to view on mobile devices, screen readers and other, non-standard web browsers. I got to work on my first i-mode site, which was especially for mobile devices.

In 2005 I learned about web standard that dictate that design and content should be kept separate. Define the content using (X)HTML and style it, give it it’s look using CSS. This way, non-standard browsers that can’t process stylesheets can still display the content of your site without visitors having to scroll left and right. In that case, or if you just switch stylesheets off.

Let’s look at an example. If you’re using Mozilla Firefox to browse the web, click on View and then move your mouse pointer to Page Style. There you should see 2 options: No style and Basic Page Style. If you themed your browser, you should see the name of your theme as second option. This second option is normally selected. Go ahead and change it to No Style, while you’re reading my blog. Don’t get startled, you can always change it back to the previously selected page style.

So this is what my blog looks like without styles. Basically every web browser should be able to display this content. Now, if you have this browser window maximized, go ahead an “unmaximize” it. You can check that by clicking on the middle button on the top right corner of your browser, just to the left of the X button you use to close your browser. Click on the maximize button to make the browser shrink. Next you move your mouse pointer to anywhere on the left edge of the browser window, so you can see the “resize” mouse pointer, a line with to arrows pointing in opposite direction. Once you see that resize pointer, click and drag your mouse (this means move your mouse while you keep your button pressed down) to the right. Notice what happens with the content: the text is adapting to the size of your browser.

Go ahead and switch you page style back to what it was before.

So no matter how small the size of the screen you’re using to view my blog without styles, you can just scroll down and down without having to move left and right all the time. Imagine how much “fun” it would be if you are waiting for the bus to go to work and you want to quickly read the news online on your mobile phone. Instead of needing to go left and right and back to read the long lines that would have been kept at that length by tables, you get to read the news by just scrolling down.

Conclusion
So instead of concentrating on the look of the website alone, web designers are urged to concentrate on usability first, because if you don’t you might be missing out on a lot more readers than you think. In this technology age you should cater your website to everyone, no matter what device they use to visit your website.

Available at Amazon.com:
Don’t Make Me Think: A Common Sense Approach to Web Usability (2nd Edition)