This is the celebrated journal of Mr. Simon Collison A.K.A Colly

Call yourself a web developer?

12th July 2004

Let’s take a close look at a popular blog and it’s sins. I won’t hold back here. Sketchy image-replacement, an overdose of div tags, extraneous class declarations, improper use of phrase elements, flickering roll-overs, barely semantic.

It validates as transitional XHTML, but then that hides a multitude of sins. Seems the site was launched in a rush, resulting in tired and heavy code. The site needs work. Dare I name the offending developer? I suppose I should.

It’s me.

I admit it. I’m not perfect, and neither is CollyLogic’s XHTML. So, after an enlightening trawl through Dan Cederholm’s new book, I have begun the great repair job. All the action is currently taking place on one test page, and I’ve already implemented a plethora of changes, creating considerably more semantic code, and shaving kilobytes off the page size in the process.

Keep an eye on the testing page.

The testing page carries more details of what’s been done so far, and what the next steps will be. Eventually, I’ll implement the changes site-wide, and will be detailing all the key changes made to the markup, outlining the benefits of each move. You can plot the progress on the test page, and drop some comments here if you need to bring my attention to something. In the meantime, don’t you dare judge me by the current markup, darn you!


# Keith responded on 12th July 2004 with...

I KNEW it! ;)

Hey man.  Don’t worry, I’m sure even the most anal developer has some of the same “problems” you do floating around.  Really clean, semantic, tight code is hard to manage and develop. 

Let’s face it—the real world forces us to cut corners.  In any case, the fact that you are even thinking about it should be commended! 

Good luck!

# the lazarus corporation responded on 12th July 2004 with...

I know what you mean - I’ve currently redesigning the lazarus corporation site to standards compliant XHTML (trans) and the Cederholm book hasn’t even arrived yet.  Its a neverending battle…

# Simon Snorkeller responded on 12th July 2004 with...

Daring, noble and hopefully not futile…! Already the new version reads as structured, marked-up content rather than tangled code (maybe a good, quick subjective test?).

It’d also be very useful for you to publish both before and after examples (obviously when you’re done, and I’m sure you’re planning to), along with a brief analysis of the benefits, perhaps from access and page-weight angles.

But the really impressive part is going to be applying this level of structural order/simplicity/perfection to the most complex client requirements. I’m sure there’ll be plenty of tea involved…!

# Simon Collison responded on 12th July 2004 with...

Yeah Snorkeller, can we just build blog-style websites from now on? Hey, we could just use this site as a template. There’s no point in trying to innovate, it cuts down on your Guinness time.

I will be doing side-by-side before and afters once I’ve done the job.

A good example is the Agenzia/YAH logos section - the markup went from 10 lines to five, and the CSS from six images to two, with the added bonus of replacement text if required. Not bad, eh?

# Simon Snorkeller responded on 12th July 2004 with...

Less weight… and far snappier too, at least in Safari. As an aside, do you think the drive for validation-at-all-costs has sidetracked real best-practice…?

# Simon Collison responded on 12th July 2004 with...

There have been a lot of discussions (can’t find more right now!) about the worth of making/forcing a site to validate, and even whether it’s good practice to place validation buttons on the page. It’ll go on and on…

I think (for what it’s worth) that validation is stage one: debugging, spotting key errors, adhering to the basics of (X)HTML. After that, of course there are more things to worry about - and we all know that the validator can’t spot over-use of divs, spans and some old phrase elements. It is just a stepping stone, and a way of spotting stray SGML characters.

I feel like I’m becoming much more concerned with semantics and future-proofing my designs. I think it’s also a pride thing, although increased accessibility can’t be a bad thing can it?

And as for the validation buttons, I show them partly for my own use, and partly to encourage others to find out more about standards - and I will keep them there so long as the industry is in transition.

# mixin visuals responded on 13th July 2004 with...

great read and cool site you have here.  good stuff

# Malarkey responded on 13th July 2004 with...

Eh up Mr. Colly,

Are you going to re-factor your div id’s and class’ names to any common convention? ;)

# Simon Collison responded on 13th July 2004 with...

Oh yes, of course. Currently I’m using:

wrapper, header, navcontainer, content (blog, sidebar), footer.

I’m not totally comfy with all of your recent suggestions though. branding feels weird for the header, and I’d be lost without sidebar. However, I’ll probably replace blog with content-main, and navcontainer with navigation, which would conform to Malarkey Regulations.

Are we any closer to defining some strongly suggested conventions, or is it just you, Meyer and I who really care about this?

# Malarkey responded on 13th July 2004 with...

I think it’s just us saddos ;)

Perhaps we can do a Doug and Dave swap next year, although I have a plan for something MUCH funnier…

# Paul Watson responded on 13th July 2004 with...

I think it’s important to differentiate between

(1) suggesting people use intelligently-named ids and classes which refer to the ‘type’ of content rather than it’s position, colour or their pet cat’s name, and

(2) trying to pre-determine the structure of all websites by defining a strict structure of “allowable” div names.

I’m all in favour of (1), but not too keen on (2). 

In other words, I think that the naming structure should be held up as an example of good practice (and perhaps also as a starting point), but not as a complete and (by definition, restrictive) set of divs.

But that’s kinda hinted at in the original article.

I think maybe the solution that would suit me is to name your own classes and ids, and perhaps have a (commented out, of course) URL in the css file which would point to the developer’s definitions/naming convention - almost like a DTD for a css file.

This would allow people to create their own naming structures - useful if your site needs extra ids/classes or perhaps if the developer wants to name their ids and classes in their own (non-English) language.

# Simon Collison responded on 13th July 2004 with...

Hi Paul. Good point about other languages - that came up in those previous discussions too. I say ‘suggested’ conventions, to benefit potential swaps such as the one Malarkey mentions (I’ll look forward to that). For example, CSS Zen Garden - where designers take the existing building blocks and re-interpret them with their own style-sheet. is a good example of how controlled naming conventions are a real plus.

Essentially, I see scope for a set of conventions that are available for such projects if required, which would also allow project coordinators to work smoothly with others to change stuff on the fly (imagine an exchange between the Earth Zen Garden and the Mars Zen Garden, all possible through common id names)!!!

# the lazarus corporation responded on 13th July 2004 with...

I was just getting up to scratch with all this accessibility and css stuff, and the buggers release PHP5 - yet more new stuff to learn.

Apparently there’s loads of new XML and SOAP functionality, and a new Object Model - now I just need someone to explain it all to me…

... still, at least I’ve got another couple of years until my web hosts upgrade to v5.

# Nixon responded on 16th July 2004 with...

@Lazarus & off-topic: The most interesting feature of PHP5, at least from a standards perspective, is the Tidy extension. You can pass your stuff through the PHP parser and it’ll escape your entities and force a doctype- it’ll even beautify your HTML.

Responses are now disabled Your ability to respond is disabled automatically some 30 days after articles are published, or manually much sooner if spamming guttersnipes target a particular article.

Prev 238 Next

Superfluous Aside

Archived in HTML & CSS, Design & Web

There are 14 responses

External References

Copyright © Mr. Simon Collison 2003-2017. Protected and licensed under a Creative Commons License. Grab the RSS feed

Engineered in Nottingham, scaffolded by ExpressionEngine, steam-pumped by United & kept alive with tea and hugs.