Latest posts

My brother Rory Gullan is pretty handy with a camera. To tie in with his first exhibition I built him a website to showcase some of his photographs.

Of course, I needed to give him a photo gallery. I first considered using Gallery2, which I implemented for Oscar Whicheloe’s site, but ended up building something a bit more individual. While this approach means more manual work for making changes (which wouldn’t have been appropriate for Oscar’s site), I minimised this in a few key ways:

1. The image for the overlay is determined by checking the value of the image “src” attribute rather than needing to manually pass it through to the javascript.
2. The alt text for each of the thumbnails is read by the javascript and used for the little description box.
3. I used jQuery. The point is more that I used a javascript library than which one I used - but jQuery certainly worked well!

When creating my news ticker plugin, I came across a slight complication when using setTimeout() to calling a function which needed parameters passed to it.

Not having had much call to use setTimeout in the past, I simply put:

setTimeout(myFunction(parameter),myTimeout);

but that doesn’t work. An apparent solution (until tried in Internet Explorer) is:

setTimeout(myFunction,myTimeout,parameter);

It wasn’t as easy as I expected to find out how to get around this, but it turns out that all is needed is a “closure”:

setTimeout(function(){myFunction(parameter)},myTimeout);

Wanting to create a news ticker along the lines of that used on the BBC news site, I took a look around for a handy plugin to do it, but with no success. So… I created my own, as a jQuery plugin.

A quick sample of how to use it follows, or you can see the news ticker in action. Continue reading BBC style news ticker

I’ve been having a lot of fun with jQuery recently. One of the things particularly easy to do with it is write nice and unobtrusive javascript (a good start when looking at progressive enhancement). This is largely down to the fact that it’s very easy to find particular elements within the DOM - with any level of specificity - and attach behaviour to them.

On the site I’ve been building at work, one particular example was to get jQuery to write in the “Print page” link, since that needs javascript.

// add print page link - since it can only work for JS, only add it for JS users
$('<li></li>') // create list item
    .addClass('print') //add relevant class to it
    .append('<a href="javascript:window.print();">Print this page</a>') //put in the link
    .insertBefore('li a.foo'); //add before the li item with link of class 'foo'

The above example is slightly more verbose than it need be, but it illustrates some of the different built-in functionalities of jQuery quite well.
Continue reading Progressive enhancement with jQuery

Writing for the web is very different from writing for print. Key reasons for this are:

• Users scan web pages rather than reading every word.
• Users typically won’t give a web page their full attention. For example, they may also be listening to music and using instant messaging.
• Web pages are interactive.

The six elementary rules

George Orwell’s rules (”Politics and the English Language”, 1946) are just as relevant today for the web.

1. Never use a metaphor, simile or other figure of speech which you are used to seeing in print. [The point here is not "print vs. web" but "avoid ones which are used all the time".]
2. Never use a long word where a short one will do.
3. If it is possible to cut out a word, always cut it out.
4. Never use the passive where you can use the active.
5. Never use a foreign phrase, a scientific word or a jargon word if you can think of an everyday English equivalent.
6. Break any of these rules sooner than say anything outright barbarous.

Continue reading Web writing guidelines

Here’s a strange one I came across the other day. I’m posting this in the hope that I’ll save someone out there some time in the future.

I was applying a fade-out effect to a news ticker, and all was going well (thank you Yahoo! User Interface library!) until I was ready to test in Internet Explorer. Unfortunately, as soon as the second news item was displayed, the text suddenly gained a strange border effect (perhaps a glow or halo effect might also describe it - but it isn’t pretty).
Continue reading Problems with opacity in Internet Explorer

Last Thursday I went up to Edinburgh for the first Highland Fling conference, on progressive enhancement.

Firstly, a big thanks to Alan White for organising the conference, and of course to all the speakers.

Jeremy Keith kicked us off with an overview of progressive enhancement, paving the way for Mark Norman Francis to tie in graded browser support, as used by Yahoo!

Andy Budd brought CSS3 into the mix, talking about the “Future of CSS”, encouraging us to start making use of the parts which some browsers (essentially the major players other than Internet Explorer) already support; doing this will hopefully help to push the next CSS recommendation through, possibly in an intermediate step.

Drew McLellan delved into the possibilities of using microformats to throw in an API for our sites.

After a break for basking in the Edinburgh sunshine and eating lunch, Christian Heilmann took us through some principles of using Javascript and Ajax in the context of progressive enhancement, giving some great examples. James Edwards was hot on his heels with some warnings from the accessibility perspective - for example, the fact that screen readers partially support javascript means that our checks will detect the support and enable the functionality, but unfortunately they can’t handle a lot of the things which javascript can do.

Last but (as the old saying goes) by no means least, was Andy Clarke, encouraging us with ways to take things forward. A sneak preview of the new design for his website revealed his intention of using some of the CSS3 techniques to enhance the presentation in browsers which support them.

After a bit of Q&A, we piled off to the bar for a whisky or three. Photos to come…

This one’s pretty simple actually, so there’s not much to say about good practice with link text. However, I do keep seeing it being done wrong, so here’s an outline of the key things to consider.

The first thing to remember is that the link text should “identify the target of each link”. In other words, don’t use text like “click here”. Apart from the implication that the user must use a mouse, imagine what a screen reader user would have read out to them on tabbing from link to link and having the link text of each one read out!

Continue reading Link text

Here’s part one of three in follow-up to the Oxford Geek Night, to elaborate on the points I made about image alt text.

A quick recap (or introduction, if you weren’t there or haven’t seen my slides!):

An image’s alt text is presented to a user if their “user agent’ (the thing they’re using to browse web pages) does not display the image. e.g.

• A text browser is being used
• The user is blind and a screen reader reads out the web pages

Inclusion of the alt attribute on image (”<img>”) tags is required by the W3C specification.

Continue reading Image alt text

Two nights ago was the first Oxford Geek Night. This was basically a chance for web developers and designers to get together in a mixed business and social context.

I did one of the “microslots” - a five minute talk on “Avoiding accessibility pitfalls”. This is of course a huge area, and one I’d happily talk for hours about, so I focussed on three areas in which I keep seeing people trip up:

1. Giving appropriate alt text
2. Correct use of link text
3. Using markup correctly

I’ll be elaborating on each of these areas in my next few posts; in the meantime, you can download my slides as a pdf.