You know exactly what your organisation does and what your website offers its users. This information has probably become second nature to you, but first-time visitors to your site won’t know this. As such, make sure you don’t forget to tell them what you do.

As soon as new site visitors arrive at your website the first thing they need to know, before anything else, is what you do. You can talk all you like about how great you are, but unless you spell out what you actually do, they won’t even know what you’re so great at! This oh-so-overlooked yet such basic of information can be communicated to your site visitors in a number of different ways:

Page title

Don’t just use the page title to tell me who you are; tell me what you do too. If your company is called Bloggs Ltd don’t only place the words, ‘Bloggs Ltd’ in the page title as there’s plenty of room for more information. If Bloggs Ltd sells widgets, a good page title might be: ‘Bloggs Ltd – Buy widgets online‘.

Note in this example, ‘Buy widgets online‘ was used to describe what Bloggs Ltd does, and not ‘Widget seller’. When describing what it is you do be sure to speak the language of your users, and don’t talk from your point of view. From your point of view you sell widgets, but from their point of view they want to buy widgets online, so do bear this in mind when authoring the page title.

The page title is the first thing that appears on screen, and especially on dial-up modems can be the only thing that displays for the first 10 seconds or so. For many web users this is the first piece of content they’ll read on your site.

The page title is also very important for search engines, which place more importance on the page title than any other on-page element. Descriptive page titles are also essential for blind web users utilising screen readers, as it’s the first thing that gets read aloud to them upon arriving at the page.

Tagline

A good tagline is one of the most important usability features on any website. A good tagline should be explanatory and not vague, clear and informative and about four to eight words in length. A tagline is different to a company slogan, in that the former describes what the organisation/website does whereas the latter is designed to evoke certain feeling or create a brand.

‘Priceless’ and ‘I’m loving it’ are slogans by Mastercard and McDonald’s respectively – they differ from taglines because they don’t describe what the organisation does.

Taglines are so important because no matter on what page site visitors enter your website, they’ll always be able to quickly gain an understanding of what your organisation and website offers. This can be especially true for site visitors coming into internal pages from search engines – by telling these site visitors what you do through the tagline, they may be more likely to explore your site beyond the initial page on which they enter.

Taglines are also good for search engine optimisation, as they appear on every page right at the top of the page, an area on to which search engines place importance.

Main heading

The main heading on the homepage is one of the first pieces of text web users notice, especially on clean well laid out websites. Sticking a ‘Welcome to our website’ may seem to be friendly and welcoming to you, but to task-driven site visitors it doesn’t help in any way shape or form. A quick summary of what you do and/or what the website offers, in just four or five words can be highly effective (and very search engine friendly too!).

Opening paragraph

Perhaps the most important place on the homepage to tell your site visitors what you do, the opening paragraph must be short, succinct and straight-to-the-point. Just one sentence is enough to put across this most basic yet fundamental of information.

When writing this opening paragraph, remember to front-load the content (this rule actually applies to every paragraph on the website). Front-loading means putting the conclusion first, followed by the when, what, where and how.

Don’t write a story with a start, middle and conclusion – generally speaking on the web, we scan looking for the information that we’re after so put the conclusion first. This way, site visitors can read the conclusion first, which in this case is what your organisation actually does. If they want to know any more, they can then continue reading or jump to another section of the page. (To see front-loading in action, read any newspaper article.)

Exceptions

So, does every website need to tell users what the organisation does in these four different places? Well, not necessarily. We all know what Mastercard and McDonalds do, so it could definitely be argued that websites for household names need not explicitly say what they do. What these sites should do instead is tell us what the website offers, and this message can (and should) be put across in any of the above four ways – how else will site visitors quickly be able to find this out?

Conclusion

People are going to visit your site who don’t know what you do. Before you can even begin selling to them you must tell them what your organisation and website does. In addition to fulfilling site visitors’ immediate need (finding out what you do) you’ll also be boosting your search engine rankings. If your organisation is a household name, then instead of explaining what you do, it may be wise to tell site visitors what they can do on your website.

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He’s extremely good at usability testing and running CSS training courses.

Testing a website for accessibility can be a time-consuming and laborious process. The free Web Accessibility Toolbar can do most of the hard work for you though and is an indispensable tool for anyone interested in accessibility.

The toolbar is not an automated testing tool so does require manual work from you. It’s therefore able to avoid the many problems with automated accessibility testing tools. It doesn’t require any technical knowledge so even the biggest technophobe can check their website for accessibility!

Installing the Web Accessibility Toolbar

You can download the toolbar for free from http://www.nils.org.au/ais/web/resources/toolbar, and after you install it, it will sit in the toolbar area of Internet Explorer. The total file size is just 550kb so the download won’t take too long. The toolbar only works on Internet Explorer on Windows, so if Internet Explorer isn’t your first-choice browser you’ll have to switch browsers when using it. (Alternatively, you can download the Web Developer Toolbar for Firefox which offers similar, but not identical, functionality.)

Using the Web Accessibility Toolbar

Now you’ve downloaded and installed the Web Accessibility Toolbar you can start using it! There are 12 buttons in total on the toolbar, each with a down arrow to the right of the text. If you click on the down arrow for any of these buttons then a dropdown menu appears with all the available options (alternatively you can use the keyboard shortcut keys assigned to each button).

