Separating Behavior From Presentation | July 26, 2004

Over the weekend I decided to make a few little enhancements to the comment form on this site. I tidied up the live preview and added a “Make It Bigger” button to resize the comment field.

I really like the idea of separating behaviour from presentation. On a very basic level the site should still work smoothly if you turn off Javascript, CSS or both of them. For instance, at the moment, If you turn off Javascript, the “Make It Bigger” button won’t display, neither will the live comment preview. However I feel this separation should happen in the code as well as for the benefit of the user.

While scripting this button I realised there were essentially two ways of doing it. I could either affect the style of the form element directly using the style property, or I could apply a class to the field. If I use Javascript to affect the styles directly, that would be mixing presentation into the behaviour layer. To return the form element to it’s initial size I’m setting it’s height to be 100px. If I choose to set the initial height to something different in the stylesheets I have to remember to also alter this in the Javascript.

To get round this I thought about setting a class instead of directly setting a style. That solves the problem of presentation being mixed in with the Javascript. However it presents another problem. Turn CSS off but keep Javascript on and, even though the “Make It Bigger” button gets displayed, It won’t actually do anything.

So it strikes me that, while it’s possible to create separation for the user, the act of setting styles using Javascript makes this separation impossible for the developer.

Defying Expectations. How Good Customer Service Can Turn a Negative Into a Positive | July 24, 2004

We’ve all experienced poor customer service before. Whether it’s seeking help from your hosting company or returning faulty goods, these situation rarely end positively. You get bounced around from person to person, end up being transferred to the wrong department or sit waiting for a return phone call that never happens. When you do finally talk to somebody they either treat you like a fool or assume the problem is your fault.

The level of poor customer service is so endemic that we actually expect it. We expect that when the TV breaks, we are going to have to spend weeks on the phone to trying to get it fixed.

Companies seem to spend inordinate amounts of time and effort getting your business, but very little effort when something goes wrong. However they really are missing an opportunity. It’s at crisis points where people need help the most and when they are at their most impressionable. Do a bad job and they’ll leave with a sour taste in their mouths, but do a good job and they will be loyal customers for years to come.

An excellent case in point is Apple Computers. I bought my girlfriend an iPod for Christmas, but after only a short while the remote started to wear out. A couple of days ago it finally broke so we contacted Apple to complain. Less than 36 hours later I was signing for a new remote and along with a new set of headphones.

This has to be the best service I think I’ve ever received. No back and forth phone calls or waiting weeks for somebody to email. Just fast, effective service. We went from being pissed off with Apple because the remote had broken to singing their praise, all because they didn’t muck us around.

Every time somebody interacts with your company you have an opportunity to impress them and reinforce your brand values. Generally it’s much cheaper to retain clients than it is to recruit new ones. That means it’s vitally important for companies to look after their existing customer base.

This will probably sound obvious but it’s something that I think many companies forget. The quicker and more efficiently you get something resolved, the cheaper it’s going to be for you. When I have a server problem I end up having to ring our hosts half a dozen times before I find somebody willing to help. Rather than spend 10 minutes solving the problem and leaving me thinking what a great service they give, I make 6, 5minute phone calls and leave thinking that we really must get round to switching hosts.

I’m sure this has something to do with Apples fast service. What’s the point of spending an hour having to deal with a broken $5 component. Just send out a new one. The customer’s happy and Apple have just saved themselves an hours which they can better spend coming up with cool new products (or dealing with iPod battery complaints).

A Red Flower | July 23, 2004

Heading for Trouble | July 20, 2004

There is an interesting discussion going on over at Jogin.com about the correct use of headlines. I’ve always seen headings as an indication of importance. If you look at this site you’ll see that the main headline for each post is a <h1> and any sub heads are <h2>’s. If you look at the side bar, all the headlines there are <h2>’s as well.

However Thomas points out that if you run such a site through the W3C validator with outline mode checked, you get an interesting result. Outline mode seems to be similar to documents outlines in Word which � if you’re lucky enough never to have used Word � provides you with a structural outline of your document. Looking at the outline of my homepage you’ll see that items in my side bar are being shown as structurally subordinate to the last post on my homepage. This obviously isn’t the case.

So it seems like headings are more to do with structure than importance. If you look at the specs they say

