The WSG meetings have been on hiatus for some time, but it was nice to see they are back on a (hopefully) more regular basis.

Concepts of Findability
Cyril Doussin

How to make something findable?

• Make sure the item is easy to discover or locate
• Have well organised system of navigation and retrieval

Hand-guided navigation can be helped with the aid of sensible sorting/ordering (eg of menus, alphabetical lists etc), and clear sign-posting.

Relevance

• Precision: how well a system retrieves only relevant documents
• Recall: how well a system retrieves all relevant documents

These two can be defined in the following way:

Precision = no. relevant & retrieved / total no. retrieved
Recall = no. relevant & retrieved / total no. relevant

Content Organisation

• Taxonomy: organisation through labelling
• Ontology: taxonomy + inference rules
• Folksonomy: adds a social dimension

These will become increasingly important as the volume of information grows/is shared. Decent content organisation can be a very good basis for search engines.

Building Websites with Findability in mind
Stuart Colville

The search engine share in the US is apparently: 62% – Google, 18% – Yahoo, 10% – MSN/Windows Live and the rest are minor players. So obviously, search engine algorithms mean than you need as much content in your markup and as little fluff as possible. This means using unobtrusive JavaScript, for instance:

<ul>
<li><a href=””javascript:showPopup(’blueberry_muffins.html’);””>Blueberry Muffins</a></li>
<li><a onclick=”showPopup(’toffee_muffins.html’);” href=””#””>Toffee Muffins</a></li>
<li><a onclick=””showPopup(this.href);” href=””chocolate_muffins.html””> Chocolate Muffins </a></li>
</ul>

are all bad ways of doing it…