Checking for document structure

One of the most useful buttons is the seventh, Structure. It’s essential that the structure within the HTML code accurately reflects the visual structure of the page. This is so that visually impaired web users using screen readers can gain an understanding of the page structure.Some of the most useful items in the Structure dropdown menu include:

• Headings – Shows which items on the page are labelled as headings within the HTML code. The main page heading should be an <h1> (heading level one) and other headings should be <h2>s (heading level twos). Any sub-heading of an <h2> should be an <h3>, then <h4> and so on. Heading numbers should always be sequential – an <h4> shouldn’t follow an <h2> if there’s no <h3>. Headings are especially useful for screen reader users as they can call up a list of headings and jump straight to the section in which they’re most interested.
• List items – Shows which items on the page are labelled as lists within the HTML code, by displaying
• next to any list item. Lists can be horizontal or vertical, and all navigation should be marked up as a list item. Lists are very useful for screen reader users as the screen reader will announce the number of items in the list before reading the list items.
  
• Fieldset / Label – Shows which items on the page are called labels within the title=”Hypertext Markup Language”>HTML code. After selecting Fieldset / Label, the text next to each form should say the word label next to it – if not, that text hasn’t been called a label in the code.
• Table border – Places a border around each table. Nested tables within tables can cause huge difficulties for screen reader users. After selecting this item, the first table will have a black border the second blue, then green, yellow, orange, red and purple. If you see any of these last four colours it’s time to take a good look at the code behind the page.
  
• Table cell order – Shows the order in which the page is read out to screen reader users (if a table is used for layout). Hopefully, the order should be reasonably logical.

Checking the site works under all circumstances

It’s important that your website doesn’t depend on any one type of technology, or users whose browsers don’t support that technology may be unable to access your site. You can check to see if your site depends on any one technology:

• Images > Toggle Image/Alt – One of the most useful functions on the toolbar, replaces images with their ALT, or alternative, text. Alt text is read out to screen reader users or displayed to web users with images turned off, instead of the image itself (e.g. users on dial-up modems may turn off images to speed up the download time of pages). It’s essential that the ALT text provides an adequate description of the image.
• IE Options > Toggle JavaScript – Turns off JavaScript. After selecting this option, work through the pages on your website – is the whole site still accessible to you?
  
• IE Options > Toggle ActiveX – Turns off ActiveX controls. Again, after selecting this, work through your website to see if the whole site is still accessible to you.
  
• IE Options > Toggle CSS – Turns off CSS. Are pages still legible? If CSS is used for layout then you will see the page content in the order that it’s read out to screen reader users. (If you toggle image/alt after this, you’ll have a complete visual representation of what screen reader users will hear.)

Other useful accessibility checks

There’s a huge amount of functionality available on the Web Accessibility Toolbar, but some of the other most important accessibility checks you can carry out with the toolbar include:

• Validate > W3C HTML validator > Validate HTML – Checks whether the page is based on valid HTML or not. If the page is not valid, you’ll be told why.
  
• CSS > Deprecated HTML > Deprecated elements & attributes – Checks for code that shouldn’t be used and is being phased out. A new window will open containing the HTML code – anything in red is deprecated and should be removed.
  
• Doc info > Page speed report - Examines all the files used to display the web page and prepares a report on the average download speed for that page for different Internet connections.
  
• Doc info > List links - Displays a list of all on-page links. Screen reader users can call up a list of links and jump straight to the page in which they’re most interested, so it’s essential that link text makes sense out of context. Link text such as ?click here? should be avoided at all costs!
  
• Colour > Greyscale – Shows the page in greyscale. Great for checking colour contrast.

Other functionality

The Web Accessibility Toolbar offers some other interesting functionality:

• Resize – See how your website looks for users on 640 x 480px, 800 x 600px and 1024 x 768px screen resolutions.
  
• Tools > Simulations – Put yourself in the shoes of a special needs users with these fascinating simulations.

Conclusion

The Web Accessibility Toolbar offers an enormous amount of functionality. Download it for free from href=”http://www.nils.org.au/ais/web/resources/toolbar/”>http://www.nils.org.au/ais/web/resources/toolbar and start using it. Without any technical expertise, you can perform a mini-accessibility audit on any site in just a couple of minutes.

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He’s extremely good at usability training and writing for the web training.

The Disability Discrimination Act says that websites must be made accessible to disabled people. So how can you check that your website is up to par? There are a number of basic tests you can make to address some of the m2328ain issues. The following list includes guidelines that provide a good start in increasing accessibility to disabled people:

1. Check informational images for alternative text

Place the cursor over an informational image, for example, the organisation logo. Does a yellow box appear with a brief, accurate description of the image? For users whose browsers don’t support images, this alternative text is what they’ll see (or hear) in place of the image.

2. Check decorational images for alternative text

Place the cursor over a decorative image that doesn’t have any function other than to look nice. Does a yellow box appear with a description of the image? It shouldn’t. This image serves no purpose so there’s no reason for users whose browsers don’t support images to know that it’s here.

Be careful though as this isn’t a foolproof test. If a yellow box doesn’t appear, this could mean one of two things:

• The alternative text of the image is assigned a null value (alt=”"), which means that it will be ignored by browsers that don’t support images. This is the ideal scenario.

• The alternative text of the image is simply not set at all, which means that users whose browsers do not support images will be alerted to its existence but will be unable to find out what purpose it carries – something which is very frustrating! This is certainly not the desired outcome.

3. “Listen” to video or audio content with the volume turned off

If you turn your speakers off, you’re clearly unable to listen to, or follow, any audio content. This situation is faced by a deaf person on a daily basis. Ensure your website supplies written transcripts, so that deaf people can understand the message that your website’s conveying.

4. Check that forms are accessible

Usually there’s prompt text next to each item in a form. For example, a contact form might have the prompt text name, e-mail, and comments, each one next to a box where site users will enter their details. When you click on the prompt text, does a flashing cursor appear in the box next to that text? If not, your forms are inaccessible.

5. Check that text can be resized

Does the text on your website increase in size? If not, then your website is inaccessible to web users with poor visibility. To check:

• Internet Explorer: View ? Text size

• Netscape: Edit ? Preferences ? Appearance ? Fonts

• Opera: File ? Preferences ? Fonts ? Minimum font size (pixels)

6. Check your website in the Lynx browser

The Lynx browser is a text-only browser and doesn’t support many of the features that other browsers such as Internet Explorer have. You can check how your site looks in this browser with the Lynx Viewer. If your website makes sense and can be navigated through the Lynx browser, then it’ll be fulfilling many of the web accessibility guidelines.

7. Check that you can access all areas of your website without the use of a mouse

Can you navigate through your website using just tab, shift-tab and return? If not, then neither can keyboard- and voice-only users.

8. Check that there’s a site map

Can you find a site map? If not, then neither can people who are lost on your website.

9. Check your web pages with an automated program

Two programs available for free on the Internet are Bobby and Wave. They’re unable to provide you with all the information that you need, as some checks must be done by humans, but they can tell you some of the areas where your site might be going wrong.

10. Teach yourself

This isn’t really a quick test, but it’s definitely possible to do if you have the time. The best place to start learning is to read Web accessibility: The basics. After this, browse through the web accessibility resources area and then follow some of these web accessibility links – some of these links really do have an enormous amount of information on web accessibility.

This article was written by Trenton Moss. He’s crazy about web usability and accessibility – so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone.

Why is download speed so important?

Do you like to wait for pages to download? Neither do your site users. Read on…

1. Lay out your pages with CSS, not tables

CSS downloads faster than tables because:

• Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content
• Tables appear on the screen all in one go – no part of the table will appear until the entire table is downloaded and rendered
• Tables encourage the use of spacer images to aid with positioning
• CSS generally requires less code than cumbersome tables
• All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user’s computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads
• With CSS you can control the order items download on to the screen – make the content appear before slow-loading images and your site users will definitely appreciate it

2. Don’t use images to display text

It’s our old friend CSS to the rescue again. There’s no need to use images to display text as so much can be accomplished through CSS. For example:

check out the example here

Put your mouse over the above link, created entirely through CSS. This is just a very simple example – the tabs at the top of this page are made with CSS too. Have a look at how else you can use CSS to make navigation buttons.

To learn more about CSS and the amazing things it can do for your website, please visit our CSS resources area.

3. Call up decorative images through CSS

It’s possible to present images as part of the background, called up through CSS. If you’ve got an image that’s 200px by 100px you can use the following HTML code:

<div class=”pretty-image”></div>

And this CSS:

.pretty-image { background: url(filename.gif); width: 200px; height: 100px }

This may at first seem a little pointless but this technique could really increase the download time of your pages. Browsers basically download background images after everything else. By using this technique, your text will load instantaneously and your site users can freely roam about the page while your 50kb fancy image downloads.

This technique disables the ALT attribute though so if you really want to have one then replace the above HTML code with this:

<image src=”spacer.gif” class=”pretty-image” alt=”description” />

Spacer.gif is a 1px x 1px transparent image. Now you have a 50 byte transparent image and the main content loading first, and your great big decorative image, complete with ALT text, loading second. Perfect.

Please note that this technique is only good for decorative images and not informational ones. Any user who has CSS disabled will not be able to see your CSS-embedded images (or their alternative text).

4. Use contextual selectors

This is inefficient:

<p class=”text”>This is a sentence</p>

<p class=”text”>This is another sentence</p>

<p class=”text”>This is yet another sentence</p>

<p class=”text”>This is one more sentence</p>.text { color: #03c; font-size: 2em }
Instead of assigning a value to each individual paragraph, we can nest them within a <div> tag and assign a value to this tag:

<div class=”text”>

<p>This is a sentence</p>

<p>This is another sentence</p>

<p>This is yet another sentence</p>

<p>This is one more sentence</p>

</div>.text p { color: #03c; font-size:2em }
This second CSS example basically says that every paragraph within class=”text” should be assigned a colour value of #03c and a font size of 2em.

At first glance this doesn’t look too important, but if you can apply this properly throughout your document you can easily knock off 20% of the file size.

You may have noticed the colour values are shorter than normal. #03c is a shortened version of #0033cc – you can assign this abbreviated value to any colour value like this.

5. Use shorthand CSS properties

Font

Use:

font: 1em/1.5em bold italic serif

…instead of

font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif

Border

Use:

border: 1px black solid

…instead of

border-width: 1px; border-color: black; border-style: solid

Background

Use:

background: #fff url(image.gif) no-repeat top left

…instead of

background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left;

Margin, padding, border

Use:

margin: 2px 1px 3px 4px (top, right, bottom, left)
…instead of

margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-right: 4px

Use:

margin: 5em 1em 3em (top, left and right, bottom)
…instead of

margin-top: 5em; margin-bottom: 1em; margin-right: 1em; margin-right: 4em

Use:

margin: 5% 1% (top and bottom, left and right)
…instead of

margin-top: 5%; margin-bottom: 5%; margin-right: 1%; margin-right: 1%

These rules can be applied to margin, border and padding.

6. Minimise white space, line returns and comment tags

Every single letter or space in your HTML code takes up one byte. It doesn’t sound like much but it all adds up. We’ve found that by working through your page source and eliminating unnecessary white space and comments, you can shave off up to, or even over (if your HTML is really inefficient) 10% of its file size.

7. Use relative call-ups

Try to avoid absolute call ups as they take up more space. An example of an absolute call up is: <a href=”http://www.URL.com/filename.htm”>. Much better would be <a href=”filename.htm”>. But what if some files are in different folders to other ones? Use these shorthand properties:

• <a href=”/”> – Calls up http://www.URL.com
• <a href=”/filename.html”> – Calls up http://www.URL.com/filename.html
• <a href=”/directory/filename.html”> – Calls up http://www.URL.com/directory/filename.html
• <a href=”./”> – Calls up index.html within that directory
• <a href=”../”> – Calls up index.html one directory above
• <a href=”../filename.html”> – Calls up filename.html one directory above
• <a href=”../../”> – Calls up index.html two directories above

8. Remove unnecessary META tags and META content

Most META tags are pretty much unnecessary and don’t achieve very much. If you’re interested, you can see a list of META tags that are available. The most important tags for search engine optimisation are the keywords and description tags, although due to mass abuse they’ve lost a lot of importance in recent times. When using these META tags try to keep the content for each under 200 characters – anything more increases the size of your pages. Lengthy META tags are not good for search engines anyway because they dilute your keywords.

9. Put CSS and JavaScript into external documents

To place CSS in an external document use:

<link type=”text/css” rel=”stylesheet” href=”filename.css” />

To place JavaScript in an external document use:

<script language=”JavaScript” src=”filename.js” type=”text/javascript”></script>

Any external file is called up just once and then cached (stored) on the user’s computer. Instead of repeating JavaScript or CSS over and over again in HTML files, just write it out once in an external document.

And don’t forget, there’s no limit to the number of these external documents that you can use! For example, instead of making one huge CSS document, have one main one and some others that are specific to certain areas of your site.

10. Use / at the end of directory links

Don’t do this: <a href=”http://www.URL.com/directoryname”>
Do this instead: <a href=”http://www.URL.com/directoryname/“>

Why? If there’s no slash at the end of the URL the server doesn’t know if the link is pointing to a file or to a directory. By including the slash the server instantly knows that the URL is pointing to a directory and doesn’t need to spend any time trying to work it out.

This article was written by Trenton Moss. He’s crazy about web usability and accessibility – so crazy that he went and started his own web usability and accessibility consultancy to help make the Internet a better place for everyone.

User-centered design (UCD) is a project approach that puts the intended users of a site at the centre of its design and development. It does this by talking directly to the user at key points in the project to make sure the site will deliver upon their requirements.

The stages are carried out in an iterative fashion, with the cycle being repeated until the project’s usability objectives have been attained. This makes it critical that the participants in these methods accurately reflect the profile of your actual users.

Focus groups

What are they?

A focus group involves encouraging an invited group of intended/actual users of a site (i.e. participants) to share their thoughts, feelings, attitudes and ideas on a certain subject.

Organising focus groups within an organisation can also be very useful in getting buy-in to a project from within that company.

When to use

Focus groups are most often used as an input to design. They generally produce non-statistical data and are a good means of getting information about a domain (e.g. what peoples’ tasks involve).

Issues

It’s necessary to have an experienced moderator and analyst for a focus group to be effective.

Usability testing

What is it?

Usability testing sessions evaluate a site by collecting data from people as they use it. A person is invited to attend a session in which they’ll be asked to perform a series of tasks while a moderator takes note of any difficulties they encounter.

Users can be asked to follow the think-aloud protocol which asks them to verbalise what they’re doing and why they’re doing it.

You can also time users to see how long it takes them to complete tasks, which is a good measure of efficiency (although you should bear in mind that using the ‘think aloud’ protocol will slow users down considerably).

Two specialists’ time is normally required per session – one to moderate, one to note problems.

When to use

Usability testing can be used as an input to design or at the end of a project. It represents an excellent way finding out what the most likely usability problems with a site are likely to be.

Usability testing can be used generate non-statistical or statistical data.

Issues

Usability testing requires some form of design to be available to test – even if it’s only on paper. Testing works best if it focuses either on gathering non-statistical feedback on a design through ‘talk aloud’ or statistical measures.

Card sorting

What is it?

Card sorting is a method for suggesting intuitive structures/categories. A participant is presented with an unsorted pack of index cards. Each card has a statement written on it that relates to a page of the site.

The participant is asked to sort these cards into groups and then to name these groups. The results of multiple individual sorts are then combined and analysed statistically.

When to use

Card sorting is usually used as an input to design. It’s an excellent way of suggesting good categories for a site’s content and deriving its information architecture.

Card sorting can be used generate statistical data.

Issues

Providing participants with a trial run on some easy cards (e.g. sports, animals, etc.) can reassure about what they are expected to do and result in a more productive session.

Participatory design

What is it?

Participatory design does not just ask users opinions on design issues, but actively involves them in the design and decision-making processes.

When to use

Participatory design is usually used within a mini-project to generate prototypes that feed into an overall project’s design process.

An example would be a participatory design workshop in which developers, designers and users work together to design an initial prototype. This initial prototype would then feed into a more traditional design process.

Projects which only utilise participatory design are very rare.

Issues

Participatory design sessions can be very fluid and require an experienced moderator with thorough knowledge of the domain to guide them.

Questionnaires

What are they?

Questionnaires are a means of asking users for their responses to a pre-defined set of questions and are a good way of generating statistical data.

When to use

Questionnaires are usually employed when a design team:

• Can only gain remote access to users of a site

• Is seeking a larger sample size than can be realistically achieved through direct contact

It is for this reason that questionnaires are usually administered through post or electronic means.

Issues

Questionnaires allow statistical analysis of results, which can increase a study’s credibility through its scientific appearance. This makes it all the more important that the questionnaire is well-designed and asks non-biased questions.

Interviews

What are they?

An interview usually involves one interviewer speaking to one participant at a time.

The advantages of an interview are that a participant’s unique point of view can be explored in detail. It is also the case that any misunderstandings between the interviewer and the participant are likely to be quickly identified and addressed.

The output of an interview is almost exclusively non-statistical – it’s critical that reports of interviews are carefully analysed by experienced practitioners.

When to use

Interviews are usually employed early in the design process in order to gain a more detailed understanding of a domain/area of activity or specific requirements.

Issues

Interviewing places a high premium on the experience and skill of the interviewer and analyst.

Conclusion

This has been an introduction to the major user-centered design methods. It’s vital to remember that although each can be extremely valuable, using them in the right way, for the right reasons and at the right time is critical.

Exactly which method to use, and when and how to use it will differ from project to project.

This article was written by Tim Fidgeon, Head of Usability at Webcredible. He’s crazy about usability and runs Webcredible’s web usability training and writing for the web training.

The secret benefit of accessibility part 2: A higher search engine ranking

An additional benefit of website accessibility is an improved performance in search engines. The more accessible it is to search engines, the more accurately they can predict what the site’s about, and the higher your site will appear in the rankings.

Not all of the accessibility guidelines will help with your search engine rankings, but there are certainly numerous areas of overlap:

1. ALT descriptions assigned to images

Screen readers, used by many visually impaired web users to surf the web, can’t understand images. As such, to ensure accessibility an alternative description needs to be assigned to every image and the screen reader will read out this alternative, or ALT, description.

Like screen readers, search engines can’t understand images either and won’t take any meaning from them. Many search engines can now index ALT text though, so by assigning ALT text search engines will be able to understand all your images.

2. Text displayed through HTML, not images

Text embedded in images appears pixelated, blurry and often impossible to read for users utilising screen magnifiers. From an accessibility point of view this should therefore be avoided.

Search engines equally can’t read text embedded in images. Well, you can just give the image some ALT text, right? Unfortunately, there’s strong evidence to suggest search engines assign less importance to ALT text than they do to regular text. Why? Spammers. So many webmasters have been stuffing their ALT tags full of keywords and not using them to describe the image. Search engines have cottoned on to this form of spamming (as they eventually do every form of spamming) and have taken appropriate action.

3. Descriptive link text

Visually impaired web users can scan web pages by tabbing from link to link and listening to the content of the link text. As such, the link text in an accessible website must always be descriptive of its destination.

Search engines place a lot of importance on link text too. They assume that link text will be descriptive of its destination and as such examine link text for all links pointing to any page. If all the links pointing to a page about widgets say ?click here?, search engines can’t gain any information about that page without visiting it. If on the other hand, all the links say, ?widgets? then search engines can easily guess what that page is about.

One of the best examples of this in action is for the search term, ?miserable failure?. So many people have linked to George Bush’s bio using this phrase as the link text, that now when miserable failure is searched for in Google, George Bush’s bio appears top of the search rankings!

4. Website functions with JavaScript disabled

JavaScript is unsupported by about 5% of web users (source: The Counter), either because they’ve turned it off (for example to prevent pop-up adverts) or because their browser doesn’t support it. Many forms of JavaScript aren’t accessible to web users utilising screen readers.

Search engines can’t understand JavaScript either and will be unable to index any JavaScript-driven content. Perhaps more importantly, they’ll also be unable to follow JavaScript-driven links. You may really like the look of your dropdown menu but search engines won’t if they can’t access certain pages on your site because there aren’t any regular links pointing at them.

5. Alternatives to Flash-based content provided

Flash, like JavaScript, isn’t accessible to many users, including those using screen readers. Equally, search engines can’t access Flash so be sure to provide equivalents.

6. Transcripts available for audio

Hearing impaired users obviously require written equivalents for audio content to be able to access it. Search engines too can’t access this medium, but transcripts provide them with a large amount of text for them to index.

7. Site map provided

Site maps can be a useful tool for visually impaired users as they provide a straightforward list of links to the main pages on the site, without any of the fluff in between.

Site maps are also great for search engines as search engines can instantly index your entire site when they arrive at the site map it. Next to each link you can also provide a short keyword-rich preview of the page. All links should, of course, be made through regular HTML and not through JavaScript (see 4. above).

8. Meaningful page title

When we arrive at web pages the first thing that appears, and the first thing that visually impaired users hear, is the page title. This latter group of web users don’t have the privilege of being able to quickly scan the page to see if it contains the information they’re after, so it’s essential that the page title effectively describes the page content.

If you know anything about search engine optimisation you’ll know that the page title is the most important attribute on the page. If it adequately describes the content of that page then search engines will be able to more accurately guess what that page is about.

9. Headings and sub-headings used

Visually impaired web users can scan web pages by tabbing from heading to heading, in addition to tabbing from link to link (see 3. above). As such, it’s important for accessibility to make sure that headings are correctly marked up by using <h1>, <h2> etc.

Search engines assume that the text contained in heading tags is more important than the rest of the document text, as headings describe the content immediately below them. Search engines assign the most importance to <h1>, then <h2>, and so on. Make sure you use the heading tags properly and don’t abuse them, as the more text you have contained in heading tags, for example, the less importance search engines assign to them.

10. CSS used for layout

Screen readers can more effectively work through the HTML code of CSS-based sites as there’s a greater ratio of content to code. Websites using CSS for layout can also be made accessible to in-car browsers, WebTV and PDAs. Don’t underestimate the importance of this – in 2008 alone there’ll be an estimated 58 million PDAs sold worldwide (source: eTForecast).

Search engines also prefer CSS-based sites and are likely to score them higher in the search rankings because:

• The code is cleaner and therefore more accessible to search engines
• Important content can be placed at the top of the HTML document
• There is a greater density of content compared to coding

Conclusion

With all this overlap between web accessibility and search engine optimisation there’s no excuses for not implementing basic accessibility on to your website. It’ll give you a higher search engine ranking and therefore more site visitors.

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He’s extremely good at web accessibility training and knows an awful lot about the Disability Discrimination Act.

Don’t submit your website to any search engines

That’s right – this search engine optimisation article is telling you not to submit your website to any search engines. Not Google, not Inktomi, not AltaVista. Sound a bit strange? Read on…

Submitting your website to every search engine is an incredibly time-consuming process. There are hundreds and hundreds of them out there – no doubt, you’ve come across the companies who’ll submit your website to 1000 search engines for you.

Search engine professionals know that the vast majority of these search engines have a very low usage rate and will drive hardly any traffic your way. In fact, it’s only a handful of search engines that drive the majority of traffic from search engines to websites.

Some of the most important search engines, probably accounting for over 90% of the search engine market, are:

• Google
• Yahoo! (read about Yahoo!’s new search engine)
• Inktomi
• Teoma
• Fast
• AltaVista

Not heard of some of these search engines? Have a look at who powers who with this excellent search engine relationship chart.

Please note that the new MSN search engine will roll out at the end of 2004 and will be very important.

?But there’s only six of them – why on earth not!?? Well, aside from saving time and a bit of money (some require a submission fee), quite simply there’s no need. Allow me to explain…

Search engines crawl the web every few weeks (or months) looking for websites to index. Here’s how it works:

• Search engines start at one website with a large number of outbound links (usually a directory)
• They follow every link they come across, indexing each page they arrive at
• Once a page has been indexed they follow all the links from that page
• And so on until there are no more links to follow

Unless today is your very first day on the Internet, you might have heard that inbound links into a website are extremely important in establishing its search engine ranking. If a search engine can’t find you by itself through crawling the web, then your website doesn’t have any inbound links. If so, you’ll never achieve a decent search engine ranking so what’s the point in registering?

So, how do you get incoming links? Well, this is a vast topic which I won’t be discussing now, but if you want to get a few good links quickly then there is a solution: web directories. If your website is listed in the Yahoo! directory (not the same as Yahoo! search) and the Open Directory (which Google uses) all the search engines should find you within two to three months.

There are plenty of other directories you should get listed in too. Global, local and industry-specific directories abound on the Internet. To find them run a search for ?web directory? on your favorite search engine. The directories that come up highest in the search rankings will probably generate the most traffic. You can also check these directories of directories:

• Open Directory’s directory of web directories
• Search engine colossus
• Best Free Directories
• Internet search engine database
• Business Directory

Another even quicker solution is webmaster forums. Search engines love forums because they include so much fresh content. Most have an area where you’re allowed to enter your URL to get feedback from other webmasters. Find some forums, sign up, and get posting!

To find out more about building up links to your website please read the article, Build up links to your website.

It can take a couple of months to get listed in some web directories. If you can’t wait that long then it might be worth submitting your site into a paid program and “artificially” boosting your rankings. Again, this is a whole new topic so please feel free to read more about the paid submission options.

Search engine optimisation is a long term strategy. You’ll be successful if you:

• Structure your pages correctly by positioning your keywords in effective places
• Build a great site with unique content that other websites will want to link

Register with as many web directories as possible and then concentrate your efforts on these two things. Within a few months you’ll start to see success.

This article was written by Trenton Moss. He’s crazy about web accessibility and usability – so crazy that he went and started his own web accessibility and usability consultancy, Webcredible, to help make the Internet a better place for everyone.

What are focus groups?

A focus group involves encouraging an invited group of participants to share their thoughts, feelings, attitudes and ideas on certain subject. Organising focus groups within an organisation can also be very useful in getting buy-in to a project from within that company.

When and why to use focus groups

Focus groups are most often used as an input to design.

Advantages of focus groups include:

• Quick, cheap and relatively easy to assemble
• Good for getting rich data in participants’ own words and developing deeper insights
• People are able to build on one another’s responses and come up with ideas they might not have thought of in a 1-on-1 interview
• Good for obtaining data from children and/or people with low levels of literacy
• Provides an opportunity to involve people in data analysis (e.g. “Out of the issues we have talked about, which ones are most important to you?”)
• Participants can act as checks and balances on one another – identifying factual errors or extreme views

Limitations of focus groups include:

• The responses of each participant are not independent
• A few dominant focus group members can skew the session
• Focus groups require a skilled and experienced moderator
• The data which results from a focus group requires skill and experience to analyse

How to plan and prepare for focus groups

Invite around 6 to 8 people to participate for a session to last for about an hour. Then, prepare an agenda including a list of the top-level issues to be tackled (if appropriate).

Prepare an introduction script explaining the purpose of the day and how the day will be run. This can include issues of consent and fire regulations (if relevant). Be sure to always use a quiet room with few distractions and arrange people in a circle (possibly around a table).

Running focus groups

If appropriate, ask the participants to introduce themselves and/or wear name tags. Most importantly, all questions you ask should be open and neutral. It’s also important for the moderator to be aware of participants’ energy and concentration levels and provide short breaks if necessary. The moderator should encourage free-flowing discussion around the relevant issue(s).

Other tips for running focus groups include:

• Start on an issue people have strong feelings about and are familiar with
• Phrase issues in terms people will be familiar with
• Let participants know their contributions are valuable (both through what you say and also your body language)

It’s also important that the moderator realises that:

• It may be necessary for them to step in and keep the session on-track
• Disagreements and debates are useful when they lead to new and interesting ideas, but have to be managed carefully
• Issues of power and privacy need to be managed sensitively

Focus groups should end with the moderator winding-up the session by stressing all that has achieved and casting it in a positive light.

Managing risks

A number of potential problems could arise during focus groups, which will all need addressing:

• If one participant tries to dominate the session, the moderator should invite each person to speak in turn
• Avoid interviewing friends in the same group as they can form cliques – if cliques do form, suggest taking a break and changing seating positions upon returning from the break
• Avoid personal confrontation – allow the group to police itself (e.g. “do others in the group agree?”)
• Respect someone’s right to be quiet, but do give them a chance to share their ideas 1-to-1 (e.g. during a break)
• Use differences of opinion as a topic of discussion – the moderator should avoid taking sides

Useful tips to encourage discussion

To facilitate useful, free-flowing discussion during the focus group, follow some of these tips:

• Ask participants to think about an issue for a few minutes and write down their responses
• Ask each participant to read, and elaborate on, one of their responses
• Note the responses on a flipchart/whiteboard
• Once everyone has given a response, participants will be asked for a second or third response, until all of their answers have been noted
• These responses can then be discussed

How to report

The minutes, or a summary document, should be produced for each session. A report should be written up, containing relevant profile information about the people who attended the session.

This article was written by Tim Fidgeon, Head of Usability at Webcredible. He’s crazy about usability and runs Webcredible’s writing for the web training and is passionate about user centered design.

Mobile phone and PDA usability testing is critical to your business. In fact, mobile and handheld usability testing could be even more important than computer-based usability testing. The main reasons for this are:

• The number of people accessing the Internet from mobile and handheld devices is increasing at a massive rate – in 2008 alone there’ll be an estimated 58 million PDAs sold worldwide (source: eTForecast).
• People generally have a lot less experience of using their mobile to go online than they do of using their computer. This means that computer-based users can be assumed to have a higher level of existing expertise than mobile and handheld users
• The platform through which users access your site is far less predictable when using mobile phones. Computer-based site visitors generally only differ from one another in their browser and operating system (i.e. most people will use a screen, mouse and keyboard), whereas the different types of mobile phones and PDAs differ can drastically.

Which mobile phones and PDAs do you need to consider?

Mobile phones and PDAs can differ from one another dramatically, and this will radically change how people experience and use websites. Some of the ways in which handheld devices can differ include:

• Screen size (small vs. large)
• Screen layout (portrait vs. landscape)
• Input device (stylus, numeric keypad, dial-wheel, QWERTY keypad)

Because the mobile phone / PDA that someone is using will have such a profound effect on their experience of your site, you should try to test with as many mobile phones and PDAs as possible.

Of course, testing with every mobile phone and PDA is impossible. Here are some ideas to help narrow down the number of devices you’ll need to test with:

• Your mobile site visitors may belong to a specific audience. Certain audiences tend to prefer particular types of phones (e.g. phones with big screens that are designed to support online access vs. small-screen models that aren’t).
• There are ‘phone families’ that offer a very similar user experience (and will not need to be tested individually).
• You may only want to test with the most popular mobile phones in Europe or the most popular models that are being used to access your site (you can check your site statistics to find out this information).

Who do you want to test with?

The people you want to conduct your mobile phone usability testing sessions with will, of course, depend on your particular business and its audience. Some things to bear in mind include:

• How much experience they should have of using their mobile phones to access services. This is particularly important as the market for accessing online services through mobile phones is growing and the percent of ‘complete novices’ (i.e. people using the technology for the first time) will be far higher than for computer users of your website.
• Which mobile phone or PDA they have. We would usually recommend that people use their own mobile phone in a session, so the test can focus on your website and not on the way the handheld device works.

Where should mobile usability testing sessions be conducted?

Mobile phones and PDAs are used in the real world so usability testing of handheld devices should therefore not only take place in a usability laboratory.

Where, when and how a mobile phone is used is critical to a person’s experience of the site they are accessing. Any of the following circumstances could influence this experience and therefore considerations of the site’s usability:

• Lighting
• Background noise
• Distractions
• Concurrent tasks (i.e. anything the person is doing at the same time)
• Physical movement

As such, we’d recommend, if possible, that any mobile phone and PDA usability testing is conducted both in a laboratory and also in the ‘outside world’.

How you plan and run mobile phone usability sessions will be based on your business and its audience, but the most popular methods of mobile usability testing include:

• Lab-based (using a camera to record the session)
• Diary-studies (asking people to keep a diary of how they have used their mobile phone and any problems they encounter)
• Paper prototypes (running usability testing on a paper-based version of the site, using mobile phone screen-sized pieces of paper)

This article was written by Tim Fidgeon, a consultant at a leading usability and accessibility consultancy, Webcredible. He’s extremely good at running focus groups and likes to conduct a website review as often as he can.

Although CSS layouts have been around for years, they haven’t become so commonplace until recently. This was basically due to limited browser support (especially from Netscape 4) – nowadays though, CSS 2.0 (which introduced positioning) is compatible with over 99% of browsers out there (check out the browser stats over at The Counter).

So, why should you convert your website from its current table-based layout to a CSS layout? It’ll make you money. Simple really. And here’s four reasons to explain why:

Reduced bandwidth costs

Web pages using CSS for layout tend to have much smaller file sizes than those using tabular layouts. It’s not unusual to see reductions of 50% or more in file size when switching from CSS to tables. Smaller file sizes obviously mean reduced bandwidth costs, which for high traffic sites can mean enormous savings.

The main reason for this dramatic decrease in file size is that presentation information is placed in the external CSS document, called up once when the homepage loads up and then cached (stored) on to the user’s computer. Table layouts on the other hand, place all presentation information inside each HTML, which is then called up and downloaded for every page on the site.

Additionally, CSS can be used to replace JavaScript image rollovers, again allowing a large reduction in overall page size. See the article, CSS navigation menu for more on this.

A higher search engine ranking

A CSS-based website will appear higher in the search engine rankings for three reasons:

• The code is cleaner and therefore more accessible to search engines
• Important content can be placed at the top of the HTML document
• There is a greater density of content compared to coding

A higher search engine ranking means more site visitors, which, provided your website is usable, should lead to an increase in enquiries or sales.

Faster download speed

A faster download speed will make you money? Well, yes. Slow download speed is often cited as one of the biggest usability complaints for websites. A faster download speed therefore leads to increased usability, and a web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson).

CSS downloads faster than tables because:

• Browsers read through tables twice before displaying their contents, once to work out their structure and once to determine their content
• Tables appear on the screen all in one go – no part of the table will appear until the entire table is downloaded and rendered
• Tables encourage the use of spacer images to aid with positioning
• CSS generally requires less code than cumbersome tables
• All code to do with the layout can be placed in an external CSS document, which will be called up just once and then cached (stored) on the user’s computer; table layout, stored in each HTML document, must be loaded up each time a new page downloads
• With CSS you can control the order items download on to the screen – make the content appear before slow-loading images and your site users will definitely appreciate it

Increase in reach

The more people you can reach, the more visitors you’ll get to your site and the more enquiries or sales you should get. A CSS-based website is compatible with PDAs, mobile phones, in-car browsers and WebTV. Don’t underestimate the importance of this: In 2008 alone an estimated 58 million PDAs will be sold (source: eTForecast) and one third of the world’s population will own a wireless device (source: ClickZ).

You can make an additional CSS document specifically for handheld devices, which will be called up in place of the regular CSS document, thereby ensuring your website is accessible to this lucrative market. This isn’t possible with a tabular layout.

Conclusion: Switch to CSS!

Switching your website from a table layout to a CSS layout can be a long, arduous process, especially for large websites. Given the money making possibilities though, it could very well prove to be well worth it.

This article was written by Trenton Moss, founder of Webcredible, a web usability and accessibility consultancy. He’s extremely good at usability testing and knows an awful lot about accessible CSS web design.