There are six levels of headings from H1 (the most important) to H6 (the least important).

Fair enough. This is probably why I, and many other web designers, have always seen heading levels being related to importance rather than structure. However you’d have thought that this being in the “structure” section of the specs would have been the first clue. The second clue for me is this line.

Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Thinking about it logically, the only way a user agent would be able to do this is if � like the validator outline display � the user agent used the heading levels to extract structural meaning from the document.

The thing is, you may not always want to display a main sidebar headline. This is another reason why people have chosen to use headlines to denote importance rather than structure. However following the whole “markup first, style later” philosophy, it would seem logical to create the correct page structure and then use CSS to hide any elements that you don’t want to visually display.

Beautiful Red Tulip | July 18, 2004

No Going Back | July 14, 2004

I bank with First Direct. They were one of the first "telephone only" banking services in the UK and were amongst the first to adopt internet banking.

I've been pretty happy with their online service despite the fact that - until recently - I've not been able to use Safari to access their site. The one annoying thing is that the banking screen is popped open in a window (sans toolbar) to prevent you from using your back button. If you do attempt to go back - using the keyboard for instance - you get the following message.

Your internet banking session has been closed.

This was because either:

the service remained unused and was timed out for security reasons, or

you attempted to page backwards

Thank you for using first direct internet banking.

Now the first dozen or so times this happened it really annoyed me. However like a dog that gets electrocuted every time it tries to eat a bone, I eventually learnt not to use my back button on the site. I do sometimes forget, but generally the conditioning has worked.

Now I've always thought not allowing people to use the back button was kind of odd. I've experienced it in other places as well - usually at the end of filling in a multi page form - and the reaction I have goes from the mild annance to extreme frustration. I was never sure if it was a failing of the site designers or if there was actually some deeper reason.

A friend contacted me today about an email he'd received from his online bank Smile, explaining that they were also planning to log people out if they tried to use the back button. Being a developer himself, he contacted them to ask why it was necessary, and this is the answer he got back.

A lot of investigation went into maintaining the functionality of the
buttons, however no acceptable, secure way was found to prevent this
behaviour without affecting the site's accessibility and compliance with web
standards. This is not likely to be changed.

Now I'm not really sure what these security issues are or how addressing them would have impacted on the sites accessibility or compliance with web tandards. If anybody could spread some light on this I'd be grateful as - at the moment - I'm just confused.

Accessible Odeon | July 12, 2004

I'm a regular patron of my local Odeon but am unable to use your website due to my choice of computer platform and browser (Mac OS X and Safari). Because of this I am unable to book tickets online, leading to a reduction in the number of times I visit your cinema. I contacted you well over a year ago about this accessibility problem and was told you were working on a solution. Unfortunately this solution has yet to be realised.

Being a web designer myself, I understand that it's not always easy to retrofit such a large website. However you do have a legal obligation under the disability discrimination act to make your online services accessible. Matthew has done an extremely good job of creating an accessible version of your site. Rather than threaten him with legal action, wouldn't it be better to work with him in order to comply with your own legal requirements and create a more user friendly customer expirience?

Flexible Home Photography Studio | July 12, 2004

I saw this cool little set-up featured in Computer Arts Magazine and was really impressed. From reading the website and magazine review it's clear that the focus is on product photography. However I think it would also make a really good home photography set-up for taking still life and macro pictures. Currently I'm forced to use natural sunlight (which seems in short supply this summer) and using bits of paper as reflectors and backdrops. I've seen articles in books and magazines on how to set-up your own shooting table but it needs to live somewhere perninatly. This little set-up folds away neatly which is great if you don't happen to have an extra room that you can use as your studio.

T[error]ist is a Plonker? | July 11, 2004

A while ago I mentioned that Brighton Council had taken to stencilling the words "is a plonker" next to local stencil graffiti work. Shortly afterwards I was wandering around town taking pics of stencil art and saw the following.

Web Design Companies | July 8, 2004

Accessibility, usability and web standards are starting to become more commonplace these days. I see quite a few individuals and micro businesses practising these techniques, yet the big web design companies seem slow to catch on. Which companies do you see leading the field in these disciplines and more importantly, which companies should but aren't?

Standards Compliant CMS's and Blogging Tools | July 7, 2004

