I work for a small company of 100 people or so and am the sole web designer, developer and general IT guy for the office. Following my recommendation, we’ve recently taken on the project of re-desiging our website and bringing the 10 year-old code up to web standards.

As the people in my office tend to keep me very busy, my superiors opted to hire a large contracting company to update the website and bring the everything up to par. I wasn’t against the idea, but I definitely would have preffered to structure and laying out the CSS, documenting everything in case I’m to be replaced later on, but time was a factor and I couldn’t deliver as fast as they needed. We had used them before, and they’ve built us awesome ASP applications that make all of our lives easier, so I was under the impression they could at least provide proper HTML.

Several months go by and we near completion and finally get a glimpse of the new site. It was like hitting me in the face with a hammer. It looked horrible.

Disobeying client-provided specifications

The first thing I noticed was that the colors were way off their mark; and I’m not talking a simple shade or two, I’m talking full-on eye-balled color estimates and shrugging it off as good enough. It was horrid. Especially after I had provided them the PSD with precisely selected color hues to match our corporate identities, meet contrast ratio requirements, etc. I sent them a message to inquire about what happened. They didn’t have Photoshop, so they couldn’t get the color codes from the PSD. Yeah, I’m sure you’re all hitting yourself on the forehead as well.

I let it slide and updated the stylesheet myself when I noticed that many subtle effects weren’t done as well. The sidebar menus didn’t have any rollovers, the background image wasn’t in place, the pulldown menus weren’t coded, etc. Doing these changes have set me back longer than it would have taken me to code the entire thing because I had to decipher their cryptic CSS. Let’s look at a few horrible blunders they’ve managed to pull off, shall we?

Ultra generic CSS with no comments

I hate people who do this. I can’t tell you how many hours I’ve struggled trying to decipher the cryptic CSS they graciously provided us with.

div.1 { padding: 0 6px 4px 2px }
div.2 { margin-left: 3px }
div.3 { color: red } 

For the love of flying spaghetti monster, please don’t be ‘that guy’. Take the extra 30 seconds to come up with appropriate names. What would you prefer to debug? ul#sidebar, or #list3?

Tabular content placed in dividers?

We all want to avoid using tables to layout designs, but tables were meant to display tabular data. Seems logical, right? Not to these guys, apprently. We’ve got a page with about fifty expense reports that, normally, would be displayed in a table. Why these guys decided to place them in dividers I’ll never understand. Here, let me show you.

<div class="box1">
	<div class="row2">
		<div class="col32>Content</div>
		<div class="col64">Content</div>
	</div>
</div>
<div class="spacerBottom"> </div>

Not only are they using dividers for tabular data, they’re actually using a blank divider as a “spacer” rather than placing a margin on their “box” class and are still using the deprecated <b> tag. Here’s how it should have been done:

<table class="data">
	<tr>
		<th>Content</th>
		<td>Content</td>
	</tr>
</table>

The rest of the effects should be applied to the table’s class, and child elements. Something like this:

table.data {
	background: #FFFFFF;
	border: 1px solid #000000;
	margin: 0 0 10px 0;
	width: 100%;
	}

	table.data th {
		font-weight: bold;
		text-align: left;
		width: 30%;
		}

	table.data th, td { padding: 2px; }

Clean, effecient code with minimal markup and no trash classes. I sent an e-mail to the contractors, and their reply was less than surprising: we use divs for everything because W3C says not to use tables. Sigh.