Apart from the BBC internet blog and backstage etc. @media 2008 had the fortune of hearing a whistle-stop tour of the redevelopment of the BBC homepage. This site has haunted many web designers since it’s launch with comments from colleagues of “Why can’t we do… {insert name of feature here}… like the BBC homepage?”. It became a shining example of what can be achieved.

Tom Cartwright and Claire Roberts presented their short piece on the development of a site that: took them three months to build; had to cater for 6 million users per month; couldn’t contain loops in the code; couldn’t process XML; had to be accessible; where 5% of users (that’s 300,000) didn’t use Javascript. This is web development at the sharp end.

A point of interest is that they managed to get 60 image requests down to just 3 using sprites. This had the affect of reducing the number of HTTP requests, a big saving on a highly trafficked site.

The size of this project is reflected in the fact that the development team recognised a need to drop JQuery as a Javascript framework and develop their own. Tom described Glow (www.bbc.co.uk/glow), a new framework that supports Safari 1.3 (apparently unlike JQuery). We were told that Glow would be available as open source software towards the end of the year, but judging by the password it looks like this still hasn’t been finalised. They also mentioned that their next project will look towards a pan-BBC identity system for users. The idea is that they’d have implicit and explicit personalisation and that, once logged into one BBC site, your credentials would follow as you traverse the sites. In support of this the BBC joined the OpenID federation, looking at becoming a consumer.

For insights into the future of the BBC homepage see www.bbc.co.uk/home/beta/. They recommended Steve Souders’ High Performance Web Sites (he really knows optimisation).

• If it didn’t make sense the title is a reference to a quote from Harold Wilson, it seemed fitting given Opera’s move against Microsoft. Something that’s provoked a passionate reaction from the likes of Eric Meyer and Andy Clarke, both very aware of the ramifications this is already having on the politics of the web community. Update 17 December 2007: Yesterday Andy posted a follow-up to his suggestion to reform the CSS Working Group, I think due to the incisive response he received. Molly Holzschlag comments and I think she’s in a good position to do so.
• Speaking of politics, this week the BBC Internet Blog posted an article by Jonathan Drori about the difficulties attached to implementing CMS technology across the corporation. He even mentions “fiefdoms” which I think many web managers across the public sector will identify with.
• Totally unrelated and on a happier note, Phil pointed out that the Beta version of Google Maps Mobile can now locate a mobile phone “with or without GPS”. Shame it’s (strangely) not supported on my phone.
• And finally, back in October I watched a presentation over at Mac Learning about the new accessibility features in Mac Leopard. With the recently released answers to questions posted during the session, I was pleased to find my question was included. I asked whether element navigation (what’s this?) is available in browsers other than Safari 3. Unfortunately (and I suppose unsurprisingly) the answer is no. However, I guess the fact that Safari 3 now implements long overdue features such as tabs may be some consolation for this.

What is element navigation? It may not be clear what feature I’m talking about so read on for a brief description. In Leopard using Apple VoiceOver and Safari 3, the user can jump through the page to elements of the same type e.g. all the Headings by type (H1, H2 etc), or links (both picture and text links). I suppose this is useful, I’ve been aware that this has been implemented in other screen readers for some time. Note: Apparently VoiceOver is not a screen reader in that it does not read the screen, it responds to direct programme output. Very clever, *smiles*.

Having recently looked at accessibility in Mac OS 10.5 (Leopard) I started playing around with VoiceOver. It’s also included in OS 10.4, which is what I’m using. Having mostly used Windows (90% of the time) over the last few years, testing with a screen reader always seemed beyond my reach given the price. Also, I’d managed to pick up the advice that there’s no point, simply because as I’m sighted, the methods I’d use to interact with a computer would be different to those people using this interface out of necessity. So my previous experience in this area is limited.

Working on a site recently, I decided to get VoiceOver to read it back to me. All seemed fine until it read the phone number. Changed slightly for this example, the number ’07000 121 022′ was read back to me as “seven thousand, one hundred twenty one, twenty two”. Notice how it misses off the first zeros on the ’07000′ and ’022′ sections of the number. Had I not included the spaces, the number ’07000121022′ would have read as “seven billion, one hundred twenty one thousand, twenty two”. So you see, still unintelligible to the listener.

I started to look on the net for a way around this problem. Nothing jumped out at me as a solution that worked. I then came up with the following idea:

0<span>7000</span> 1<span>2</span>1 0<span>2</span>2

