I’m easily distracted in the office, especially when I’m working on something less than engaging. Here’s two things I’ve started doing to aid concentration:

1. Set your browser’s homepage to the web-site you’re working on right now, as opposed to something eternally distracting like popurls.
2. Hide the bookmarks toolbar, so you’re not tempted to click on any of the lovely buttons sat there saying click me!

Simple things, but they work for me. Anybody got any others?

You may remember the rants I had about the awful new web-sites launched by Hope, Mojo and 24Seven a while back. I was beginning to wonder if we would ever see the mountain bike industry launch a decent website. Well at long last it’s happened: Santa Cruz Bicycles UK have redesigned – and sugarstreet did a damn good job of it.

It looks fantastic. It works well. The HTML code is good. The Javascript is unobtrusive and the site continues to work with it switched off. The images have meaningful alt-content. The content is good.

Obviously it’s not perfect: The navigation isn’t particularly bulletproof and falls apart when I scale the text up. That’s just about all I can find that’s wrong with it right now though, which puts it leagues ahead of most other bike-related sites.

Good work peeps.

[Disclaimer: Mattmagic, the designer behind the redesign, is a friend of mine. My verdict on the website would be the same if I didn’t know him from Adam.]

So, my first @media is over and very good it was too. Highlights for me (in no particular order):

• Jeff Veen‘s presentation: Designing the Next Generation of Web Apps. Caused me to have all manner of light-bulb moments.
• Chris Wilson’s very informative presentation about IE7 – and (perhaps more importantly) future versions beyond that one.
• Mexican food with Adam and Gareth.
• The relief when Peter Crouch finally scored for England, then the elation when Steven Gerrard sealed it.
• Kate “buying” us (Amanda, Rich, Ross, Alan and myself) the most foul champagne of all time, then running away without drinking any enough.
• Ian Lloyd mistaking the moon for Big Ben.
• Robin Christopherson’s presentation was absolutely amazing (despite the technical hiccups). It gave a real insight into how a blind user operates a PC and what problems they can (and do) run into on a daily basis.
• Chatting with Adam, Nate Koechley (it’s pronounced “Keckley”) and [insert name of that canadian dude who took a liking to London Pride here] about some of the innovations going on at Yahoo! including a great sounding inverse-forum on their corporate intranet.
• Andy “Malarkey” Clarke‘s presentation: The Fine Art of Web Design. Really inspirational talk on pushing web design out of it’s current “comfort zone”. I intend to try. I wonder how far marketing will let me push it?
• The “hot topics” panel session which closed the conference. Jeremy Keith lorded it over Molly, Jon Hicks, Eric Meyer and Tantek Çelic, which produced a very entertaining debate.
• Inventing a series of new microformats (including hTopTrumps and hLove – for dating websites) in the pub with Rich, Gareth and Andy.

Big thanks to Patrick, Amanda and the rest of the team for organising it and everybody else who made it such a good event. It was great to meet you all again / for the first time. Can we book tickets for the next one yet?

[Technorati tags: atmedia, atmedia2006]

I’ll be jumping on a train to London in the not-too-distant future and making my way down to the @media 2006 conference, 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 spreading throughout 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 pointless splash page in the world, ever. What’s more, it’s completely inaccessible. Where a normal link would have worked, they’ve gone with an image map. They’ve used obstructive javascript instead of the href attribute. Best of all, they’ve forgotten 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 otherwise. 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 navigation 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 navigation element, you must supply alt text. It’s not an optional extra.
• Speaking of navigational 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 browsing maximised at 1280 x 1024. Anything less and I start to get horizontal scrollbars. Even better is the fact that there are no obvious navigational 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 motorcycle 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 professional, doesn’t it?
• Once we get inside we find great use of frames once again. I don’t tend to keep my browser maximised, and I quite often have a sidebar open. Thanks to the brilliant design of this site, half of the navigation disappears off the side of the page. Now, I know I ranted about unecessary horizontal scrollbars up there, but here’s somewhere I actually need one. Unfortunately, one isn’t forthcoming. 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 animation that sits within it: That really is completely pointless guff isn’t it?

Again, I could go on.

In conclusion

These sites are both great examples of work by someone who’s got themselves a copy of Dreamweaver but has virtually no idea how to use it, let alone an understanding 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 standards compliant code, there’s no point even showing it to the validator. 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 particularly enjoy tearing someone else’s work apart like this. I know that these companies 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 5th.

It’ll be interesting to see how well all of the participating sites out there work without stylesheets. Mine’s not too bad, but it could definitely be better.

I’ve put the stylesheets back now, after all it’s now April 6th 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 virtually inside out, and still the dreaded IE factor would always get in the way. Some fairly recent developments have changed all that for me though.

• First up is the discovery and subsequent documentation of Internet Explorer’s mystical “hasLayout” property. Basically, if your CSS can trigger hasLayout on an HTML element, it magically solves lots of problems with IE’s page rendering.
• Second is an obscure piece of the CSS specification, which basically 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 fundamental problems with using CSS for page layout: Floated content escaping from it’s parent element, and compatibility with Internet Explorer.

• To stop floated content from escaping 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 triggering hasLayout).

Simple huh?

But what about the real world?

OK, let’s take the current incarnation of this very website. On each of the major structural elements on the page, I’ve set (for example) width: 25em; and overflow: hidden;. The former triggers hasLayout, and the latter encloses any floated content. Ah bisto! The site works in Internet Explorer with virtually no fiddling. Superb.

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

You may remember 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 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.

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, 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?

1. 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?
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 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.
4. 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.
5. 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.

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.