Slightlymore » usability

WebAIM: Screen reader survey results

Clinton Montague — Wed, 22 Jul 2009 19:42:50 +0000

Web accessiblity in mind (WebAIM) have published results of their screen reader survey. While reports are often boring, they are often very useful, and this is one of those reports. Screen reader use is often forgotten during the build of a website in the jungle of SEO and the like. The report graphs things like how people browse sites (i.e. whether headings are useful), how often they find skip links and how often other usability good-practices are encountered. Give it a read and improve your web build process.

Don’t leave post slugs as the default

Clinton Montague — Sun, 07 Jun 2009 13:08:03 +0000

This post is mainly aimed towards WordPress, Textpattern and (probably) a multitude of other CMS driven website users. ‘Smart’ web software will automatically create a ‘slug’ for your new article, but it’s not always best to trust the CMS to come up with the best URL for you.

Oh, by the way, a slug is a part of the URL which uniquely identifies a post in a CMS. For example, in the URL http://www.example.com/blog/my-new-post, the slug is my-new-post

The rant

Take my new FGQ – What does the -= operator do?. Auto-slug-generators will (mostly) create the slug what-does-the-operator-do – which I’m sure you’ll agree is not too useful. Firstly, it would be difficult from a user’s point of view to remember which characters to remove and add in to the URL, but secondly, from an SEO point of view, it’s not terribly descriptive. Thirdly, if I then wrote an article with the title what does the += operator do – wordpress would create a very similar slug.

The point

Most, if not all, CMS systems allow you to change the slug of the post or article. Most of them also automatically create one for you. I am making the point that the automatically created slug is not always the best. When you create a new post, take a moment to think about what you’re trying to say, how people might search for it, and optimise for both. For example, this post is called Don’t leave post slugs as the default, but I have decided that the best way to describe it SEO-wise is post-slug-optimisation. It’s a minor thing, but it can make all the difference between being on the first or second page on google.

8 Tips for Maintaining a User Friendly Site in One Hour a Month

Clinton Montague — Tue, 02 Jun 2009 14:03:37 +0000

I’m sure it’s happened to you. It’s always happening to me. How easy is it to build ‘My awesome website’ which is beautifully SEO’d, completely accessible to everyone and everything only to find that after launch, it quickly turns into ‘My messy website 3.0′. It could be broken links or images, spelling mistakes or pages which somehow magically stop working. The UX Booth has written a brilliant article with suggestions as to what to check for and why it’s important. And hey, an hour a month isn’t that much time, is it.

Introducing Opera Face Gestures

Clinton Montague — Wed, 01 Apr 2009 10:00:57 +0000

Opera announced today that they will be introducing face gestures into future releases of their browser to help speed up browsing. It was around 8 years ago that they introduced mouse gestures, and once again it looks like they will be revolutionising the market. Although judging by the date and time of the announcement, I wouldn’t get too excited about seeing this feature any time soon ;)

AJAX is easy, but remember accessibility

Clinton Montague — Sun, 18 Jan 2009 19:09:11 +0000

AJAX is easy. It’s just javascript talking to your server to grab a little bit of content instead of the browser grabbing the whole thing. With this in mind, let’s get to work and build a simple AJAX application that will work with javascript turned off. We’ll do this by assuming that there is no javascript in your user’s browser, then use jQuery to change the DOM to add in the behaviours.

So first things first, I just want to lay down a few requirements for this faux-project. I want this to be properly simple, so it would be great if the regular content and AJAX content could come from the same place. I want the pages to work properly for people with no javascript. I want people with javascript to load in the new content using AJAX, but very importantly, I want them to be able to send a link to their friends or bookmark the content they are viewing. This is something which people often look over when building their AJAX applications, so normally if you send a link to someone, they’ll get the ‘front page’ instead of the information which the sender was looking at. So let’s split the project up into four parts:

Build the website using a bit of PHP magic so that either the whole page, or just the AJAX content can be loaded;
Use jQuery and HIJAX to update the content instead of loading the whole new page if the user has javascript enabled;
Create a mechanism so that people can send a link or bookmark the page;
and finally, load in the relevant content instead of the default content if someone uses one of their bookmarks

Part 1: The PHP

For this tutorial, I’m just going to create a very simple page with just a navigation bar and content area. I will split each page up into three parts: files for the header and footer as these will be the same for all pages, and the page itself, which will include the header and footer.