Don’t get me wrong, I actually quite like MovableType. Unlike some, I’ve not been that bothered by the recent fuss over licensing. However I’ve really always wanted to use a a blogging tool written in PHP rather than perl. It’s not like I’ll ever actually get round to writing a plug-in, but at least with a PHP system I may have a chance at hacking something nasty together. With perl I’m just lots for the start.

I do admit that I get a little bored having to rebuild the whole site when I make a small change to a template. It gets even more frustrating when you’re making lots of changes. I can see why MT does this. By making the pages static it takes the strain off the server. Not such a big deal if you’re using MySQL, but I guess it would be very difficult to do using text files.

I’m also looking for a standards compliant cms that I can use on small client sites. I know that you can hack MT into shape, but I’d really like to find something that uses a page/section based architecture as well as the date/post model used by most blogs. I had a play with Drupal but didn’t find it that intuitive. Looked at a few others but none have really done anything for me.

Anyway I’ve been noticing quite a few people migrating away from MT of late, most notably towards Textpatttern or Wordpress. If you’re one of these switchers I’d be interested to know

Why you decided to move away from MT?

Which blogging tool/cms you chose and why?

What, if any, benefits have you noticed from making the move?

How easy was it to migrate your content, templates and site structure/functionality?

I guess it’s the last one that I’m most concerned with. No so much the content, because I think that’s quite easy. It’s more to do with being able to replicate the same site structure and functionality. I recently changed all the URL’s on this site and don’t want to have to do all that again. Too much hassle for me and disruption for you guys. Also I use quite a few MT plug-ins to do various things and want to make sure I can actually keep the site functionally similar.

Quick Accessibility Quiz - The Answers | July 5, 2004

Thanks to everybody who took part. In the end the quiz turned out to be much harder than I’d expected, with only a couple of people getting all the answers right. I threw in a load of trick questions which tripped quite a few of you up. Still it was worth it just to see the discussions it provoked, which was half of the purpose in the first place. So without further adieu here are the correct answers.

Q1. To get an A rating you need to

Answer d. None of the above.

You quite often see the main nav duplicated at the bottom of a page as regular text based anchors. While this is a nice accessibility/usability touch it’s not a requirement. Priority one does require you to “provide redundant text links for each active region of a server-side image map” but using images as nav elements is OK as long as they have alternative text.

The guidelines suggest creating a simple text/HTML version of a site only if all else fails. Generally this is considered bad form as it segregates the audience and could be seen as discrimination in it’s own right. Think how you’d feel if you were a wheelchair user and were forced to go to a special “disabled cinema” rather than watch the film with everybody else. Sure it’s a quick fix and arguably better than nothing, but separate “accessible” sites are no long term solution.

It’s perfectly acceptable to use colour to convey important information, just as long as that’s not the only way you do it. For instance, it’s OK to use red text for error messages just as long as you use some other mechanism like emboldening as well.

As such the correct answer is d. None of the above

Q2. To get a AA rating you must

Answer b. Use relative rather than absolute units.

There is a common misconception that frames are inaccessible which isn’t strictly the case. To get AA rating you can use frames just as long as you provide a description of the function of each frame and how it relates to the other frames in the frameset.

This is the correct answer. For your site to get a AA rating the checkpoints state that you must use relative rather than absolute units. This is expanded in the techniques section where it says you should “Only use absolute length units when the physical characteristics of the output medium are known, such as bitmap images”. However things get a little greyer if you read the example text beneath the checkpoint which says “If absolute units are used, validate that the rendered content is usable”. This seems to almost invalidate what’s been said before and looks very open to interpritation. A good example of how unclear the language of the WAI guidelines can be.

Obviously this was a trick question. It’s true that you must avoid deprecated tags. However <b> and <i> are not depricated. Another very common misconception.

Obviously “all of the above” has to be wrong as a and c are wrong.

Q3. To get a AA rating you must also

Answer d. None of the above.

Fieldsets are useful to group long forms into smaller, easier to digest chunks. Doing so helps your document comply to checkpoint 12.3. However you only need to do this “when appropriate” so you’re not required to add a fieldset to every form.

This one was a bit of a trick question. You should obviously try to make sure that any tables used for layout make sense when linearized. However this doesn’t apply to data tables which, when linearized may make little or no sense at all.

