But what if your site’s visitors are split into groups with distinct and very different needs and different intellectual abilities? How does a single website serve both people with a learning disability, and health and social care professionals? Let’s see how the Mencap website – a design I particularly admire – successfully tackles this.

Using video

Mencap’s home page engages the eye with a huge image of one of their clients and a quote from him. At this stage you’ll still see the rest of the home page and all the menus. Click the photo and you get a smoothly animated transition to a video of Ronnie talking about how he’s in charge of his own budget. This is a case of choosing the right medium for the right audience: video and audio allow Mencap to provide information without using a lot of text. Video is also used to tell stories and share clients’ own point of view throughout the website, including the sections for professionals and families: that strikes me as a good idea because it helps to reinforce the person-centred approach of the organisation.

Presenting information for people with a learning disability

Now notice the four large links and click the one that says My Life. Easily understood words that link to a landing page that’s obviously still on the same website, with the Mencap logo, but which has none of the usual navigation menus. In this section – obviously aimed at clients rather than professionals – we find limited text, just a few large links (including one back to the home page) and great use of video and audio. Notice how the Mencap logo’s colour has been used to indicate which page you are currently on. Minimalistic web design is used because it meets the users’ needs, not just because it looks good.

A more complex page layout for professionals

Now, back on the home page, click the big link that says Professionals and you get a very different experience. In this section you get all the navigation menus, plenty of text, more complicated sentences and jargon appropriate to the professionals using the website.

Resources

If you’re planning or designing a website for learning disabilities, what should you be reading? Start with some detailed advice from the Foundation for People with Learning Disabilities (make sure you click the More Information link).

Then take a peek at Antonia Hyde’s slideshow about Rich media and web apps for people with learning disabilities.

Mencap
They call themselves “the voice of learning disability” and their website makes good use of quotes, portraits and videos of their members. The language used on the website is deliberately kept simple and the navigation is minimal compared to many websites.

Action for Blind People
Proof that an accessible website can be visually interesting. Look at the way the page scrolls but the icons for changing the viewing preferences always remain visible. Good use of minimal colour as a navigational aid. Again, a very prominent donation button.

Shelter
The fifth most visited charity website of 2006 according to Hitwise. Hover over the items in the navigational menu and see how each one expands and contracts to display further links: that’s a great way to pack a lot of information into a small space. They’re very keen to sign you up for their newsletter, find out more about their work and to join them on social networking websites, and the language used on the home page is very much a call to action.

Red Nose Day
International development, domestic violence, poverty … and comedy. I can just image the meetings they had trying to get the tone of this website right. But it very successfully balances the serious with the funny in another website with a hand-drawn look to it. The colour scheme, a mix of reds, greys and black, is instantly recognisable.

Action for Children
Hand-drawn websites seem to be very in fashion lately and here’s another one. It’s perhaps an obvious choice for a children’s charity and it’s carried off here with some humour and playfulness. I particularly like the way their tagline is scrawled along the top and merges with the search form.

The Nominet Trust
Simple but effective. Cute and appropriate use of cartoonish icons and clever use of hover effects on the navigation menu to turn what could have been a dull website into an enjoyable experience. It helps that the content is short, to the point and well-written.

And the rest…

Which UK charity websites have I overlooked? Please leave a comment with your personal favourite.

This request is mainly for smaller charities, many of which don’t have decent quality logos. Please get your logo fixed. Not it won’t just benefit your website but also your signage, your newsletter and any other kind of publicity. Unless you have a talented volunteer graphic designer handy, there will be a cost – but it’s worth it. 

• Your logo should be prepared by a graphic designer (not a kid doing a school project).
• It must legible in both colour and black and white. Try it out in different colours.
• It should look good whether displayed really small on a website or huge on a signboard.
• How small? How about 16 pixels high and 16 pixels wide.
• Logos that incorporate more than a few words of text into the design rarely work well but your logo should look good when placed near other text. By the way, does your charity have an effective tagline?
• Your logo should be designed in a vector format to allow it to be scaled up or down with no loss of quality.
• The best logos are very simple.

Smashing Magazine has an article on the 10 Common Mistakes in Logo Design that you should read and more recently they’ve published Vital Tips for Effective Logo Design.

Here are 50 of the best charity website favicons:

The best Favicons are miniature design wonders, summing up a website using only the minimum of space. They are also a test of a good logo: could you reduce your logo to 16 pixels high by 16 pixels wide and still recognise it? Here are some of my favourite Favicons from charity websites: clicking on them will take you to the website itself. You can probably guess the identity of some of these charities just from their icon.

So, do you want a Favicon? Find out from the Wild Apricot blog how to add a Favicon to your website?

The competition was called Full Code Press and pitted an Australian team against a New Zealand team. Team members were thrown together to design a nonprofit’s website and had only a day to plan and design it. Someone involved described it as a geek Olympics!