Inside the header and footer is where the magic will happen. For AJAX calls, I will pass a GET parameter to the page (I have chosen AJAX=1, but you can choose whatever you like), but normal page loads will not have this. Using this technique is a great way to test your output too – if you want the full page, just go to it’s url (i.e. http://example.com/page.php), if you want the AJAX content, stick ?AJAX=1 on the end (e.g. http://example.com/page.php?AJAX=1).

header.php


if (!isset($_GET['AJAX']))
{
	?>
	
		
			Example AJAX website
			
		
		
			Home Page 1 Page 2
			
	
}

footer.php


if (!isset($_GET['AJAX']))
{
	?>
			
		
	
	
}

a-page.php

 include ('./header.php'); ?>
Example page
My content
 include ('./footer.php'); ?>

Part 2: HIJAX

So far the pages work for people with javascript disabled, which includes our friends, the search engines. By adding in the href to the anchors instead of just onClick handlers, the site is fully navigable and accessible to everyone. Wouldn’t it be great if we could keep this code the way it is and somehow magically get the AJAX working without modifying this at-all?! Well, the great news is that with HIJAX, we can.

The first thing to do is to use jQuery to find the elements which we would like to load in content via AJAX, and inject some behaviour into them. In my example, they are the anchor tags inside the navigation div. I will use jQuery to find those, add in the AJAX behaviour (which will load in the content from the same page, but with ?AJAX=1 appended) and disable them from loading in a whole new page. The next thing to do is to get them to update the address bar so that bookmarking / linking will show the correct content.

Part 3: Linking mechanism

If you are familiar with Gmail or Facebook, you might have noticed that when you click around, the address bar changes. They use the document’s hash to indicate what page of the site you are currently on. I like this mechanism, so I will do the same.

It’s quite easy really, along with the AJAX call on the onClick, we can set the location.hash javascript variable to be the href of the anchor tag which the user clicked. One line of code will deal with that.

Part 4: Dealing with the linking mechanism

Imagine the scenario: Someone comes into your website at page1.php, then clicks on a link to page2.php which is loaded in through AJAX. They bookmark the page. Now the URL points to page1.php and we need content from page2.php. We know that we want the content from page2.php because the hash will indicate this. So we can just get jQuery to load in the content (which we can do because we know the page to get the content from (from the hash), and just append it with ?AJAX=1).

Putting it all together

You might be surprised that you can build a fully functioning AJAX site with just 10 lines of jQuery (and it could be a lot less). I say you can, and here’s the code for all three of the above steps. (Obviously it’s longer than ten lines because I have put in some comments, but strip them out and it’s only ten!)

$(function() {
	// Part 4
	if (location.hash)
	{
		// the substring is to get rid of the '#' at the beginning
		// the $.get function takes three arguments:
		//		the page to load 
		//		any GET parameters (in this case AJAX=1
		//		what to do on success. (in this case update #content-area
		$.get(location.hash.substring(1), {AJAX:'1'}, function(data) {$("#content-area").html(data);})
	}
	// Part 2: the HIJAX.
	//		(in this case, add AJAX calls to all anchors in #navigation)
	$("#navigation a").click (function () {
		// load in the new content (from the same page as the anchor's href attribute) 
		// then put the resulting html into #content-area
		$.get ($(this).attr("href"), {AJAX:'1'}, function(data) {$("#content-area").html(data);});
		// and this line is for part 3
		location.hash=$(this).attr("href");
		// this stops the browser from loading the whole page
		return false;
	});
});

Whether you put this into an external javascript file, or at the bottom of footer.php is up to you. In the example, I have put it at the bottom of footer.php. To see the fruits of my labour in action, visit the Example Accessible AJAX website. You might like to also try visiting page 1 (which you’ll notice is loaded in by the javascript, so you see the content for page1.php even though you initially load index.php). And of course, you could just look at the AJAXified content. As usual, I have zipped up all of the files used in this tutorial for you to download.

Final thoughts

This tutorial only scrapes the surface of AJAX, so while this is a starting point, it is by no means ready for deployment for live sites. Ofcourse, it works, but there are other things that you will need to consider (a ‘web 2.0′ loading animation? What do you want to do if the hash points to a page which doesn’t exist? Are there other parts of the page which need to be updated too (i.e. the title bar, sub navigation or tactical boxes)?).

It might be more desirable for you to have a single (or a few) php file(s) which deal with all of the AJAX requests rather than each page delivering both regular and AJAX versions of the same content. This will definitely be the case in websites using MySQL or similar rather than flat static files like in the example. Also you might like to look at other ways to deliver the content (after all, the X in AJAX stands for XML), both jQuery and PHP have support for JSON, I would suggest having a look at that.

Forwards and back buttons: currently they have no effect on the site. Would you like your users to be able to go back a page by pressing the back button? I would recommend this. There a plenty of plugins out there which will help you to complete this task.

Finally, DON’T, for god’s sake, use AJAX just because you can! There is really no need for me to have used it in the example (other than it was about AJAX, of course), there is nothing more annoying to me than a website which uses AJAX because the author had read about it the night before. Please don’t be one of those people!

Have I missed anything out? What are your thoughts?

Grab the files

You can download the files used for the example site here.

Better, faster and more robust rollovers with CSS sprites

Clinton Montague — Tue, 09 Dec 2008 19:35:57 +0000

Do you remember the olden days? You know, the ones where we had 56k modems, a mouse with only two buttons, and the only way to have a rollover state were those horrid MM_SwapImage javascript functions (or whatever they were called). I do. And I remember that it was actually only a small number of years ago. A large proportion of people are still using javascript for this task, maybe they’re stuck in their old ways. I want to show you a much sleeker, and if I’m honest, a much sexier way to do the same thing. If you can’t wait, I have put together an example.

So what’s a sprite

A sprite is essentially a picture. They can be 2d or 3d and are normally animated or move in some way. Strange to use a different word, but you know what us geeks are like. We like to make things sounds more complicated than they actually are, all the time. How many acronyms go into the technology of this page, for instance. WordPress is built in PHP using the MySQL database. It was uploaded with FTP, to a LAMP server which I manage using SSH. The pages are serverd over HTTP and are XHTML which is styled using CSS which is also used to position the PNG image in the header. Ok, ok, I’ll stop, you get the picture. So a sprite is an image. Think of a picture of Sprite^tm if that will help. (lol?)

What’s wrong with Javascript?

Nothing! Please, be my guest, continue using javascript until your heart is content. But it will become content. It’s a lot of work having to put your images in an array, get the hover states working independently and hitting your head against your desk. Then ofcourse, there’s always that annoying paranoid troglodyte of a client who has their javascript disabled so can’t see your beautiful handiwork.

Why is your CSS method so great then, huh??!

Sure, my client could have CSS disabled just like yours had javascript disabled. But then, my CSS disabling client is used to only seeing the web in 16pt times new roman with blue links. Using this CSS instead of swapping images will, believe it or not, improve the semantic meaning of your code. Which means google and friends will understand your site better too! Sounds too good to be true, doesn’t it! Shall we press on?

The theory

The idea here is to create a fully standards compliant, fully accessible and gracefully degradable graphical button using only HTML and CSS.

Let’s start with the the HTML for a graphic and turn it into a link, like a normal image link.

1	<a href="http://slightlymore.co.uk/"><img src="button.png" alt="My button" /></a>

Problem number 1: It’s not accessible. Well, sure, it’s got an alt tag, but let’s be pedantic here. Solution: Let’s remove the image and replace it with the text. After that, set the a tag to be displayed as a block (which allows you to specify the height and width), give it an id (so we can pick it out), give it a class of button (there will be other buttons like it so may as well use this to style it up) then use the picture as a background image.

1	<a href="http://slightlymore.co.uk/" class="button" id="sexy-button">Sexy button</a>

.button
{
	display: block;
	width: 184px;
	height: 35px;
}
#sexy-button
{
	background-image: url(sexy-button.png);
}

Great! Oh, except for the fact that the text is over the button. So let’s surround the text with a span, then tell the span to go away with CSS.

.button span
{
	position: relative;
	left: -9999px;
}

Wasn’t it supposed to move?

Welcome to the magic of CSS sprites. Remember how those rollover buttons were made of two graphics, one for the on state and one for the off state? Well use some photoshop glue to place them on top of each other (the off state at the top). I know, I know, it’s bigger than the size of the background, but that’s the awesome thing! Now, using only css, we can move the position of the background when the user rolls over the anchor tag using the :hover psuedo class.

.button:hover
{
	background-position: 0px -35px; /* moving up by the height of the button */
}

AND because it’s just a single image, the user won’t see the short delay and flicker when they roll over your button because the browser doesn’t have to load a new image!

The applications of this are immense. Just imagine having the on, off and active states all in one image and all controlled with your new friend, css. If you have gone on to use this, post a link to your new page!

And for graceful degradation:

Javascript disabled: Great, we didn’t use it anyway
CSS disabled: Great, you’ll see the text link
Google: Great, keep your text contextual (i.e. describe where the user will go instead of “click here”)
Screen readers: Great, there were no images involved so the program can read the text

You can download the files in the example page.