I’ll be jumping on a train to London in the not-too-distant future and making my way down to the @media 2006 confer­ence, which is nice.

If you’re going, I might well see you there. I you’re not, well, yah boo sucks to you.

[Technorati tags: atmedia, atmedia2006]

I spotted Hope Technology’s new website a while back and branded it a failure. Alas that seems to be something that’s spread­ing through­out the UK mountain bike industry.

Mattmagic pointed out that both Mojo and 24Seven have recently launched redesigns. He’s left it to me to point out exactly what’s wrong though. Let’s take them in turn:

24Seven Bikes

• That’s possibly the most point­less splash page in the world, ever. What’s more, it’s completely inaccess­ible. Where a normal link would have worked, they’ve gone with an image map. They’ve used obstruct­ive javas­cript instead of the href attrib­ute. Best of all, they’ve forgot­ten to include any alt text. Search engines? Screen readers? No, I didn’t think so.
• Oh, I see, it’s supposed to open in a perfectly sized popup window isn’t it? It doesn’t though, because I’ve told Firefox to open links in the same window unless I say other­wise. Someone needs to read Veen’s Give Up Control.
• Frames? In this day and age? Are you quite mad?
• Great use of the title element. A nice helping of UNTITLED DOCUMENT across the top of the browser window looks really professional.
• Those are some nice navig­a­tion buttons you have there. I can’t read them though. Is there any chance you might choose a legible font next time?
• Whenever you use a graphic to create a navig­a­tion element, you must supply alt text. It’s not an optional extra.
• Speaking of navig­a­tional elements, using select elements to jump between pages is just plain daft, especially when they cease to work without Javascript.

Oh I give up. I could carry on for hours about this one.

Mojo Suspension Hoodoo

• Oh man, another great splash page. Why do people still bother with these? This one looks great if you’re brows­ing maxim­ised at 1280 x 1024. Anything less and I start to get horizontal scroll­bars. Even better is the fact that there are no obvious navig­a­tional elements. It takes a good few seconds before you realise those three words down on the bottom left are buttons.
• What the hell is an M-CYCLE anyway? Just write motor­cycle and be done with it.
• We’re currently greeted with the message “THE WEBSITE IS CURRENTLY BEING UPDATED (20÷03÷06), SO SOME IMAGES & LINKS MAY NOT WORK. PLEASE BARE WITH US, AS IT WILL BE SORTED OUT VERY SOON, THANK YOU.” Firstly, you might want to spell “bear” correctly. Secondly, why did you launch if the site was going to be full of broken links? That looks profes­sional, doesn’t it?
• Once we get inside we find great use of frames once again. I don’t tend to keep my browser maxim­ised, and I quite often have a sidebar open. Thanks to the brilliant design of this site, half of the navig­a­tion disap­pears off the side of the page. Now, I know I ranted about uneces­sary horizontal scroll­bars up there, but here’s somewhere I actually need one. Unfortunately, one isn’t forth­com­ing. Just fantastic.
• Clearly I’m going to have to shout it this time. ALT TEXT, ALT TEXT, ALT TEXT and not just when you feel like it, either.
• The bottom frame and the flash anima­tion that sits within it: That really is completely point­less guff isn’t it?

Again, I could go on.

In conclu­sion

These sites are both great examples of work by someone who’s got themselves a copy of Dreamweaver but has virtu­ally no idea how to use it, let alone an under­stand­ing of exactly what it does or what it outputs. “As long as it looks OK on my PC that’s good enough”.

As for semantic markup and stand­ards compli­ant code, there’s no point even showing it to the valid­ator. It’s awful. Not quite as bad as Hope’s code, but I suspect that’s simply because Dreamweaver has cleaned up it’s act a bit over the years.

Don’t get me wrong; I don’t partic­u­larly enjoy tearing someone else’s work apart like this. I know that these compan­ies produce damn good product and have great customer service. Alas their websites are absolutely awful and someone needs to say something.

So well done. Congratulations on your failed redesigns. Joe Clark would be proud. For your sakes I hope you got them dead cheap.

So, Dustin Diaz has come up with the idea of Naked Day. It’s simple really, you just switch off your website’s stylesheets for the whole of April 5^th.

It’ll be inter­est­ing to see how well all of the parti­cip­at­ing sites out there work without stylesheets. Mine’s not too bad, but it could defin­itely be better.

I’ve put the stylesheets back now, after all it’s now April 6^th here and I can’t stand to look at the nudeness anymore.

Making CSS layouts work in Internet Explorer for Windows has for me, until recently, been something of a struggle. I know CSS virtu­ally inside out, and still the dreaded IE factor would always get in the way. Some fairly recent devel­op­ments have changed all that for me though.

