Disqus

The Disqus commenting system is integrated into the site. Disqus gives the RSA more control over how they moderate conversations, as well as enabling visitors to sign in using their Facebook, OpenID, Twitter or similar logins rather than having to have a password specific to the RSA Comment website.

Despite some initial awkwardness when setting up the Disqus account, it seems to be working well and makes the site more user friendly and flexible.

WordPress plugins

We used a number of WordPress plugins including:

• Add to Any – click to share the post  on Facebook, social bookmarking sites etc
• Configurable Tag Cloud – big improvement over the tag cloud widget included in WordPress
• Google XML Sitemaps – gets your posts noticed almost immediately by search engines
• Theme Switcher – an easy way to enable users to switch to large text and high contrast versions of the site
• User photo – authors can have their photo next to their article
• TweetMeme Retweet button – quick and easy retweeting of posts on Twitter

Some of these plugins I’d used before and recommended, others were already in use on other RSA websites. The plugins we rely on most were all checked to make sure they’re both mature, popular, reliable and regularly updated.

Layout and branding

The site has a non-standard layout for a blog and incorporates multiple columns, multiple sidebars and a box for video. The home page layout was the most challenging aspect of the site, and it took time and effort to make the site properly across a number of browsers including Firefox, IE8, IE7, IE6, Safari, Opera and Chrome.

The branding had to match other RSA websites. Fortunately the RSA were able to give a detailed specification and closely monitored and commented on the look of the site as I was developing it.

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.

Their old website was just a single page with a few logos. They wanted something better, designed to match their colour scheme, with far more content. Importantly, they must be able to edit the content themselves and publish regular news items.

I designed the website using WordPress as the content management system (CMS). WordPress is an easy enough tool for the staff at Hounslow CVS to use to edit their website’s pages and posts.

The site was designed to make content easy to find: there’s a clear menu on the left which expands to show sub-sections; big can’t miss ‘em buttons at the top to direct visitors to the most-visited sections; and a search form immediately below the menu for those users who prefer searching to browsing.

The website is well-coded and its HTML validates 100%.  Care has been taken to ensure it’s accessible to disabled visitors, and important aspects such as font sizes and colour contrast have been considered.

I’m always interested in working with other CVS or similar nonprofit organisations – find out more about hiring me.

Initial funding came from Nominet, which maintains the .uk register of domain names and is one of the world’s largest Internet registries.

On 29th April 2009 the Nominet Foundation announced the first projects to be funded.

The first Nominet Foundation funded projects

The British Computer Association of the Blind (BCAB) will fund a remote access support project that will allow visually impaired people access to computers and the Internet and provide training on how best to use the technology.

Funding will support the Internet Society’s Internet Engineering Task Force (IETF) Fellowship and Internet Governance Forum Ambassadors programmes which aim to ensure the continued development and deployment of the Internet.

Childnet will use the funding to establish and run its Youth Internet Governance Forum Project, which aims to give young people the opportunity to voice their opinions on the four main themes of the IGF; openness, access, security and diversity.

Cambridge Global Grid for Learning will enhance its 4C project (Content, Connectivity, Collaboration and Capacity), which provides a free suite of online learning and teaching applications and content for learners and educators in educational institutions worldwide.

Cambridgeshire Library Learning Services will support staff working on its Community Access Points project, providing communities in isolated rural locations and areas of high social deprivation with free access to online education and support.

YouthNet will be running a major research project which will underpin a campaign to raise awareness of digital usage among young people.

The Foundation began accepting funding applications only fairly recently. Read more about the Nominet Foundation’s initial round of grants or more information about their funding criteria.

Back in Australia the FullCodePress competition to build two charity websites has announced its team members and attempted to answer a tricky question: are events like this damaging to the web development community? I don’t think that charitable one-off events like this are anything other than a good idea. They’re nothing like design competition websites such as 99designs.com which encourage cookie cutter designs for minimum pay. At FullCodePress and the Drupal competition, professionals are pooling their skills to create quality products at no cost, purely for the challenge and the social good.

The website was built around WordPress so that the charity can edit their own content. I designed the theme from scratch, mostly avoiding typical Irish colours.

The home page was customised so that it doesn’t display a list of blog posts as per the standard WordPress default template. It displays just the single most recent news item below the description of the organisation.

One of the major reasons for improving their website was to take donations online so I put a donate link into the banner at the top of every page. The charity uses the www.justgiving.com website to enable them to take donations and process Gift Aid.

The Ectopic Pregnancy Trust, an organisation that I’ve worked with on and off for the last eight years, commissioned me to design a new mini-website. The site gives women (and their partners) who have lost a child to an ectopic pregnancy, opportunity to light a candle and leave a message in remembrance.

Remembrance is such an important service to be able to offer and the Trust wanted to get this just right, so there was a lot of discussion and many minor changes made along the way. It’s a difficult area to work in because it deals with grief and so many other emotions. The site had to be carefully worded and the colours and imagery well-chosen. It was also important to reflect the branding of the organisation and encourage clients to make a donation to support the work of the Trust.

What tech was used?

I didn’t implement a CMS because I couldn’t find a product to do what we specifically needed. Instead I coded from scratch in PHP and MySQL. Every modification meant a new round of testing; fortunately the Trust has many active supporters who were happy to sign up as guinea pigs- and their help was invaluable in spotting bugs and creating a user-friendly application.

Looking back, would I do anything differently? Maybe, having explored the Drupal CMS lately and seeing how flexible it can be, I would have used it as the tool to enable people to subscribe and light candles.

Using Basecamp to manage the project was a good idea

Izzie at the Trust is a great project champion, she had a vision and convinced her organisation to fund it. She’s also a funny and frequent communicator. Because so much discussion was necessary, we used a great product called Basecamp to manage the project: Basecamp enabled me to uploaded the draft designs as JPGs and Izzie could comment on them; we made to-do lists and ticked them off as they were completed; Izzie uploaded text content so I could add it to pages; and now we have an archive of all the decision-making throughout the lifetime of the project.

If you’re going to use an online project management like Basecamp, here’s one tip: stop sending each other emails and do everything using Basecamp instead. If you want, Basecamp can email you every time a document or comment is added and it’s so much more convenient than searching through old emails trying to find an attachment.

The candle tributes

The site has been live for several months. Here are just two of the messages left on the website:

to our beloved who never made it….will never
forget the minute you made us smile.

Wanted in every way possible ,you fought so hard
but it wasn’t to be. Gone but never ever
forgotten.You are always in our hearts and we
think about you every day.xx

It’s not aimed specifically at techies, it’s easier to read and perhaps more relevant to charities than some other publications. It’s written in plain English and spells things out for you.

For example the current edition has an article on news feeds. It explains in simple language what feeds are, why they exist and how you can subscribe to them, and discusses whether you could offer them to your own website’s visitors.

The Caring Choices website is based on WordPress, a free and open source content management system. It enables The King’s Fund and its partners to publish pages and articles onto their website; and for visitors to the site to leave their comments; and for visitors to subscribe to receive new articles.

Although WordPress is best-known as a blogging tool, The King’s Fund did not want the website to look too much like a blog. So I customised the look and feel of WordPress to match the Caring Choices corporate image.

Visit www.caringchoices.org.uk and read all about the project in this article in the Guardian newspaper.