mentioned she liked reading my rants on how websites are built, and since I’m in the website-building business, it makes sense that I’d have some insights on what’s what. This is not to say that I’m an authority on how sites should be built, nor am I the only one spending time nitpicking. There are sites that focus on the whole package, like Sitecritic.net and Web Pages That Suck – both of which, for some reason, have pretty bad UI – but are thorough and well-written. As a developer, not a designer, I’ll try to focus mostly on use of code, and how websites that look just fine could greatly benefit from a bit of code rewriting.
(I don’t know if I’m going to write even more than one of these, so I decided I’d stick this on my personal blog for now.)
The lineup for the 2010 Treasure Island Music Festival was released yesterday. I’m pretty excited about everything on day 1 (being more of an electronic than indie guy). The color scheme for this year is a little strange (reminds me of a rotten fruit salad) but otherwise I like the design they’re going for. I was a bit appalled when I took a look at the code and a hodgepodge of tables jumped out at me.
There’s a myth that the
<table> element is an awful, taboo, even deprecated thing that shouldn’t even be thought about when it comes to putting a site together. It’s false:
<table> is great for, well, tables. Spreadsheets. Charts of data. Anything that can be logically arranged in rows and columns. But I don’t see any spreadsheets on this page:
In fact, I don’t see any rows or columns at all, in a traditional sense. I suspect tables were used to “speed up” development, as this reeks of a “slice and dice” job, where the developer was given a mockup and he decided, for some reason, to splice it into tiny bits and shove it into a series of convoluted tables with
Bottom line: splicing is baaaad. I can’t think of a situation in which splicing would be a good thing to do. When you splice a PSD into tiny images and scatter them throughout a page, you do a few things:
- You waste time taking apart an existing design and putting it back together, when you don’t have to
- You make a page hard to maintain – what if the design changes?
- You increase the amount of HTTP requests by a buttload
- You doom a page’s SEO value by increasing load times, removing any opportunities to make a page semantic and machine-readable
The developer, instead, could have exported the entire design as a single PNG (oh god, I just noticed that they’re all GIFs), set it up as the background of the main site container, and overlaid some absolutely-positioned lists, whose text content is hidden via CSS. That is to say, the site with styles disabled would look something like this:
Treasure Island Music Festival
October 16 & 17, 2010
- LCD Soundsystem
- Belle & Sebastian
- The National
And with CSS implemented, the site would still look like it does above.
In general, this a site that, despite being functional and pretty-looking, makes me want to smack the developer upside the head. It lives in a world where
<img> are the only HTML elements worth using, substitutes CSS for deprecated/invalid HTML attributes, loads a million images when in a perfect world it wouldn’t have to load any (web fonts! SVG! etc.!…), and sacrifices any chance of being accessible to search engine bots or those with disabilities (no meta tags, no alt text, not a hint of semantic HTML usage).
Boy, this was kind of therapeutic. If you found this at all interesting, feel free to send me some more examples. I’m looking to rant about recent, small-scale sites that aren’t overtly horrible but could use some work. Or I’ll find ’em instead.