• First up is the discov­ery and subsequent document­a­tion of Internet Explorer’s mystical “hasLayout” property. Basically, if your CSS can trigger hasLayout on an HTML element, it magic­ally solves lots of problems with IE’s page rendering.
• Second is an obscure piece of the CSS specific­a­tion, which basic­ally says any element with overflow set to something other than visible should expand to contain any floated elements within it. This only works for Internet Explorer if you can trigger the mystical haslayout on the element in question (AVK has more).

Blah blah blah, obscure something-or-other, whatever…

You’re right, it’s pretty dull stuff, but put the two things together and they add up to something big. This very simple approach has solved two of the biggest funda­mental problems with using CSS for page layout: Floated content escap­ing from it’s parent element, and compat­ib­il­ity with Internet Explorer.

• To stop floated content from escap­ing from it’s parent element, set that parent element’s overflow to hidden (or something else other than “visible”).
• To make the layout work correctly in Internet Explorer for Windows, give that same element a width or height (or use another way of trigger­ing hasLay­out).

Simple huh?

But what about the real world?

OK, let’s take the current incarn­a­tion of this very website. On each of the major struc­tural elements on the page, I’ve set (for example) width: 25em; and overflow: hidden;. The former triggers hasLay­out, and the latter encloses any floated content. Ah bisto! The site works in Internet Explorer with virtu­ally no fiddling. Superb.

So take two things away from this: Non-visible overflow and dimen­sions. They are your saviours.

You may remem­ber that a while back Joe Clark unleashed Failed Redesigns and invited the rest of us to do the same. To recap:

A failed redesign is a Web page created from scratch, or substan­tially updated, during the era of Web stand­ards that nonethe­less ignores or misuses those stand­ards. A failed redesign pretends that valid code and access­ib­il­ity guidelines do not exist; it pretends that the 21^st century is frozen in the amber of the year 1999. It indic­ates not merely unpro­fes­sional Web-development practices but outright incom­pet­ence. For if you are produ­cing tag-soup code and using tables for layout in the 21^st 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.

However, their new site (designed by GraffX and based on the ID CMS) is a complete disaster.

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, render­ing 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 trans­por­ted to hopegb.com. It hurts my eyes, but that’s entirely subject­ive 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 produ­cing 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 shame­less 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?

1. Semantically correct code will be far more access­ible 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?
2. Imagine i’ve got bad eyesight, so I need to scale the text-size up. Oooh, look, the whole site breaks! Brilliant!
3. You don’t care about access­ib­il­ity? Try this one: Semantically correct code has the added bonus of perform­ing dramat­ic­ally better in search engines. Why? Because a search engine sees your site in exactly the same way as a screen-reader.
4. Remember: Bandwidth costs money. That code is enourmously bloated. Streamlined, semantic code costs me less to download (remem­ber: not every­body has access to broad­band) and it costs you less to host.
5. It can also degrade nicely onto devices other than my high-resolution desktop PC: Think smart­phones, PDAs, Nintendo DS, Sony PSP and that sort of thing.

Accessibility and search-engine perform­ance clearly weren’t even considered when it came to build­ing 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 differ­ence 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 presen­ted with a confus­ing 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.

The idea that someone has charged money to produce this shoddy excuse for a website just makes me angry. So then Hope Technology, I hereby brand you a Failed Redesign. Congratulations.

Just a quickie to say that I’ve upgraded to WordPress 2.0.1, and moved things around a bit. Things are bound to be a bit screwy for a while — bear with me while I get them sorted out.

The home page is at plain old thinkdrastic.net as opposed to /journal/ now for a start. You should get redir­ec­ted cleanly, but I can’t promise anything.

So far, WP2 looks quite nice. The wysiwyg preview is a great little addition.

Update (Monday 20^th Feb)

OK, so I might have ever so subtly redesigned the place aswell. I still need to do loads of tweak­ing, aswell as find somewhere to put my inter­est­ing asides.

The really bonkers bit? It’s needed approx­im­ately no tweak­ing for Internet Explorer so far. Crazy biscuits!

Update II (Sunday 26^th Feb)

‘Photos’ and ‘Interesting Asides’ make a return to the sidebar. Is that better Matt? You may need to hit ‘refresh’ to get the latest version of the stylesheet or things might look a little odd.

Man, it’s taken me over a week to write about this. Slacker extrod­in­aire. Anyway, I got up very early indeed last Friday morning and made my way across the country to the Victoria Park Plaza Hotel for Clearleft’s Ajax Workshop. I wasn’t quite sure what to expect, but what I got was very good indeed.