Instead, use non-bloated (and therefore search-engine relevent markup like this:

<ul id=”links”>
<li><a href=”blueberry_muffins.html”>Blueberry Muffins</a></li>
<li><a href=”toffee_muffins.html”>Toffee Muffins</a></li>
<li><a href=”chocolate_muffins.html”> Chocolate Muffins</a></li>
</ul>

along with this function:

function showPopup(url) {
window.open(url,”Poptastic”,”width=300,height=300″);
}
window.onload = function() {
document.getElementById(‘links’).onclick = function(e) {
if (e.target && e.target.nodeName.toLowerCase() == ‘a’) {
showPopup(e.target.href);
}
return false;
}
}

[Sorry about the crappy formatting of the code block, WP doesn't let me do it any better for the moment]

Stuart also highlighted the importance (to search/findability) of URI permanence:

A Cool URI is one which does not change – Tim Berners Lee

Finding yourself with Fire Eagle
Steve Marshall

Steve gave us a run through of some of the cool stuff you can do with Fire Eagle, including how the system authenticates with other services and users. Fire Eagle is currently in closed Beta, but you can request an invite.

The first event I’d like to make a post about was the excellent -

Web Standards Group Meeting on Javascript

Some of us shy away from JavaScript (until recently, myself included) on the grounds that it’s not accessible. But these days, if it’s done right, it can be positively beneficial to accessibility.

Demystifying Screen Readers – Steve Faulkner
Steve is very knowledgable on screen readers and all their foibles, and is Director of the Web Accessibility Tools Consortium. This talk mainly centred around Jaws (65%) and Window Eyes (35%). The bracketed figures are from a US National Federation of the Blind market share survey – it’s obvious these are the two big players.

The key issues revolve around:

• Dynamic updates – user initiated and independent
  Can the user access the updated content?
  Is the user aware that the content has been updated?
• Rich Internet Applications (RIA)
  Can the user understand the role of the control?
  Can the user successfully interact with the control?
  Is the user able to access information about the current state of the control?

He then explained the differences in screen reader modes:

• Browse Mode (virtual buffer) – the user can navigate page content via paragraphs, headings, links, lists etc. They can also activate links and some form controls. But text characters can’t be input into form fields, or interact with select elements in this mode.
• Forms Mode (browse mode off) – the user may only navigate through a document to focusable elements via the TAB key. Text access is limited to “read all” functionality. Most of advanced content navigation is unavailable.

The crucial question we have to consider is, when and how does content become available to the user after it’s been updated in the browser?

[Steve Faulkner and the Latency Issue]

Latency is a problem because the virtual buffer does not update and the user doesn’t know anything has changed. However, JAWS v7.1 started “listening” for virtual buffer updates in response to things like:

• window.setInverval()
• object.innerText (for IE)
• object.textContent and object.appendChild (in Firefox)
• changes in form control values
• And other stuff like ALT or TITLE attribute value changes.

Jez Lemon has an excellent article on Improving Ajax Applications For JAWS Users on his webiste. Steve summed up with some recommendations:

• Do not code to accommodate the poor support shown by JAWS and Window Eyes.
• Use unobtrusive methods where available and appropriate, to help screen readers along.
• Don’t use the excuse that JavaScript / Ajax is not accessible for screen readers to not bother to design for accessibility.
• Start developing interface elements that use WAI-ARIA specs, which will provide some benefits now and many more in the future.

Steve’s thought-provoking presentation was followed by a turn from Christian Heilmann entitled Seven Reasons For Code Bloat

[Christain's been on the beanz again]

His notes are available for download from his blog, so I won’t repeat them verbatim. Needless to say, it was a fun presentation and contained the obligatory photo of a kitten . Meanwhile, he’s thinking of this as the title of his next book:

[Christian's Next Book?]

PubStandards XVIII
Of course, the next item on the social agenda was the PubStandards gathering. Lots of fun and revelry as usual, here’s one photo, but you can see more on Flickr.

[Patrick & Ashe go head-to-head, while Ross butts in the middle]

We had three very different talks, each highly informative and enjoyable.

Niqui Merret on Accessbile Flash
Niqui started out by saying that Flash and accessibility don’t have to be mutually exclusive, as many people presume. However, in the real world:

No single technology can be 100% accessible to all users. Aim to achieve the most accessible solution possible.

It’s up to developers, programmers and copywriters to make sure their contributions are as accessible as possible. It’s also up to the software vendors (eg of screen readers) to try and implement the standards properly and as quickly as possible. She also mentioned FlashAid (talks to screen reader and turns off the Javascript/Ajax so browser sees alternative accessible content) and SWFFix (a tool for progressive enhancement) as useful resources for Flash developers.

She talked a bit about the Accessibility panel in the Flash authoring environment, which allows developers to set things like Tab order and ALT text. And she demonstrated a fun little game in Flash, which was fully accessible without mouse and to screenreaders:

[Niqui demonstrates her accessible Flash game]

Ann McMeekin on Accessibility – What Not To Do
Ann is a Web Accessibility Consultant for the RNIB, and clearly knew her subject inside out.

She made many excellent points, but some of the most salient were:

• Don’t assume all users with disabilities are the same
• Don’t ignore users who come to you with a problem
• Don’t forget to set your page’s default colours – background and foreground (if not, changing Windows default colour scheme could have a dramatic effect)
• Don’t waffle – be clear and concise, don’t repeat yourself
• Just because you can add a title attribute to almost anything, doesn’t mean you should – it’s largely redundant if your link text is descriptive enough
• Don’t be shy – show skiplinks, and use :focus and :active as well as :hover
• Put instructions before forms – otherwise someone who has zoomed the page (magnified) doesn’t have a hope in hell of seeing what the labels are

One of the most surprising things was to learn that most screen readers will read out the legend to an accompanying fieldset before every label in the fieldset – so it’s important to keep legends short and concise, and so they will make sense when read with the form field label.

[right, Ann in full flow]

Two final thoughts from Ann:

• Don’t jump on the bandwagon and implement the latest cool widget without knowing what impact this might have on your users
• Accessibility doesn’t mean you can’t be creative

Mike Davies on Web Accessibility – The Developer’s Tale
Mike’s talk was a case study of the re-design of Legal & General’s website services and applications, which he had been heavily involved with before his move to Yahoo! in the summer of 2006.

Four years ago, before the project started, L&G’s website was ranked 92nd in a FTSE100 survey of websites; it ranked badly with search engines, had at least 150 links on every page and was horribly inaccessible. Through the vision of the website manager, the site was completely redesigned with accessibility at the heart of the thinking.

They reaped the benefits very quickly:

• 40% increase in website traffic
• doubled conversion rates (that is, number of people completing an online application for insurance etc, versus those who start the process)
• doubled online revenue
• cut maintenance costs by two thirds
• increased natural search-engine traffic by 50%
• paid for itself in five months

[conversion rates for Home Insurance - lilac = old site, burgundy = new site. The first two bars are the numbers starting the process, middle represents those finishing a quote and last pair are numbers of completed applications]

And the website is now held up as a highly-regarded example of how to do things properly – it is a PAS 78 and AccessibilityNet case study, has accreditation from the Shaw Trust, and is cited in books on accessibility.

Thanks again to Stuart for organising an excellent event. I look forward to the next one.

• Jeremy Keith and Brian Suda in the Microformats corner
• Tom Hughes-Croucher, Tom Morris and Ian Forrester in the RDF corner.

Thankfully, for those who didn’t see the debate, Ian has uploaded a video of the session. It makes interesting viewing! And shortly afterwards, I found Ben Ward’s insightful post about the whole subject too. I think Ben’s second paragraph hits the nail on the head:

The thing about RDF is that no-one has yet demonstrated any real-world reason to care about it. It fascinates academics who would love — just for the sake of it — to model the entire universe in triples but in the real world of web browsers the value has never really been promoted.

Spot on.

The Microformats advocates have been very quick to explain what they are for, what they do, and how to implement them. I use them regularly in this blog, and try to incorporate them wherever I can into new projects. It’s so easy to build them in from scratch when marking up events (hCalendar), people (XFN) or contact details (hCard).

But as yet, I’m really stumped as to what RDF – or more importantly, eRDF can do for me. Tom Morris has started a website called GetSemantic which hopes to chart the progress of developments about eRDF and spread the word. I’ll be keeping an eye on it from time to time, to see what’s cooking, but until then, I’ll be sticking to my diet of Microformats.

I’ve gone for a non web-related topic as I figure I’ll be teaching many of the attendees how to suck eggs if I talk about web standards or css. Others have said that some of the most interesting topics last time round were those which were a bit off the beaten track. So here’s hoping it will go down well.

Geek/Girlgeek Dinners
I notice there are a couple of geeky dinners coming up soon. They seem to have shot themselves in the foot slightly in that they’re both on the same day! So, clone yourself or toss a coin to decided which of the following you’d rather attend on 21st February:

• London Girl Geek Dinner 10 Sponsored by Amazon!
  The speaker for the evening is Jeff Barr from Amazon and he will be speaking on web services.
• Geekdinner with Tara Hunt & Chris Messina of Citizen Agency
  Both Tara and Chris are best described as Upstanding Citizens of the Internet world. They are well known for looking at the longer term view and talk with words like vision, attention to detail, community, sustainable, open, higher purpose, etc.

Unfortunately, I’m unable to attend either event as I’m already busy, but I will be keen to read any blogs about them afterwards. Please let me know if you write a review.

WSG London #3 – Accessibility
Stuart has put together another great programme for the forthcoming WSG meeting on 28th February. Now that’s one I will be able to attend, and am looking forward to what Anne McMeekin, Niqui Merret and Mike Davies have to say on the subject.

The Ghost of Microformats Past – Mark Norman Francis Esq of Ye Olde Yahoo! Corp. Norman gave us an overview of what Microformats are for, and why they have evolved:

• They should be there for humans first and machines second
• They are a way of encoding data
• Start simply, and re-use building blocks from other standards
• They are modular and embeddable
• And most importantly, they should attach extra (explicit) meaning to (implicit) content.

One of the first Microformats to evolve was the XFN standard in 2003. In its simplest form, this adds the “rel” tag to an anchor link (for a person’s blog, say), where you can specify your relationship to them. See my other post on XFN for more info.

In 2004, the Creative Commons Licences took off, and the rel=”licence” tag was added to the Microformats arsenal, eg: Creative Commons, <a href=”http://creativecommons.org/licenses/by-nc-sa/2.5/” rel=”licence”>some rights reserved</a>

A lot of sites have invisible meta data hidden in their pages, but which might as well be invisible – visitors can’t see it, and content authors often forget to update it. Norm’s phrase was out of site/sight, out of mind. If a human can’t see it, the metadata might as well not be there.

He briefly discussed why using XML namespaces was considered harmful. They are not well supported, even in modern browsers, and are antisocial (giving rise to the namespaces Tower of Babel).

But on 20th June 2005, http://microformats.org was unleashed on the web community. In 15 months, there has been a huge adoption of them, basically because they are simple, sensible and extensible. Most popular have been the hCard and hCal formats, along with the rel-licence, rel-tag and afforementioned XFN.

Out in the wild, heavyweights such as WordPress, Yahoo!, Google, Technorati have adopted microformats. With a very small tweak to one of their PHP templates, Yahoo Local have suddenly made 15m new hCards available on the web!

Next up was The Ghost of Microformats Present, Mr Jeremy Keith of Clearleft

Jeremy started out by reminding us that the (X)HTML specs do not have specific tags for semantic items such as contact details, relationships, events or reviews, and with the addition of a little bit of extra markup (mainly attributes to existing elements), we can explicitly specify these things in existing markup.

• Elemental Microformats
  • the rel attribute:
    <link href=”mystyle.css” rel=”stylesheet” type=”text/css” />
    In this case, the rel atribute defines the relationship of the linked resource to the current document (something that had never really occurred to me until the blindingly obvious was pointed out!) Similarly, <a rel=”help” href=”help.html”>Help page</a> might explicitly define a help document for the page containing the link.
    <a rel=”tag” href=”http://en.wikipedia.org/Microformats”>Microformats </a> tells us that the link is also a tag.
    He also mentioned rel-licence and XFN as above.
  • the rev attribute:
    Less well known and trickier to get your hear round, the rev attribute defines the reverse relationship to “rel”. So in the above example, on the help.html page, you might find a link thus: <a rev=”help” href=”checkout.html”>the checkout page</a> which would say, the current page is the help resource for the checkout page.
  • the vote-for/against attribute:
    You might include a link to someone else’s blog, which expresses an opion (be it negative or positive) which you agree with. Then use:
    <a rel=”vote-for” href=”review.html”>a damning critique</a>. The rel=”vote-against” is of course, the opposite (you disagree with the opinion, whether it is positive or negative)
• Compound Microformats
  These add more than one attribute – usually classes – to elements. We mustn’t forget that classes are for general purpose processing by user agents – NOT just for CSS – and should add extra semantic meaning to a document. He cited the hCard example for contact details on a blog:

  <address class=”vcard”>
  <a href=”http://joebloggs.com/blog” class=”url org”>
  Joe’s Blog</a> is the online home of
  <a href=”mailto:me@jobloggs.com” class=”email
  fn”>Joe Bloggs</a>, a <span class=”title”>web
  developer</span> living and working in <span class=”adr”>
  <span class=”locality”>London</span>,
  <span class=”country-name”>England</span>
  </span>.
  </address>

Other things we need to consider are tools for creating and viewing Microformats. The hCard-O-Matic will give you a head start on writing an hCard for contact details, as will the hCal-O-Matic for events. Brian Suda’s Microformat Cheat Sheet should also be a must if you’re needing a quick reference guide.

On the discovery end of things, the Tails extension for Firefox is great for finding microformats on a page. For those folks not running Firefox, John Hicks has written a client-side stylesheet to highlight microformats, and he’s updated it already. Tantek’s microformats favelets let you copy hCard or hCal information into your address book or calendar. And Technorati have started to index microformats too!

Jeremy has kindly put his slides together as a PDF – but they’re never as much fun as seeing them delivered “live”

Finally, a taste of things to come? The Ghost of Microformats Future, aka Drew McLellan ,
also of Yahoo! Europe, and a member of WaSP

Drew immediately got everyone’s attention by asking, could using Microformats on your current site effectively replace your API? He demonstrated numerous instances where complex calls to APIs could be supplanted with the relevent microformat codes in the page, and pretty much showed us what they could become given enough widespread adoption. You cane see Drew’s slides online, as I didn’t have time to scribble all the fiddly bits of code he demonstrated.

One site which has no API but is littered with useful microformats is corkd.com. You can extract contact info or reviews at will, if you have the right plugin widgets.

Drew also drew our attention to some useful tools:

Brian Suda’s X2V transformer – takes XHTML hCal/hCard and munches them into vCard/iCalendar files. Then there’s Drew’s new tools.microformatic.com site.

Questions and answers were welcomed by our Three Musketeers. Yahoo! memory sticks were given out as goodies to anyone who asked a question. One interesting question that stuck in my mind was asking if there were any microformats for mobile? Jeremy quipped that they are smaller than that, and there’s more information on picoformats at the microformats wiki.

A very long post; wrapping up I’ll say we all enjoyed a beer with the other geeks in the pub afterwards! Thanks to Stuart for organising the meet. He’s already put up the podcast feed from the event. I’m looking forward to the next one, whenever that comes round.

Emerging from my exile, I’m blinking in the bright light of day and trying to catch up with a bit of blog reading, writing and other pc-related stuff.

Olly Hodgson has some excellent links, which I’ve been following up, and then generally getting lost in the blogsphere. I’m also waiting with baited breath to see how The CSS Div almost got himself killed…

Here’s a few good posts about accessibility issues:

• Bruce Lawson talks about making accessible PDFs
• Punkchip gets to grips with relative & absolute units and makes some excellent suggestions about Accessible Radio Buttons and Checkboxes
• A List Apart gives us What Is Web Accessibility? and Working with Others: Accessibility and User Research
• And Rob Cherny has an interesting post entitled Ajax and Accessibility: You’re Doing it Wrong (Hijax)

As an antidote to my recent exile, I’m also being very sociable this week, with the upcoming events in London to attend – WSG London #2 – Microformats and the London Geek Dinner with Molly H. Will report back on them later in the week.

Thursday 19th October
Web Standards Group Meeting # 2 where Microformats will be discussed. See Muffinresearch.co.uk for more details.

Friday 20th October
London Geek Dinner, special guest Molly E. Holzschlag. See the Geek Dinner website for more details.

Both events look like a good evening; perhaps I’ll see some of you there.

Christian was very animated and went quite quickly, and since JavaScript is not really my forte, unfortunately I found it was easier to just listen than trying to scribble notes as well. His slides are available via his blog. But I was able to take notes during Andy’s talk, a precis of which appears below.

Who Cares About Web Standards?
This was the rather controversial opening salvo from Andy! He began by giving us a brief history of standards – not just web, but standards in general. From one of the earliest in 1120 when King Henry I defined the L unit of measure (the length of his arm!) through the inventions of the wooden screw by the Romans, and the subsequent standardisation of screws and other machined parts by Sir Joseph Whitworth in 1841, when the Industrial Revolution was in full flow.

Whitworth was in charge of Babbage’s Works where the first mechanical computer, the Difference Engine, was made. By 1860, Whitworth’s screws had become the de faco standard, certainly in the UK. Meanwhile in the US, William Sellers proposed a different standard (sounds familiar?!) to help build the railroads. This was all fine until towards the end of the second World War, when the US was supplying England with a lot of spares for machinery and the war effort – and they were having to make two version of everything. Eventually the UK capitulated and the US standard became the very first official standard for anything. Now there are over 800,000.

Why bother?
When implemented, standards should:

• Ease communications and inter-operability. Buy a new DVD player and plug it into your TV and it should work.
• Make life easier. You can buy a toaster safe in the knowledge that its plug will fit the sockets in your walls.
• Be a measure of quality, or level of expertise, a mark of professionalism.
• Ensure safety and durability.

There are different types of “standard” – Official, de facto, (non regulated but ubiquitous), open, proprietory. When standards work well, you tend not to think about them.

What’s this got to do with the web?
During the Browser Wars, the languages such as HTML and CSS were produced and expanded by the browser manufacturers. By pushing their own “standards” they set out to monopolise. When the W3C came together and put together language recommendations (they are still not standards!), and developers put pressure on the browser manufacturers to support them coherently. All modern browsers support the W3C recommendations – some just do it better than others! The term “web standards” was coined by Jeffrey Zeldman and the WaSP project.

The Philosophy Behind “Web Standards”
The aim is to separate content from presentation and behaviour, using (X)HTML, CSS and JavaScript in the appropriate fashion to produce quality code and semantically correct documents.

Benefits

• Communication – easier to hand over to other developers (or come back to yourself in six months’ time)
• Inter-operability – more accessible, forwards-compatible, multiple device support for phones, PDAs, text readers, microformats etc
• Make life easier – code can be more easily maintained
• Safety & durability – code less likely to “break” and should last longer
• Guarantees a level of expertise – proves you are resonably proficient as a developer and should help eradicate the FrontPage Cowboys
• Mark of professionalism – you will stand out from the crowd

Things Aren’t Perfect
Standards-complient pages not necessarily load up faster – the number of packet (file) requests can slow things up, so if you have 2 or 3 CSS files associated with a page, there can be a bigger “up front” hit on speed when a visitor first comes to your site, although subsequent pages may well be quicker to load. There is the benefit of less code bloat without all those <table> and <font> tags though.

Huge CSS files can be very difficult to maintain, especially when the full consequences of the cascade are taken into account. Presentation is still tied to content (to a much lesser extent) as the CSS/layout you choose is often influenced by the code order of the document itself. It’s much better than it was.

Full CSS Layout is less than ideal at times. Floats are really a buggy hack, but it’s the best we’ve got. Browser implementations for things like <fieldset> and <legend> are still inconsistant (handles padding and margin differently). Advances in XHTML and CSS are beginning to stall. When is CSS3 due? XHTML isn’t great for marking up applications as opposed to static documents, or for microformats.

Are standards becoming irrelevent?
Almost reached a tipping point where “everyone” is doing it – so why should we keep going on about it? Development using the standards should be a no-brainer – why do it any other way? Besides, most clients don’t care as long as the job gets done, so just do it that way and don’t go overboard in advertising the fact. A couple of lines in your proposal documentation (to the effect that “we will use the appropriate web standards” is sufficient).

What now?
The focus needs to change more towards:

• Accessibility/Useability
• User Experience
• Design
• Branding
• Client and user goals

Andy’s slides can be downloaded from his website.

Geeky Prize Comeptition!
To tie in with Andy’s fixation with screws, here’s a little bit of fun…
Despite the US standard for screws taking off after WWII, you can still find a ¼-Whitworth screw/thread in common usage today. I will award a pack of 4 hand-made greeting cards of your choice to the first person who can tell me where.

Oh lord, I’ve just spotted myself in the audience shots which Christian uploaded to Flickr.