Failed Redesign: Hope Technology
A failed redesign is a Web page created from scratch, or substantially updated, during the era of Web standards that nonetheless ignores or misuses those standards. A failed redesign pretends that valid code and accessibility guidelines do not exist; it pretends that the 21st century is frozen in the amber of the year 1999. It indicates not merely unprofessional Web-development practices but outright incompetence. For if you are producing tag-soup code and using tables for layout in the 21st century, that’s what you are: Incompetent.
Yesterday Hope Technology relaunched. I don’t like to do this, because I really like Hope as a company. They make some fine products and they employ some cool people. At one of the RedBull / Saab races back in the day they sorted out my brakes a treat – for free.
Let’s start with the home page: One look at the code reveals that it was sliced and diced in Photoshop and ImageReady, saved as HTML and then left at that. Amateur at best: the code is absolutely foul. There is no alt text on any of the images, rendering the buttons completely useless to screen readers. OK, so there may not be that many blind mountain bikers, but that also renders the page completely useless to search engines. Nice work.
So, being from England, I click the button with the union jack on it. I’m transported to hopegb.com. It hurts my eyes, but that’s entirely subjective and not what I’m here to discuss. I take a quick peek at the source code and… EEEK!
I know I can be a bit of an HTML purist sometimes but that code just makes me want to cry. How, in the year 2006, can someone still be producing that and charging for it? Reams and reams of layout tables, spacer gifs, alt-less images,
<p><b><font> in place of proper heading elements, inline styles… I could go on. This is a shameless example of tag-soup straight out of the dark ages. It’s like the semantic web never happened.
Eh? What does it matter what the code looks like?
- Semantically correct code will be far more accessible to screen-readers. Like I say, there aren’t many blind mountain bikers, but what if a blind mother wants to buy her mountain-biking son a new bit for his bike?
- Imagine i’ve got bad eyesight, so I need to scale the text-size up. Oooh, look, the whole site breaks! Brilliant!
- You don’t care about accessibility? Try this one: Semantically correct code has the added bonus of performing dramatically better in search engines. Why? Because a search engine sees your site in exactly the same way as a screen-reader.
- Remember: Bandwidth costs money. That code is enourmously bloated. Streamlined, semantic code costs me less to download (remember: not everybody has access to broadband) and it costs you less to host.
- It can also degrade nicely onto devices other than my high-resolution desktop PC: Think smartphones, PDAs, Nintendo DS, Sony PSP and that sort of thing.
Accessibility and search-engine performance clearly weren’t even considered when it came to building this website.
OK, enough about the code.
I want to buy a disc brake for my bike. I know Hope make them, but I don’t really know what sort I want. There’s a list of products over there, but what the hell is the difference between the Mini, M4, Mono6 and Trial? Apparently I need to know what I want before I click on it. Someone hasn’t thought about this from the user’s point of view, have they?
So, I think I want a Mono M4 disc brake. I click the link and again i’m presented with a confusing list of links. If I didn’t know exactly what I was after I would long since have given up and gone home. It’s verging on unusable.