The New Zealanders designed the disability advocacy website and the results look impressive, it’s a clean and modern design with good use of colour and its accessibility credentials are excellent. The team made the decision to build their own content management system (CMS) in PHP. Inevitably with any product designed so quickly there were going to be bugs, many of which were fixed after launch. A year and a half later the Association has a few ongoing problems with making content edits and with a member registration form that doesn’t register members.

The other team decided to use the Drupal CMS and I wonder whether that wasn’t a better long-term solution? Support is a big issue when you commission your website, who’s going to sort out any problems that arise? There are plenty of Drupal (and Joomla and WordPress) developers out there who can help you.

The interviews with the team leaders on the Full Code Press home page are well worth a read to get some idea of how decisions are made within a creative but pressed for time web development team.

The d’bug blog lists 10 inspiring and beautiful non-profit web designs. I especially liked the New York City Coalition Against Hunger website. Take a look at its Google Maps mashup which helps you find local soup kitchens. The blog is very relevant, commenting on the progress of legislation and current hunger and poverty issues. Interesting photo gallery too, using Flash to display postcards of the faces of hunger. Inspired yet?

On a contrary note, as Confessions of a Nonprofit Executive Director points out, web beauty is only skin-deep and whilst the 40 inspirational website all look great, they’ve not all been well coded (but read the comments to his article for some friendly disagreement).

On my last day as Baptcare’s website and Intranet editor, my final task was to create a landing page for their charity golf event.

Here’s the result, designed and coded with valid HTML within only a few hours. The design has simple, attractive typography using Baptcare’s corporate colours. However, this landing page looks nothing like the usual template used elsewhere on the Baptcare website, it’s a complete one-off. Baptcare’s usual template is too restrictive, not eye-catching enough to use as a landing page.

What is a landing page? Usually it’s defined as a page that visitors will arrive at directly via an advert or link on another website. A landing pages might not be linked to from an organisation’s own site at all, only from banners or adverts on external sites or from ads on postcards or other printed media.

The golf event page provides links to only two locations: a rollover button and the words “Register Now” in large text, both link to the same PDF brochure; and in the footer is a link to the Baptcare home page. No distractions, just information.

So that was the landing page set up, but how did I make sure that it actually gets landed on? Using our Google Grant I set up multiple free adverts, like the one below, that link to the landing page.

Plus, on the home page of the Baptcare website is a big button that links to the landing page. If anyone reads about the golf day in our newsletter, then visits the website to find out more, they can’t miss it!

An Intranet is like a website except that it’s only available to people working within the organisation. It’s used to share information internally rather than to publicly promote the organisation’s services. Recently I redesigned Baptcare’s Intranet home page.

The Intranet after its redesign

This is what the Intranet’s home page looks like since I redesigned it:

And what the Intranet looked like before its redesign:

Bear in mind this is an Intranet, not a public website. It will only be used by staff, who see it every day and mostly use it to find information, forms and procedures. It needed a redesign but what were the main problems and how were they solved?

Wasted space

A huge photo took up most of the home page, wasting space that could be used to provide useful information.

The design was simplified. The huge photo was removed and replaced with a much smaller image that actually had some relevance to our recent activities.

Legibility

The “quick links” section at the bottom-right was nearly illegible, with small text and not enough contrast between text and background colours. The menu buttons on the left-hand side were also difficult to read because a patterned background had been used.

Menu buttons were made clearer by removing the patterned background and separating them from other images. Actually the buttons are a single image, with an accessible html image map that enables visitors to click through to other pages.

The redesigned home page has a larger font-size. Darkgrey text on a white background makes it much easier to read than before.

Out of date

The home page was very static with little in the way of new content. Therefore staff might have assumed that nothing new was being published on the Intranet.

The home page now automatically displays the most recent news items, events, vacancies and announcements as they are published in various sections of the Intranet. Automation has cut down on the amount of duplication involved.We also added an email link at the bottom of the page so that staff can suggest changes and send the editor new content for the site.

Difficult to find information

A real problem on an Intranet. Links were difficult to read, there were links to empty pages and the search facility was broken.

I deleted all the redundant pages from the Intranet. The problem with the search facility was referred to Baptcare’s IT dept and to the web design company.

The technology

The Baptcare Intranet is based on IBM Websphere, a complex document management system. Redesigning the home page involved making changes to CSS and HTML and to various other files used in the Websphere templates.

There were limitations. I couldn’t make changes to the banner and menu at the top of the page because they have to stay the same as on other pages of the site.

The results

Staff were given no warning that the Intranet home page was going through a redesign but they couldn’t help but notice the next time they opened their browser. All the comments so far have been complimentary and staff have told me they straight away went to see what was new and discovered content they’d not been aware of before. The new home page has succeeded in making the Intranet more accessible.

Jason would be interested in helping you improve your Intranet – contact at jason@kingjason.co.uk.