So the Clearleft crew took a bunch of web design­ers and developers and threw them together in a room. I had a few wierd moments where I looked around and recog­nised various faces from my travels around Flickr and the blogo­sphere [1]. I also felt ever so slightly jealous as a variety of Powerbooks were unfurled onto the desks around me.

Jeremy Keith spent the morning taking us through Javascript, DOM Scripting, the basics of Ajax and how it’s done (JSON looked partic­u­larly inter­est­ing). If you’re scratch­ing your head and asking “WTF is Ajax, man?” Suffice it to say that it lets you refresh only the parts of the page that you want to, rather than fetch­ing a whole new page from the server every time a user clicks a button.

All good stuff, but not the main reason he had gathered us there at all. No, that came after lunch:

Hijax

Hijax is a best practise method­o­logy for build­ing web applic­a­tions. It basic­ally says:

• Build your pages in a completely modular fashion.
• Build it such that it will work for users without Javascript enabled.
• Add the AJAX function­al­ity in once you’ve got the pages working without it.
• Only add the AJAX in once you’ve thought very carefully about the usabil­ity and access­ib­il­ity issues involved with them.

It takes it’s name from the fact that you hijack the default actions of a web page and bend them to your will. Clever huh? Jeremy does a much better job of explain­ing it, so I’ll leave the rest to him. One more comment though: When Google built GMail (one of Ajax’s poster children), they delivered a complete Ajax applic­a­tion first, then months later managed to produce a completely separ­ate plain HTML version. They had to do all of the work twice: If they’d done it the Hijax way, they could have had both versions of GMail at once and in the same applic­a­tion. Makes you think, doesn’t it?

Ajax: The downside

Ajax is a fantastic techno­logy which has far reach­ing implic­a­tions across the web. However, it has some major issues: Usability and Accessibility to name but two.

Say the user clicks a button and something updates elsewhere on the page. How do we inform them that something happened? There’s a number of answers to this question: Animations and special effects are just two of them. But what if they have a low-resolution screen, they’re using big fonts, or they’ve simply scrolled too far, leaving the vital anima­tion or effect off-screen? What about screen-reader users — how do you tell them that only part of the screen has updated?

Then there are the problems with bookmark­ing and the back-button. In a tradi­tional web applic­a­tion, every move you make is added to the browser history. Ajax apps suffer many of the same issues as Flash and Frames-based sites: Because you aren’t refresh­ing the page every time, you aren’t updat­ing the browser history. Hitting back will likely take you right out of the app and bookmark­ing simply doesn’t work. Jeremy’s answer was that if the user felt the need to bookmark, maybe you’re changing too much of the with page using Ajax?

There is currently no clear answer to to a lot of these issues, but a lot of good work is going on in that direc­tion. Recent work by the likes of Mike Stenhouse and Robert Nyman is showing us the way. Some people are advoc­at­ing that we should get screen-reader users to disable Javascript. Others disagree and say that improved software will come in time. I share the latter point of view — besides, what about those in-between cases, like low-res screens, big fonts, mobile users and so on? There’s defin­itely lots to think about when you’re putting together Ajax apps.

Coffee Break!

On top of all this, I found the time to chat to the likes of Adam (from the DiH mailing­list), Molly, Mike and Paul about IE7, it’s implic­a­tions and how Microsoft are changing, then later to Jeremy, Bruce and others about haircuts, earrings, Flickr and social networking.

After the workshop, we all trudged upstrairs to the hotel bar and indulged in a couple of beers. At some point my sister, Alice, phoned me and deman­ded that I go and see her. We met up with Angus and dined in a very good turkish restaur­ant, before hooking up with various friends of hers for the evening. I think we left Tru Thoughts @ Cargo at about 3:30am. A long day, but a good-un.

Oooh, that got a bit stream-of-consciousness there for a while didn’t it?

[1] Did I just write “blogo­sphere”? Gaaah… shudder.

I’ve been wanting to redesign this place for ages, but I’ve never really found the time or indeed motiv­a­tion to do it properly. I needed to change the look with absolute minimum effort for me: I figured a new header image was probably the easiest way to do it, so that’s exactly what I’ve done (it should look like this — you may need to hit reload or clear your cache if you’re not seeing it).

G-Dog gets his five minutes of fame this time. You can tell the pictures are quite old — he’s riding an Orange 222 (You’re my bike now Dave!). They were taken back in July of last year up on Leckhampton Hill , then amalgam­ated in Photoshop. Yes, I know it all needs a bit of tweak­ing — especially the navig­a­tion. I’ll get around to it at some point.

Oh and a completely unrelated HAPPY BIRTHDAY BAGGUS!