IE8: light at the end of a long tunnel

Here’s a screengrab from an early preview version of Internet Explorer v8, lifted from a video on Microsoft’s Channel 9 website.

Why is this significant? For those who don’t recognise it, this smiley face is the Acid2 test, to see if your web browser is playing by the rules of CSS coding. It’s not the be-all and end-all, but it’s the generally accepted standard test. And most browsers fail it. In terms of the broad public audience, it’s basically only Opera and Safari (on the Mac). Or to put it another way, maybe 3% of the average website’s traffic.

This matters because, in a nutshell, coding websites is a pain in the arse when all the various browsers have their own annoying quirks in how they process CSS code. If we had widespread compliance with the rulebook, coding would be a breeze. Instead, I’d say the majority of coding effort is spent not on getting the initial design up and running, but on tweaking it to make it work across the board. This is costing you money.

Things are looking up. Firefox v3 will include an updated ‘rendering engine’ which will pass the test; and there’s been joy bordering on hysteria at the news this week that the latest test build of Internet Explorer version 8 – full release next year some time – passes the test.

But if I’ve learned one lesson lately, it’s the fact that big organisations (especially public sector) simply aren’t updating their browser software. Looking at the stats for the Our NHS Our Future site I built, with a predominance of public sector users: 70% of all users are using IE6. (On other private-sector sites I’ve built, it’s still well over a third.) And this is 14 months after IE7′s public release.

Yes, someone just switched on the light at the end of the tunnel. But it’s a very, very long tunnel.

(Anyone else fancy sharing their browser percentages?)

Pointless ALT tags

This one’s going to be controversial. I’m doing a lot of coding at the minute, sticking as best I can (naturally) to using DIVs, CSS and all that. It’s quite refreshing to realise that you can almost entirely eliminate imagery from the page code itself. But, of course, not always. And if you’re using inline images, you have to use ALT text, for accessibility and all that. Right? Well, maybe. I’m no longer convinced that it’s an absolute.