In VoiceOver this reads “zero, seven thousand, one, two, one zero, two, two”. Notice I kept the ’7000′ as one number; to me “seven thousand” is more memorable than “seven zero zero zero”. This works with VoiceOver (so I’m assuming it also works with JAWS etc). One good thing about this solution is that, when spoken, it splits up the numbers without affecting the spacing for the visual user (it still looks like ’07000 121 022′). Also, only the spoken style is affected (even though I recognise it’s using otherwise unnecessary spans). If the number is copied and pasted, the content is not compromised as it doesn’t include any extra spaces.

Rik suggested I try aural CSS (media type ‘speech’). My research into aural CSS properties found that the property I’d need is already there – ‘speak-numeral: digits;’ – and given that I use microformats wherever possible, I could simply reference a ‘speech’ CSS file and attach this property to all tags that include the ‘.tel’ selector. But from what I’ve found, there doesn’t seem to be much support for aural CSS in the current crop of browsers.

Request for comments

I’ve written a test page that includes each of the formatted versions of the number.

I know JAWS has already produced this kind of functionality, but is this technique useful for other screen readers (and users on older versions of JAWS)? What about the new version of VoiceOver, has that changed its handling of such content? Has anyone got a screen reader that they could use to test this and critique the idea? Overall is the span method a valid or worthwhile technique? Is there any method available that’s more elegant?

So currently, one option is to use sIFR (for short pieces of text, e.g. headings). Not used it before? Download the sIFR release and get a good tutorial.

Combine all of these fantastic (free) resources with a bit of responsible web design and more interesting design will hopefully result.

If you’re still not convinced fonts are important, read “Web Design is 95% Typography” by Oliver Reichenstein (OK he doesn’t explicitly make the case for more fonts, but he does assert the importance of typography).

Beyond Ajax

In his keynote presentation, Jesse James Garrett focussed on the importance of user experience and the idea that the top web products create the best end-to-end system designed from the ‘user perspective’, not the ‘programme perspective’. Sam Felder and Peter Merholz have both written articles that seem to be based on versions of this presentation (Jesse doesn’t seem to have posted any notes so far). BTW, I enjoyed the Steve Jobs quote.

The Broken World: Solving the Browser Problem Once and For All

Molly Holzschlag firstly announced that she will no longer be speaking at general web conferences, as she blogged a few days before. It’s a shame, I like her style, it was fortunate for me that I got the chance to meet her and have a chat about energy etc – a usual drunken topic of conversation for me ;) – with her in the pub that evening. Interesting points from her presentation included an analysis of the reasons why each web browser develops so differently, she described six implementation variables:

1. Development Approach – browsers have different life-cycles, non-linear iteration has been the best technique so far.
2. Working with Standards – CSS2.1 is being used in some browsers but it’s not a recommended standard yet. W3C specifications are ambiguous, especially a problem.
3. Operating Systems and Tools. (didn’t write anything for this!)
4. Extending Browsers – example is browser bugs fixed in IE6 through use of JavaScript.
5. Proprietary Development – Past examples are Netscape’s ‘Blink’ and Microsoft’s ‘Marque’ technologies. Initially both of these took precedence over implementing CSS support.
6. Fractioning Specifications – Conversation has moved from CSS back to HTML over the last year. There is no specific sensible end to creating an evolved HTML.

Pathways to success:

• Create common baselines. Consistency between browsers.
• Clarify ambiguity – her case studies described how the W3C standards state one thing, but browser developers implement behaviour very differently.
• Transparent development cycles.
• Keep an open dialogue – currently Apple is the only major browser developer that isn’t joining the discussion.

High-Noon Shoot-Out: Design vs. Implementation

Simon Collison describes his passionate contribution to @media07 better than I ever could. Drew McLellan also gave a rousing arguement. Joe Clark live blogged the whole event (and I *mean* event).

Interface Design Juggling

Dan’s presentation. I don’t think I can add much more, I didn’t write much for this one, I guess you had to be there :)

Microformats, Building Blocks and You

Having missed last years inspirational talk by Tantek (I know this because my friend Rik came back bubbling with enthusiasm) I had to see it this year. Here’s his presentation. Tantek has a tendency to write every point on his slides, so there’s not much sense in me explaining. A few useful microformat links are Operator for Firefox and pingerati.net. If you haven’t already checked out microformats (trust me they’re useful), do so first!

When Web Accessibility is Not Your Problem

The last presentation of the day. I’m going to leave this controversial (on the face of it) presentation to my next blog post, I suspect it needs a fair amount of explanation.