Accessibility in web site development...
Tables versus CSS
By Emily Reeves - Online Marketing Assistant
One of our primary aims at AlphaQuad is to create web sites which are accessible to as many people as possible, in order to maximise sales and revenue for our clients.
An important factor we must consider is the way in which we build a web site; whether to use the more conventional table structure, or the more savvy Cascading Style Sheet and layers (div) arrangement. A Cascading Style Sheet is a text file which contains a set of rules and instructions to define where and how a layer (div) will sit on the page as well as defining font types, colour and sizing, for example.
There is an ongoing argument within the online marketing industry as to which is the most effective way to build a web site. The fact is, both types of layouts have advantages and disadvantages and perform in very different ways.
Browser compatibility
There are a number of internet browsers available to consumers - the most popular of these being Internet Explorer 6 and 7, Mozilla Firefox 2 and 3 and Apple’s Safari. As at November 2008, it is estimated that approximately 29% of the population use IE7, 29% use IE6, 17% use Firefox 2, 10% Firefox 3 and 1% Safari.
Our challenge is to develop web sites which will render in each of these browsers. Of course, the continual introduction of new browser software (such as Internet Explorer 8 which is currently in BETA) means browser statistics regularly change, and our browser compatibility list continues to expand.
Generally speaking, tables are very effective for compatibility as they are viewable in most browsers. They enable you to position text and images exactly where you want them on the page. The table components form a grid-like construction which allows you to develop web pages with a rigid structure.
Getting a CSS-developed web site to render as you intend over the range of popular browsers can be more difficult. CSS-developed web sites use a layered approach controlled behind the scenes by the CSS coding. Each div is essentially a box which floats on the web page, its style and position dictated by the CSS file. The problem with this is that each browser supports CSS coding to a varying level of strictness, so what may appear fine in one browser may look completely different in another.
HTML code and accessibility
A problem with using tables in web site development is that they translate into a lot of HTML code and are not fully accessible. Screen-reader software for the visually impaired reads through the code from top to bottom, line by line and cannot necessarily differentiate the order of information when it comes across a table.
Also, a page made out of tables may use twice as much code as the equivalent page made using CSS and div layers. This can make a web developer’s life difficult when trying to find a specific piece of code in a page of code. Happily though, Dreamweaver (our web development software) has lots of handy tools which help you find what you’re looking for.
Nested tables
In a complex table-based web site, there may be a number of tables nested inside each other.
Internet browsers display each table as a separate entity, so the page will effectively download in stages, one table at a time, which can be a lengthy process. As CSS web sites contain less coding, the page will load more promptly, improving the visitor experience.
Search spiders like Google will also take less time to index the web site as there is less code for them to trawl through. Perhaps more importantly, less wasted code means pages bear proportionally greater relevance to their subject.
Style sheets
Unlike table development, using Cascading Style Sheet coding means each command can be controlled in the style sheet, rather than in the web page or web page template. So, if you want to update an element of the design that is present on all your pages, you only need to make one simple change to the style sheet.
For example, if you want to change the width of your navigation menu from 180 pixels to 200 pixels, you simply find the relevant command in the style sheet and edit the width. To make the same update to a table based web site involves delving into each of the pages or templates to manually input the width of the table or cell it is encased in.
So which approach is best? Well, we use a combination of tables and CSS in our web site development process, as we understand the advantages and drawbacks both present. Incorporating CSS allows us to maximise design flexibility and accessibility, while a solid table structure ensures we remain efficient and compliant. By using both web development methods, we can maximise the benefits and minimise the drawbacks of each one.
Can we help?