The W3C guidelines are pretty clear. Indeed, it’s actually checkpoint 1.1. ‘Provide a text equivalent for every non-text element (e.g., via “alt”…’ But let’s bear in mind these guidelines were published eight and half years ago: the days of banner imagery, text in GIF files, and all that. Most of which, thankfully, is behind us.

Here’s the quandry. Let’s say you have an article about Joe Soap. You’ve got Joe Soap’s name in the headline, and Joe Soap’s name throughout the article. You decide to add a picture of Joe Soap to make your page look a bit prettier. It’s just any old picture of Joe Soap; it’s not directly relevant to the story. Do you:

• interrupt the screen reader’s passage through the text of the story, to say ‘it’s an image of Joe Soap’?  (Like it’s going to be an image of something else?) or
• leave the ALT text blank?

My inclination is the latter. It’s surely better, in terms of usability generally, to make a judgement call, rather than relying on the absolute. Does the reader need to know what the image is? Is it essential / important / helpful to the reader’s experience? It may not be.

The Wikipedia page on the subject says: ‘While the use of meaningful alt text is necessary to comply with accessibility standards, and is good practice, sometimes an image is used for purely decorative purposes. In this case, one should use an empty alt attribute (alt=”").’ That sounds about right to me. But strictly speaking, that’s not what the W3C guidelines say… and that’s what we’re supposedly held to.

Design lessons from eye-tracking studies

I’m not going to add much commentary to this one: an excellent list of ‘23 Actionable Lessons from Eye-Tracking Studies‘. Many obvious, some less so. I’m especially curious about smaller fonts making people read more intently (assuming they’re interested in the first place); and single-column presentation performing better than multi-column.

Is that the BBC site? No, it’s state propaganda

We know that people like to take the BBC as a role model. But it’s still quite startling to see the extent to which the new Iranian government-backed English-language TV news network, Press TV has shamelessly copied it. Same basic layout. Same font. Same dotted lines in the left-hand menu. Same ticker at the top. Remarkably similar iconography. On the bright side, I suppose, it stretches a bit to fill a 1024×768 screen, where the Beeb is still sticking to its 800×600 optimisation. More on the channel in this Guardian article. Sadly it doesn’t yet come up in the Sky EPG.

I promised to leave that teenage web consultant alone…

…but in what is surely a case study for why search engine optimisation is essential these days, I discover that the two less-than-complimentary posts I wrote here are now the #1 and #2 Google search results for his name.

Lewis Bankes-Hughes is back!

I felt a bit guilty about my post earlier this week about kid entrepreneur Lewis Bankes-Hughes and his appalling website. It’s only fair, then, for me to report that Lewis has completely redesigned his company website, FluffyDuster.co.uk. On the bright side, it’s prettier. But it’s a single (non-scaling) Flash movie, with no meaningful title (only ‘FD website’), and even less in the way of search-friendly text. Please Lewis, read up on accessibility and search optimisation. This page is a good starting point.

Is the best role model we can find?

Meet Lewis Bankes-Hughes. Lewis is a 14 year old graphic and website designer, who runs a company called Fluffy Duster and is reportedly the youngest member of the UK’s national Federation of Small Businesses. He appeared on stage at the FSB’s annual conference, held in Belfast last week.

The Fluffy Duster website consists almost entirely of GIF files, with the centrepiece of the homepage being an animated GIF weighing in at a whopping 244k. There is virtually no ‘proper’ text on the page, and there are no ALT tags whatsoever. Punctuation is sparse, and the copy clearly hasn’t been properly proof-read. (‘Click the like above’?) What a great example in terms of search optimisation; what a great example in terms of accessibility. It’s like the last ten years never happened, and it’s certainly the single worst example of web design I have seen in a very long time indeed.

I have no desire to pick on a 14 year old kid. Good on him for showing a bit of entrepreneurial spark. But when money is involved, there isn’t much room for sentimentality. It’s frankly a bit of an insult to the industry to be presenting someone as a ‘role model’, when they clearly have a heck of a lot to learn.

Microformats: get in early

If you haven’t heard of microformats yet, don’t worry. Initially I couldn’t get my head around the concept, but they’re a brilliantly simple idea which could have significant benefits in time. And there’s absolutely no reason why you shouldn’t embrace them immediately, if you’re doing or commissioning any coding. Let me explain.

Modern webpage coding is based on CSS stylesheets and ‘classes’ in the HTML code. Classes are defined in a shared stylesheet file, and the HTML refers to the classes, rather than any specific formatting. So for example, you might have a class ‘subheading’, which is defined in the stylesheet as ‘big red and bold’. If you decide one day that red isn’t your thing any more, you change it to ‘blue’ in the stylesheet, and every subheading on the website now appears in blue. Fabulous.

Usually, designers make up the class names off the tops of their heads. With microformats, the idea is to use a standard set of class names for common things. So for example, the microformat ‘hCard’ is a way to mark up contact information. Following the standard, you use the class name ‘tel’ to identify a phone number, or ‘email’ to identify an email address. (This online hCard creator is a great ‘worked example’ for those with some HTML knowledge.)

The plan is that software will be told to look for these standard class names, and will be able to recognise (for example) when a web page includes someone’s contact details. You will then be able to offer one-click exporting from the web page to your Outlook contacts. I’m consciously using the future tense here because, although Microsoft and Yahoo are doing some things with microformats, and although there are a couple of Firefox extensions which proves the concept, we’re still a long way away from the mainstream.

So why care now? Because, quite simply, it doesn’t cost you anything to start using the conventions now. So what if nobody spots that it’s a microformat? You will almost certainly be marking up your code using classes (er, won’t you?), so you might as well use these particular class names. It will cost you precisely zero, has absolutely no technical implications, and might pay off in the long run. And then how smug will you feel?

I expect the microformats for ‘business cards‘ (also extended into a full CV microformat) and event calendars to be the ones most likely to take off, but there are quite a few others. If you fancy trying them out, the Tails extension for Firefox is less obtrusive, but Operator is maybe a bit slicker.

The awesome power of Prototype and Scriptaculous

For the first time in ages, I’ve got a bit of time to play with some of the new technical toys out there on the internet. And today, I finally ventured into the world of Prototype and Scriptaculous. This stuff really is blow-you-away fantastic. Interactive effects like we never would have dreamt of, back in the old days, and shockingly simple to implement if you know what you’re doing.

I’ve used it to make an important improvement to the MP Map I produced earlier in the week. People complained that they missed the region selection buttons. Well, there’s no missing them now. They now sit in a window which hovers over the main map. If you want to move them from their starting position, just click and drag. If you don’t want the menu taking up any of your valuable monitor space, just close it up.

Another IE7 version, another nervous moment

There’s a new version of Internet Explorer version 7 out… and significantly, it’s now being called a ‘release candidate’ rather than a ‘beta version’. Writing on the IE team blog, product manager Dean Hachamovitch says: ‘You may not notice many visible changes from the Beta 3 release; all we did was listen to your feedback, fix bugs that you reported, and make final adjustments to our CSS support.’

Working with the frequent releases of IE7 beta versions has been a double-edged sword. On one hand, it’s good to have a sight of where the product is going. But on the other, it’s always a nervous moment when you open your page designs in the latest beta/RC version.

There’s no hiding from the fact that IE7 will be the planet’s dominant browser, within a few weeks of its final release, scheduled for the end of the year. Users won’t get a choice, as it will be forced upon them. So the only sensible thing to do is to be as prepared as possible… and that means testing against whatever the latest IE7 version is.

Dean’s statement that the adjustments to CSS support are ‘final’ at least implies that things won’t change dramatically between now and release. (There’s also a quote from a Microsoft spokesperson saying ‘That would be our hope, that this is the last (release candidate) before we release.‘) Hopefully that means we can stop worrying about a potential CSS crisis on our lovingly crafted page designs. But it will still be a nervous moment, the day I download the final version for the first time…