Oh the Horrors! Bad Web Design is Everywhere!

I’ve had this post sitting in the queue for awhile but Robert Nyman’s Worst Code Ever topic (also covered at 456 Berea Street) prompted me to finally post it.

I’m not just talking about the stuff we know is bad. The endless layout tables, garish background images, and old school layouts. I’m talking about the stuff we thought was supposed to be good. CSS layouts are finally starting to become more common. Big web sites are redesigning with CSS, and they might even look more fresh and modern. But is it really better? You’d think, until you actually look at the code.

Caveats

Before I begin, I have to qualify my statements here by admitting that most large websites are using content management systems. Templates in content management systems are generally a pain the ass to work with. That said, there is no excuse for some of the faults committed here. I can accept some inconsistencies in class names and the occasional use of inline styles. What most of these sites are doing goes far beyond that.

The Toronto Star

The Toronto Star launched a new design in December. It looks much better and hey, they actually got rid of the tables! Good, right? Not so. Check out some of their HTML:

<div class="specialsHome">
        <div id="ctl00_ContentPlaceHolder_leftContentContainer_ListWebPart_EditorialSpecials"> 

        <div id="specials">
            <div class="tabSpecials" style="width: 614px;"><span class="specialTitleBlue">SPECIALS</span></div> 

            <div class="picColumn">
                <div class="picSpecialsTitle">  

Or how about:

<div style=”width: 7px; float: left;”> </div>

And some CSS:

#ctl00_ContentPlaceHolder_subNavigation_NavWebPart_SectionLinks_hockey_ctl00___Display__ {
background-color: #D6E0EB; color: #336699;line-height: 20px; font-weight: bold; padding: 3px 8px 4px 8px;}
#ctl00_ContentPlaceHolder_subNavigation_NavWebPart_SectionLinks_baseball_ctl01___Display__ {
background-color: #D6E0EB; color: #336699;line-height: 20px; font-weight: bold; padding: 3px 8px 4px 8px;}
#ctl00_ContentPlaceHolder_subNavigation_NavWebPart_SectionLinks_basketball_ctl02___Display__ {
background-color: #D6E0EB; color: #336699;line-height: 20px; font-weight: bold; padding: 3px 8px 4px 8px;} 

It goes on like that for quite a long time. What a disaster!

ANGEL Course Management System

We use this at work. Last summer they upgraded the system to version 7.1 which, although it uses CSS for layout, does it appallingly badly. First off, they’ve kept in the frames. Yes, that’s right, frames. And check out some of the code used to create a header with a graphic background and rounded corner on one side:

<div class="box nuggetTitleBox">
<div class="box_tl"><div class="box_tr">
<div class="box_top"></div></div></div>
<div class="box_left"><div class="box_right">
<div class="box_middle">
<div class="minwidth"></div>
<div class="nuggetTitlebar">
<div class="nuggetTitle" style="padding-right:50px">
   <a target="_self" id="lnkMyCourses">
   <div class="nuggetTitleIcon"></div>Courses</a>
   </div>
<div class="nuggetIcons">
   <a target="_self" href="(path)" mce_href="(path)"><img src="(path).gif" mce_src="(path).gif" alt="settings:  Courses" border="0" hspace="1" vspace="0" align="middle" class="nuggetSettingsIcon"></a>
   <a target="_self" href="(path)" mce_href="(path)"><img src="(path).gif" mce_src="(path).gif" alt="hide: Courses" border="0" hspace="1" vspace="0" align="middle" class="nuggetMinMaxIcon"></a>
</div>
</div>
<div class="minwidth"></div>
</div></div></div>
<div class="box_bl"><div class="box_br"><div class="box_bottom">
</div></div></div>

At least I think that’s it, I had a hard time finding the start and finish of that. There are 14 div’s in there!  !($^#!@@!?#@?#@? What in the world were they thinking when they did that ??? I think they just went through and replaced all the tables with div’s. Gee, that’s an improvement!

The system also has a separate PDA and section 508 mode. If it was marked up properly that could be done with some alternate stylesheets instead of building a completely separate section.

vBulletin

Although it doesn’t use CSS for layout, the default theme for a vBulletin forum actually does validate. That’s more than I can say for a lot of CMS’s. You’d think that would mean that the code is actually half-decent. No such luck. They’ve got stuff like nested tables three deep and class=”smallfont” on half of the elements. It’s a nightmare to work with. So much so that we’ve decided we would rather not and will be moving our forums to a different platform as soon.

Summary

Clearly, the masses are finally beginning to realize that CSS is a better way (or at least the “cool” way) of designing web pages. Even so, they obviously do not understand why or how to do it. I continually fail to understand how so many “professionals” can have such a severe lack of understanding of basic concepts in the industry.

The question I’ll leave with you is this: Is CSS always better than tables? Even when it’s really bad CSS? Bonus questions: Why don’t they get it? And why is it taking so long? Do you have some good examples of bad HTML?

Posted in Web Standards Post a comment

Comments RSS