There is quite a common belief that Javascript is bad for accessibility and shouldn’t be used at all. However Javascript is fine when used in a sensible way. Currently it’s being suggested that Javascript should be applied as a behavior layer to add extra functionality to a document without compromising it’s accessibility. Just as the content of your site should be accessible with CSS turned off, it should also be accessible when Javascript is turned off. If you do use Javascript to write content to the screen, you should make use of the <noscript> tag to provide alternative content. You should also avoid using javascript to spawn new windows as it can really confuse screenreader users. However used sensibly, Javascript is fine.

So by a process of elimination, the answer must be d. none of the above.

Q4. To get a AAA rating you must

Answer c. Make sure all the pages share a similar design.

There is a common misconception that, to make a site accessible, you must use CSS for layout instead of tables. While it is recommended that you use CSS for layout, a table based site can still get a AAA rating.

It’s quite common to replicate the main nav at the bottom of the page as a little usability/accessibility bonus. However it’s not a requirement.

To avoid confusion you should try and make sure that all the pages on your site share a common design.

Obviously as c. is correct, “all of the above” must be incorrect.

Q5. Which site is more accessible?

Answer d. Don’t know

This was the question that got me started with this quick accessibility quiz. Accessibility isn’t about checking boxes, it’s about making the content of a site as accessible as possible to the widest range of users. Unfortunately a lot of people don’t look much further than a specific accessibility rating. It’s quite possible for an A rated site to be more accessible that a AA rated site. Take for instance a site that hits all of the priority 1 and 3 chechpoints, but misses one small priority 2 checkpoint. Such a site is likely to be more accessible that a site that hits all priority 1 and 2 checkpoints, but no priority 3 checkpoints.

See above

See above

The only sensible answer has to be “don’t know” or more specifically can’t tell. The guidelines are called guidelines for a reason. They give you an indication of specific things that you can do to make a site more accessible. However you can’t tell if one site is more accessible than another just by their WAI or 508 rating. Accessibility is about people, not checkpoints, something that is all too often forgotten.

As I said, the questions were quite tricksy. A lot of you got very close, but I’m afraid only two of you got all of the questions correct. So I’m proud to announce that the winners on my quick accessibility quiz GMail give-away are Minz Meyer and Isofarro. Congratulations!

Pirates Ahoy! | July 1, 2004

I quite like Pirated Sites and have always wanted to submit something to it. Both this blog and my ill fated Zen Garden design have been copied to death, yet I've always resisted the urge to submit them. Most of the time a polite email to the offender will suffice and In the end, they are just little personal sites.

A few days ago, the incredibly talented Johan pointed me to this blatant rip of his excellent WSA design. Repeated emails to both the site owner and (cough) designer have been to no avail, so I asked Johan if he minded me submitting it to Pirated Sites. A couple of days later and we're in.

You do have to be careful when submitting a site though. For instance, I really like the Wildly Sophisticated site, which is why I gave it one of the first Web Standards Awards bronze stars. However I do think it's pushing the bounds of reality just a little to suggest this site is anything other than a poor relation. Possibly inspired, but doubtfully pirated.

I'm beginning to think that one very accurate barometer for success is the number of times you appear in Pirated Sites (obviously as the copied, not the copier). 37signals are in there 4 times, k10k are in there 5 times and Netymology a stunning 8 times. I guess they must be doing something right.

Quick Accessibility Quiz - Now With Prizes! | July 1, 2004

Here is a quick accessibility quiz for you folks. Don't cheat and look at the WAI guidelines as that'll spoil the fun. Post your answers (with your reasoning) in the comments and I'll let you know if you're correct in a couple of days.

[Update]. I'll be offering a free GMail account to the first 3 people with the correct answers and reasoning. So far (07:36 BST on the 1/7/04) I don't think anybody has got more than 2 questions correct. The questions are a little bit tricksy so make sure you read them thoroughly before you answer. Oh and the decision of the judges (that's me btw) will be final.

About the author

User Experience Designer and CEO of Clearleft, Andy is the author of CSS Mastery, curates the dConstruct and UX London events and is responsible for Silverbackapp, a low cost usability testing application for the Mac. Andy is a regular speaker at international conferences and was named one of the 100 most influential people in the UK digital sector by Wired Magazine.