For many developers, launching a site is not the end of the design process. To continually improve the success of their design, these developers turn to A/B testing. This relatively simple process can teach you loads about what your users are looking for as well as what they ignore or find unimportant.
Today we’ll take a quick look at what A/B testing is, the benefits of implementing it, and some tools to get you going.
March 9th, 2010 Posted in Accessibility, LayoutsToday we’ll be looking at how to add keyboard navigation to a website using a few simple lines of JavaScript. First we’ll create a simple site theme in Photoshop and then transform it into a working website that uses keyboard functions to switch pages.
November 30th, 2009 Posted in Accessibility, CSS, HTMLUsability isn’t an exact science. What one visitor considers helpful another considers annoying. Despite this uncertainty and complexity, you should always strive to make your site as accessible as possible to the people you’re trying to reach. You’ll find that a little bit of catering to the special needs of a minority of users can drastically improve the function of your site for all users. Here’s our list of twelve accessibility pitfalls to avoid along with some examples showcasing sites that either excel or fail miserably in these areas.
November 18th, 2009 Posted in AccessibilityClassic 404 error pages are prone to being relatively useless. Whilst a well designed page can provide a means to find what they are looking for, wouldn’t it be great if you could find out more about what went wrong? This tutorial will show you how simple it is to have an explanatory email sent to you whenever a visitor hits a 404 page.
June 4th, 2008 Posted in Accessibility, ArticlesA sure sign of a rock solid, well coded CSS layout is that it displays consistently across browsers and platforms. A look at recent global browser stats shows that, while Internet Explorer continues to be the most popular web browser in general use, its user base is fairly evenly split between versions 6 and 7.
And although other browsers such as Firefox, Opera and Safari have a relatively small share of the browser market, it would be unwise for any web designer or developer to ignore them when testing their work.
March 7th, 2008 Posted in Accessibility, Articles, SoftwareThe standard 404 error page can often be really frustrating for readers. Using a simple .htaccess file can allow you to customise your error page, and ensure that users are displayed a useful alternative.
July 31st, 2007 Posted in Accessibility, Articles, HTMLMany web professionals use Apple’s OSX for design and despite what you may think, it’s not difficult to test your website in the big three browsers – Internet Explorer, Firefox and Safari. This article talks you through how to easily test your site and gain access to these browsers on a Mac.
July 26th, 2007 Posted in Accessibility, Articles, SoftwareSemantics is a word which strikes fear into many a designer’s heart, but it need not be a difficult or complicated topic. It concerns meaningful expression, avoiding presentational markup and using appropriate and meaningful tags where possible.
Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:
Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.
It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.
By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.
It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.
Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.
Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!
July 16th, 2007 Posted in Accessibility, Articles, CSS, HTML, Web StandardsWe all know that building accessible designs is important, but how many of us really take it into account when crafting a site? Here are some simple and effective steps for making your site accessible for everyone.
Validating your code can often lead you to discover problems which you didn’t notice before. Things such as unclosed and mis-typed tags which look fine in your browser, but could cause problems when viewed by others. The main two tools you need to use are a XHTML Validator and a CSS Validator.
Not everyone has images turned on in their browser, and many people use text-to-speech programs as they suffer from sight problems. Providing alternative text for images through the alt attribute ensures that images have a description and can be made sense of by visitors. It also helps you site when being indexed by search engines.
As with images, many people browse with JavaScript turned off (almost 6% at the time of writing). This is a fairly high number, and it’s worth ensuring that your website functions correctly without JavaScript. Relying too heavily on it can alienate certain people in your audience.
As a website which showcases and promotes the use of Cascading Style Sheets, it’s not surprising to see them mentioned here. Using CSS keeps your pages clean from formatting, and ensures that browsers are able to add their own rules to make pages higher contrast and more easily viewed.
Why not make a second style sheet for your website which reduces or removes the colour, and makes everything higher contrast. Place the link to activate this style near the top of the page so that hard of sight users can see benefit from the content on your website.
Rather than simply writing “click here” or “read more”, make your links more descriptive. We all fall into this trap from time to time, but a meaningful link can be understood much more easily and improves accessibility.
Rather than making people scroll down past the repetitive header on every page of your website, include a link which allows them to skip to the main content lower down the page. This saves time, especially on text-to-speech browsers which read out all the information on the page.
Correctly labeling the inputs on your forms will allow them to be interpreted and filled in much easier by accessible browsers.
Whilst it’s tempting to link to other websites in a new window, it really is bad practice. Everyone knows how to use a “Back” button, but when the need arises to close windows and keep track of several at once many web users can be confused and annoyed.
Having a statement on one page of your website will show people what accessibility features you offer, and explain how they can navigate around your site easily. Explain how to turn on your high contrast style sheet, and where your “Skip to content” links are. People will be grateful for you explaining it to them clearly.
May 30th, 2007 Posted in Accessibility, Articles, CSSEveryone needs to have an idea of what web accessibility is, and how they can make their site available to everyone. It’s not just about catering for disabled users, but to anyone with a web connection. Ignoring web accessibility is shooting yourself in the foot, alienating large numbers of potential readers.
The idea behind web accessibility is ensuring that everyone, regardless of their platform, browser or personal situation can easily browse your website. This often (but not always) involves the need for the following things:
Obviously, designing our websites with disabled users in mind is an important task, and something we shouldn’t take lightly. But the fact is that web accessibility applies to so many other areas as well. If you’re browsing websites on your iPhone, 3G Phone or even WAP mobile, you’d better hope that the designer considered accessibility when putting the site together. Nowadays, people can browse the internet on a TV or game console, kiosk machine, handheld computer, or even a fridge! Ensuring your designs are accessible mean that you don’t prevent these people from visiting your site.
Disabled users struggle when accessing websites for many reasons. Those who have sight problems won’t be able to pick out your intricate colour scheme, so providing an alternate – high contrast – CSS document will allow them to see your site clearly. Distinguishing links may also be a problem, so providing clear roll-over effects makes it obvious what can be clicked.
For the same reason, text-to-speech browsers are available which read out the contents of a web page to the visitor. Using ALT text for images and clearly labeling links is vital here, so that someone can navigate your website without actually having the visual elements.
People commonly also struggle to use a mouse and keyboard easily, and so use voice controlled browsers and software.
According to W3Schools, around 6% of web users have Javascript turned off in their browser, or use a browser which doesn’t support it. This alone is enough of a reason to consider what your website looks like without Javascript, or other technologies such as CSS, Multimedia, Flash etc.
In May-June of 2001, about 38% of adults with disabilities used the Internet at home, compared to about 56% of adults without disabilities, a gap of 18 percentage points. In December 1998, about 7% of adults with disabilities used the Internet at home, compared to about 26% of adults without disabilities, a gap of 19 percentage points. In that 2.5 year period, the rate of home Internet use increased by more than 400% among persons with disabilities ( from 7% to 38%), compared to about 200% among persons without disabilities (from 26% to 56%). If the Internet use by persons with disabilities continues at the same growth rate, it should match the Internet use of the non-disabled in a few years.
(*Source: National Organization on Disability, 2001)
This excerpt from CSUN shows that a large percentage of disabled people do use the internet, and that it is continuing to grow yearly. In the USA, around 7 percent of internet users are registered as having some form of disability. It’s vital not to forget about this section of your audience, and consider accessibility in design.
May 15th, 2007 Posted in Accessibility, Articles