When someone whose opinions you generally respect starts talking out their backside... it becomes a sacred duty to set them back on the right track. So, when I read Huw’s rant against CSS layout in this month’s column, I thought "OK, I’ve got a half hour to spare... I’ll show him!" and what better way to demonstrate the error of his ways than to re-write his own web page using the beauty of CSS.
Just plain wrong!
It’s a testament to Huw’s skills as a columnist that he has me so incensed that I’ll actually put some effort into disagreeing with him. His comments on the Open Source community, Internet Explorer, Microsoft and standards compliance were mildly irritating but largely a matter of opinion (you can’t really "Rant" if you just agree with everyone else can you?) However, when he says...
"In my view, style sheets are all fine and dandy for, well, setting styles. But for laying out web pages they are dreadful, awkward, ineffective, messy or, to put it more succinctly: just plain wrong. "
..that’s enough to get me dusting off my soap box. Yes, I am a CSS zealot!!
Dreanweaver? Dream on...!
Let’s deal first with Huw’s attempts to justify his tables "habit."
I guess I agree with him on the relevance of the "tables require more HTML" argument. I doubt if there is a significant difference in rendering time between table and CSS layouts even on a dial up connection.
Next Huw says:
"Tables are difficult to maintain? Really? “To change something you have to figure out what all the td/tr are doing.” Sorry, but I don’t have to figure that out at all. That’s Dreamweaver’s job."
Well that’s fine if you have £300+ in spare change. I certainly don’t. and in my experience "lesser" web design tools tend to make a dogs breakfast of all but the most basic table layouts.
Huw’s original page is laid out using 11 tables using 73 pairs of assorted html tags, the nesting of which is so complex I’ve given up trying to work out how deep it goes. Try it your self here. My version has 10 pairs of <div> tags nested to 3 layers at the deepest.
There is some additional CSS involved. For this project I have added an extra CSS file to separate my Layout CSS from Huw’s original "fonts and colours" sheet and of course, there has to be an extra Javascript file to help the "Non standards compliant browser" understand the concept of minimum widths and heights.
This is the layout code for this page.
<body> <div id="wrapper"><!--open holding div --> <div id="topbar" ><!--open topbar div--> </div><!--close topbar div--> <div id="leftdiv" ><!--open left div--> <div id="navdiv" ><!--open nav div--> </div><!--close nav div--> </div><!--close left div--> <div id="content"><!-- open content div --> <div id="adbar"><!-- open adbar div --> </div><!-- close adbar div --> <div id="heading"> <!-- open heading div --> </div><!-- close heading div --> <div id="article"><!-- open article div --> </div><!-- close article div --> <div id="footer"><!-- open footer div --> </div><!-- close footer div --> </div><!-- close content div --> </div><!--close holding div--> </body>
You can’t really expect Huw to care how ugly the underlying code is. When wearing his "journalist hat" he’s doesn’t want to spend hours seeking the most elegant solution for his page layout, he wants his gems of wit and wisdom on the page and published with the least possible effort. Ideally without ever having to look at the raw HTML. So, obviously, he’s uses a WYSIWIG editor
So where’s the problem?
A web page like Rants and Raves is a one off, and unlikely to need re-styled at a later date. (at least, I hope so, for Huw’s sake) So Huw and many other people like him are happy with table layout, it’s quick, it works and it looks good in most browsers So what’s the big deal?
Well there is that all important "most browsers". The web should be for everyone and, for people who aren’t using a graphical web browser, tables can be problematic.
Huw admits:
this may be a problem. If people use text based browsers (maybe on mobile devices) or readers which narrate onscreen text in a synthesised voice, it is quite conceivable that CSS layouts may be better than tabular ones. I say ‘may be’ since I haven’t done any special research into this, don’t know if tables can be source ordered like CSS layers and, in any case, note that some CSS tutorials make a distinction between ‘fluid’ and ‘source ordered’ layout, which suggests that source ordering may not be any more a ‘natural’ feature of CSS than of tables.
Source ordering means arranging the content of web pages as if there were no HTML tags at all. Everything reads in the order that it appears in the source markup. This clashes directly with table layout where the source order of the table cells (and therefore their content) determines where they appear on the page.
an example
| Characteristics | Advantages |
| • 1st characteristic | • 1st advantage |
| • 2nd characteristic | • 2nd advantage |
| • 3rd characteristic | • 3rd advantage |
| • 4th characteristic | • 4th advantage this one has a particularly long bit of text compared to the others |
| • 5th characteristic | |
| • 6th characteristic |
Less than clear.
I came across this poorly thought out use of a table on the corporate web site of a multinational company. (Obviously, I have replaced the original content) It looks reasonable in a standard graphical browser, although any inequality in item length causes peculiar gaps to appear.
Unfortunately, the image shows how it "reads" to someone using a screen reader.
Opera User mode menu
What exotic piece of software am I using to get this view? Strangely enough Huw’s browser of choice.
Opera offers, under the User mode menu, a variety of options to emulate other browser experiences. When I’m testing a web page I always have a look at it using these settings
With CSS layout, the web designer can use the positional styling properties to create a pleasing visual presentation without compromising accessibility.
So is this the killer blow for table layout? The W3C Web Content Accessibility Guidelines say "Tables should be used to mark up truly tabular information ("data tables"). Content developers should avoid using them to lay out pages ("layout tables"). " However, the people at WebAIM (Web Accessibility In Mind) aren’t against table layout per se. In an article Creating Accessible Tables
WebAIM says:
Unfortunately the table accessibility techniques they cover, seem unlikely to appeal to anyone using tables in Dreamweaver as a quick and easy web design solution.
So what is the solution?
If we agree that source ordering and accessibility are important issues in web page design, (even if only to avoid being sued) and that designing a web page using tables is only quicker when using a WYSIWYG web design tool, then the solution is obvious, use a CSS based web design tool which produces standards compliant web pages... but is there such an animal?
Nvu (pronounced N-view, for a "new view") Is one open source community contender in this field.
The developers bill it as
"A complete Web Authoring System for Linux Desktop users as well as Microsoft Windows and Macintosh users to rival programs like FrontPage and Dreamweaver "
Attempts to balance this with their other claim "Now anyone can create web pages and manage a website with no technical expertise or knowledge of HTML." result in it falling between the two stools.
I find Nvu’s tendency to alter existing code without asking, makes it far too scary to use on complex, pre-existing pages and the use of pop-up dialogs for editing properties is cumbersome compared with a context sensitive sidebar. However, given its very early development stage and provided it doesn’t stall completely (there hasn’t been anything new for nearly a year) it can only improve.
Amaya, also from the Open Source stable, is the W3C’s Editor/Browser. I didn’t look too far into this softare since it failed spectacularly to correctly render the two valid CSS/HTML web pages I tried it with. Given the number of unsupported CSS properties listed in the Current state page of their site this is hardly suprising.
Dreamweaver. If it has a competitor in the commercial market place that even nods in the direction of standards compliance I’m afraid I can’t find it.
When I started writing this article, I had no idea how you design a web site using Dreamweaver. I downloaded the 30 day Trial version of DW8, but, it won’t install on Windows 98... so I had to make do with viewing the Dreamweaver 8 - What is New Flash Presentation. The CSS and accessibility support capabilities are strongly emphasised and, I have to say, look pretty good. So Huw, get your hand in your pocket for the upgrade fee. (or maybe just ask for a review copy?)
Disclaimer
I am not, and would never claim to be a CSS "Guru". So any failings in the layout or styling of this web page are mine alone and cannot be put down to weakness in CSS as a layout tool.
Indeed this is the point of the exercise. If a beginner, like me, can create this layout in an hour or so, with nothing more than a text editor, surely it can’t be as difficult as Huw claims. CSS may not be the ultimate layout solution, but it is the best solution presently available.
... and finally
It may have taken me very little effort or time to re-code Huws’s page but the man hours and agony that have gone into generating the content have taught me one thing - I’m no journalist. So Huw, your job is safe, and I hope you take this in the spirit it was intended.