Sankho Mallik's Web Log.

Front end development is all about the end user, and their experience with the website. Usability is judged upon the quality of a user’s experience while interacting with the object in question; in this question, a website.

Recently, six revisions put out a great article on usability. It took a very general view; taking concern over a site’s feature set and general design. Most articles I’ve read on the web focus on usability from a pure designer’s perspective; I’m here to drop some knowledge about how to enhance the usability of your site from a developer’s perspective: using HTML, CSS, and equality for all. Sort of a joke.

1.) Larger click areas using CSS -or- why display: block is your friend.

So often in HTML land, we find ourselves setting up an unordered “<ul>” list of links. Very often, we style it up in CSS with a selector of someting like “ul li a”. By default, anchor, “a”, tags are inline elements. What does that mean?

Inline elements don’t take up the entire width of the container it’s in, where block level elements do. So a lot of the time, the only place you can click a link is on it’s text, because anchor tags by default are inline elements.

But you can easily create a larger click area for the link in your lists by adding the css property “display: block;” to your “ul li a” selector for your linked lists. Look at how the backend of wordpress maximizes the click area on the sidebar by enabling this:

You can see that a user’s click area for the link has increased by some 60% by setting “display: block;”. Without it, the link’s click area is limited to the text “Library” and the background may not stretch out completely, causing a break in uniformity.

It’s a little thing but that’s what this article is about. It’s just one CSS property you can change easily to enhance the overall usability. Linked lists appear everywhere – how many sidebars have you coded under the ul>li>a format? Make them better.

One note of cross browser warning – yep, IE6 again!

Of course this isn’t that easy. Setting “display: block” to a “ul li a” selector in CSS messes up the height in IE6. And for some reason – god knows why – there’s a hack that makes no sense. Just add this code to your style sheet, or your IE6 sheet, and you’ll be fine.

“* html ul li a { height: 1%; }”

I know, makes no sense. But it is IE6 we’re talking about.

2.) Account for your audience’s screen resolution -or- horizontal scroll bars are the plague! 1024!

At work, I get to use a pretty awesome 21 inch display. At home, I have a 13.3 inch laptop – which I often hook up to a 40 inch HDTV. So personally, resolution is rarely a problem for me while using the web.

But did you know the majority of web users are on a screen resolution of 1200 x 800? Might be a bit smaller than what you’re used to. The second largest population? 1024 x 768. In fact – although my laptop’s monitor is running 1200×800, I often minimize my browser window to something around 1024 x 768 so I can view the dekstop. I have a suspicion that all the 1200 x 800 users out there in internet world work in a similar way.

So when you’re specifying the layout for your next site; try and make sure those that see the site on a 1024px wide browser see the whole site – and don’t get an annoying horizontal scroll bar. I typically set my containers to something like 960px – that way there’s some nice gutter space along the sides.

It may seem like a small thing, but a horizontal scroll bar is one of those little things that take away some class, and thus usability, from your site – just ask the legions of 1024px dinosaurs like me.

If you need some help setting your browser’s viewframe to these common resolutions, look into plugins for your browser. If you’re running on Firefox, the uber popular web developer toolbar is the way to go.

3.) Accessibility – Embrace an ever growing population of users

OK; this one isn’t so easy as the first two. But it’s a burgeoning issue for web developers and you’d only do better to get prepared now for what could be a client’s greatest need tomorrow.

Along with usability, another term that’s thrown around a bit is accessibility – this refers to making your site accessible to the largest percentage of viewers. That means not just your average web browsers – you also need to make your site viewable for those in mobile phones, those on screen readers, and those viewing the internet using handicapped devices! Let’s not forget browsers made in the future – accounting for them is also a part of a site’s overall accessibility. It’s a daunting task; but the bigger the client, the bigger the necessity.

Quick note on necessity – always judge how much a client’s traffic will be composed of those on screen readers, mobile devices & handicapped tools, and decide from there how much you want to do for accessibility’s sake. But the best approach is to try and change the way you do things regularly to account for more accessibility, but without taking more time doing what you need to do.

The good thing is that we can achieve all of this through HTML & CSS. So accessibility very much so becomes a big piece of a site’s overall usability; how can the blind use your site if they can’t readily access it’s information?

But how?

Start writing your code differently. I’ll go over a few of the topics now, but I encourage you to go out and do some of your own research as well. Just remember that to make your site usable, you have to make it accessible to as many people as possible.

Standards based, Valid HTML

Writing HTML based on best practice web standards is the only way to protect the code you write today against the browsers of the future. That’s because all browsers made from today on will support web standards, and valid HTML will always be of prime importance.

If you want to validate your HTML, look into the w3c’s very own validator. If you’re running on firefox, check out the validator plugin.

Semantic HTML

If you write your HTML semantically, screen readers should be able to read a website without any CSS and view it properly. Try taking your style-sheet away for a second – the web developer toolbar does this quite easily, but it’s possible via HTML of course. How does your site look?

Did you use header tags, so headers are clearly labeled without a stylesheet? Did you use ordered, unordered, and definition lists where they were appropriate? Did you only use tables to display tabular data, and not as a layout hack? By scrolling down, do you basically get all the crucial content that the usual browser experience delivers when paired with CSS?

Semantic HTML keeps your site accessible as well as future proof – you never know what kind of new fangled devices may start interpreting your code in the future. Get ready for them to read your content appropriately today. If you’re really into the future, get ready to use HTML5 – it will change the interpretation of the internet.

I’d be remiss to mention that semantic HTML is the #1 thing you can do improve your site’s SEO.

Descriptive “title” descriptions on anchor tags, and the like

Here’s a small, easy HTML accessibility tip – on your anchor tags, especially the navigational ones, start including “title” information. Don’t just repeat the text within the anchor tags – Write a short description of where the link is going. Screen readers and the disabled rely on this information. Again – it’s also great for SEO.

But what do I mean by “and the like”? I mean that this tip is pretty non-specific. Go out and do some of your own research to find out other quick tips for accessibility. Visit sites through a screen reader and judge your experiences – taking from the good ones. More often than not, they’re just little things you can do to make your code better.

In conclusion

Usability is constantly asking yourself – “how can I make the goals of this project easier to achieve for the people that may experience it?” It’s a lot of elbow grease type work in the end – the product of several revisions and a keen eye during all parts of the process. It is not independent to design or development. But it starts with developing the mindset of making things easier for users; and things lead from there.