Creating Tableless Sites - Why and Some Basics by Nicole Hernandez
In a time of web developers who just like to say that 'Tables are Evil' and
can't (or won't) explain why, this article will attempt to give you some solid
reasons that people create tableless designs. Included are six major benefits
of creating tableless sites, and how to sell your desire to alter your website
to a resistant manager.
Let's begin with the benefits of a tableless layout. These are only in the
order that I feel they should go in, some things are more important to other
people, so rank them as you will.
Forces You To Write Well-Formed Code
You cannot have a properly made tableless layout, and use improper and
non-standard code. Well, let me correct that - you can (technically you can do
it) but it defeats the whole purpose. When you are creating a tableless design,
you should be using standards compliant code. I think that anything that makes
you get into the habit of always writing clean code is a good thing.
Faster Loading Time
This is absolutely a benfit of a tableless layout, and for several reasons.
First, on a fundamental level - tables load slowly. For the most part, unless
you set the height and width of your table elements, all the text has to be
loaded and rendered BEFORE the table sizes itself to the page. Of course, this
is what so many people loved about tables isn't it? The fact that they were so
easily sizeable. The downside is how much more time they take to load.
Okay, so the solution to that loading time is to set all the values explicitly,
right? So now we see another downside. Code clutter that increases loading
time. First of all, just by themselves, tables take alot of code. How many td
open and close tags does your average table based layout have? Tons. Having to
set all the values explicitly only adds to the page size and loading time.
There are many experiments that have been done on this topic, I'll point you
toward this one
that StopDesign did on a remake of the Microsoft website from a tablebased site
to a tableless layout. That remake showed a 62% file size reduction of the
site, and using their average hits per month for the Microsoft site, calculated
that Microsoft would be saving 924 GIGS in bandwidth per day, and 329 Terabytes
of bandwidth per year. For any company that pays for bandwidth, these things
are important.
Easier to Read Code
If you are using standard code, semantic document conventions, and a tableless
layout, your code can be so clean that it looks practically like just regular
text with a few extra symbols.
That is a great benefit because it not only makes it easier for you to update,
but it makes it easier for a non-technical user to make small alterations to.
Additionally, if you work as a web developer in a more freelance capacity, it
is common for there to be a full-time web developer who has to maintain that
site. Clean and simple to read code makes that a easy transition. We like it
when people leave us easy to understand code, right? Let's return the favor.
Print Alternate Views
When you create a page using a table-layout, you are rather unfortunately
locked into a certain layout. Developers who have created table-based websites,
as most of us have at some point - particularly if you were in the the industry
before the big tableless movement, know that you often have to create a
separate printable version of your pages. This can be, needless to say, quite
tiresome.
Ease of printing style control is a huge benefit with a tableless layout. You
can easily create a single new printing style that applies to all
your pages, instead of making them individually. That alone is a huge time
saver, but there is more.
While you can control all elements with this approach, the biggest key is
organization of information within the page itself. Using the example, let's
assume that the display order we want all our pages to print using the
following order: The page header first, the content next, the special news
after that, then the link list, and then the footer. However! We still want it
to display as it would normally when viewing (meaning the header at the top,
the links on the left, content in the middle, news on the right, and footer at
the bottom). With a table-based layout, you would have to create a new page to
do that special printing organization because the print style will read your
columns left to right. With a table-less layout, you are not bound by this. You
can order the content in your page however you like, and still control the way
it looks... all by using the CSS only
!
Additionally, because we can put the content in whatever order we want in the
HTML, and then move the content blocks around for website viewing using CSS -
we can have ultimate control over presentation.
That is very important because the clean code, and ability to alter
presentation, means that your site can be viewable by someone on a small mobile
phone screen, a PDA, in all text format can be perfect for someone using a
text-to-speech reader, or a braille device, and since the code is clean, it is
both backward compatible (with older browsers seeing mostly just the text) and
forward compatible with new technologies to come. The flexibilty and
organization leads to being able to create a powerful website that takes
advantage of some of the possibilities with XHTML, and adding in support in
your pages for microformats, or taking advantage of using RSS / ATOM feeds from
your site to develop a base of regular readers.
Search Engine Optimization
Due to the fact that you can organize your most important content at the top of
your page, without affecting the layout, your page can be better optimized for
search engines. For instance, say that I have a navigation bar on the left side
of the page that lists tons of parts of the site that are actually great
keywords. I could move that navigation bar code higher up in my actual HTML,
without changing the layout, because I'm using the CSS to position the
navigation where I want it.
Those search engines can also more clearly find common words throughout your
document without having to filter through code. Search engines prioritize
websites that have a higher content to code ratio, so putting all your style
elements into your external CSS stylesheet makes your site highly content based
to a search engine. Tableless layouts, as previously mentioned, decrease page
size and loading time - another bonus to search engines.
Additionally, being able to take advantage of the RSS/ATOM feeds (see the
section directly above) will aid you in some new technology for site indexing
as used by all search engines called ROR. (ROR is an XML format summary of your
website, like a sitemap, that search engines can access for additional
information about your website.)
Presentation Flexibility
Making changes to a CSS based Tableless layout is simple. You can alter the CSS
file only, changing as many styles and graphics as you want. The affects
cascade through all the pages on your website, and eliminate the need for
manually updating many pages.
For one of the best known examples of how powerful presentation can be, you can
visit the CSS Zen Garden
and navigate through the 'Select a Design' links to see the differences. Each
of the different designs uses exactly the same HTML file content. The only
thing that changes is the CSS file for each one.
Selling Yourself On Standards
Sometimes knowing how to code for standards, and create flexible tableless
layouts is not enough. There are some web designers who meet with difficulties
from their management. Most often those difficulties are rooted in the
management being unaware of the benefits of using tableless content and CSS
driven layout.
If you want to design for standards, but you work for a company that is not
very forward-thinking in allowing you the time to work on the changes -- try
this: Make them think about their pocket-book. Point out the cost saving
benefits.
For instance, try grabbing a single page of existing code. Clean it up to
standards. Compare the page size to before (including image optimization), and
count the difference in bytes saved. Multiply that across the number of site
pages, and the number of days per month. Then explain to them the amount of
bandwidth cost saved monthly if this was done across the whole site. If that
isn't enough, show them how quickly you can make changes to a website once it
is CSS driven, and push the idea that you will be able to change the site more
rapidly when there are needed updates, and you will have more time to focus on
adding in new functionality to the site - instead of spending your time doing
maintenance.
Summary Hopefully, this little article will serve as a way to get you
started on understanding why to use a tableless layout, what the benefits are,
and you can easily take a look at Layout
Gala
and download just 1, or all 40 of the tableless layout examples to get you
started. However, the best step toward moving to a tableless design is to
slowly move your website toward a standard compliant version first, before you
get rid of the tables. To get to that point, study as much on CSS as you can,
read through the articles here and elsewhere on the web, and moving from table
layouts to tableless will be just a matter of time.
End Note:
View the original article, including all 9 image examples.
About the Author
Nicole Hernandez is a web developer with a specialty in web standards and
accessibility. She is the owner of Website
Style and publishes technical articles on her blog called
Beyond Caffeine.
|
