There are thousands of agencies taking this approach towards web design, treating a website not just as a piece of software development but as a whole project with real world concerns such as accessibility, usability and marketing.

If you compare a commercial company to a charity or not for profit, they all share the same goal when starting a project or campaign, to get people to part with their disposable income for a product or service they provide. The only real difference between them is their cause.

Commercial companies spend a lot of time and money on trying to get the user experience right to ensure visitors get the most out of the website, so the question is, are charities getting left behind?

The answer may very well be yes, but it doesn’t have to be. We see charities who are charged extortionate amounts by agencies just because the charities don’t know any better. Charities looking to create a new website or a specific campaign site need to do their research into what kind of web strategies work the best, and get a feel for how much websites should cost.

Designing for charities

For charity websites that want to pull people in for them to either donate or sign up for a membership there are some key design factors that can really make all the difference.

Clean layout

The site (especially the home page) should not over complicate things by making a user have to think about what they want to do. It should have clear and meaningful headings such as; Home, Join, Help, Donate, Contact, etc. Users will immediately know which section does what without having to search to find what they are looking for.

Clear call to action

If you are providing a call to action on the site such as ‘join’ or ‘donate’ it should be prominent on the homepage. This should be informative about exactly what a user is donating / subscribing to, how it will help and an ongoing tally of the total donations or members you have received so far. If you are aiming for a target make sure this is clear.

Page content

Imagery is key here, do not use stock imagery as users will know and won't necessarily connect with your cause. Instead use images of the subject of your charity, preferably this should be of the people you are helping - make sure to gain consent to use these images. On the home page try to summarise the work the charity is trying to do as simply as possible. This links back into the call to action of what you are donating to. If you want users to go to different sections of the website you should use questioning copy such as; “How many children suffer from malaria a year?“. This will help to promote curiosity and people will be interested to find out more.

Donation alternative

Bullet point all of the ways that people can assist where they don’t necessarily have to pay. This may be as simple as ‘tell your friends by sharing this link’ and will give people who are not able to donate another way to help you.

Newsletter

People might not want to donate or sign up at the time but may want to be kept informed of news, etc. A simple newsletter form should always be present to expand who you are able to market to. Consider sending out a monthly digest of information but make sure you offer the ability to unsubscribe.

Social Media Basics

Mostly everyone who uses the web utilises some sort of social media in some way. During the planning stages of a project and in the initial discussion on web strategy, charities should think about if they have someone who can spend some time each week engaging with social media and incorporate it into their role. Something small like a Facebook ‘like’ button or a ‘Tweet’ button on your website would mean you could grow a ‘fan list’ that you could put out content to, similar to a newsletter. The benefit of this over a newsletter is that you can put out one post at a time, rather than worrying about collating data to produce a fully fledged newsletter.

Social Media Advanced

Social media can be utilised further by creating interactive sections of a website that can be shared. A survey / poll could be used e.g. ‘What's my carbon footprint?”, and when a user receives their results it could be shared via Facebook or Twitter. The post would contain a link back to the charity website which friends of the user may click on and generate you more traffic. And let’s not forget that more traffic with a good user experience leads to more donation conversions. There are some massive examples of social network campaigns that reward users for getting their friends involved such as the Greenpeace campaign, VW Darkside. The rewards from this are not only virtual, i.e. turning it into a competitive game, but also physical rewards such as t-shirts for recruiting a certain number of people.

At Electric Putty we offer a broad range of services appropriate to charities from help with your web strategies to designing and building your website whilst taking all you and your users needs into account.

It's been quite a year both on and off the field, here are just a few high lights.

New team member

Without doubt the biggest news is that founding partners Malcolm and Mel had a baby back in October. Mel is currently away on maternity leave and little Viggo is certainly keeping her very busy, but she's still very much involved in Putty business and will be back a few mornings a week sometime in the new year.

Website launches

Our biggest project of the year was the redevelopment of the Army Cadet Force's website which we launched in October. Continuing our successful partnership with charity branding agency Spencer Du Bois, we developed a exciting new site aimed at raising their profile and boosting recruitment. Initial statistics suggest the project has been a great success.

In September we also launched a completely redesigned Reading Sight website, a project we originally worked on back in 2009. The new site went on to be nominated for the 2011 Jodi Awards where it picked up a commendation in the Digital Access Online category.

Technology

Our work with the ExpressionEngine content management system was recognised when we were accepted into their Pro Network, an exclusive list of companies who have displayed expertise in using the system.

We have also released our first commercial product, the Better Workflow add-on for ExpressionEngine. We initially developed this to fulfil the needs of our clients but quickly realised it potential. Since it's launch in October we have received some fantastic feedback from users and it has been nominated for Extenstion of the Year on the Devot-ee website.

Happy Christmas

We will be locking up Putty Towers for the holidays at the end of next week, but with Mel on maternity leave and Robin braving the north winds (he's going to Scotland) I'll be on my own for a few days. As the year draws to an end I'd like to say a big thank you to everyone we've had the pleasure of working with. Here's wishing you a very merry Christmas and we look forward to seeing you in 2012.

Best wishes,
Malcolm, Mel and Robin

P.S. We've just learnt that Better Workflow was awarded ExpressionEngine Extension of the Year 2011. We'd thrilled to bits of have won and want to thank everyone who has helped throughout year. A great way to round of 2011!

The Jodi awards are given by the Jodi Mattes Trust whose mission is:

"to promote the cultural equality of disabled people through the use of accessible digital media; the provision of accessible information and learning content; the involvement of disabled people in the process of creation, design and evaluation of digital media."

What are cookies?

Cookies are small pieces of code which websites leave on your computer. They help websites remember things about you so when you next visit your experience can be personalised. Say you set your location on the BBC's homepage so you got the right weather, that information would be stored in a cookie so when you went back, even months later, it would remember where you live.

Cookies have been around since the dawn of the internet and, in almost every case, they are used completely innocently. However, the new law requires that every website asks their user's permission before setting cookies and whilst the UK has given 12 months grace, website owners will need to take some action to avoid breaking the law.

Dose this effect me?

Regardless how your website is build it is extremely likely that it uses cookies in one form or another; less that 10% of websites don't. Any website which collects statistics using Google Analytics is setting cookies and if you have accessibility controls or a 'remember me' feature on your login, chances are you these will use cookies too.

What should I do?

Along with many of our industry peers our advice is don't panic. That's not the same as don't do anything, but the fact is there is a great deal of confusion about exactly what this law means and what action you need to take.

The Information Commissioner's Office (IOC), the orgnaisation responsible for enforcing the 'law', has lead by example and put a large 'opt in' box at the top of every page. This box stays visible until you click to confirm you are happy to accept its cookies (ironically this action will itself set a cookie so the website doesn't need to ask you again). This approach is still very much the exception and only time will tell whether this type of intrusive notification becomes the norm.

For now the best advice seems to be ensure you have clear information about what cookies are and exactly how they are used on your site on your Privacy Policy page. You should be able to link directly to this page from anywhere on your site. If you use Google Analytics you should mention this explicitily and also make your users aware that they can opt out of your statistic collection using Google's Analytics Opt-out Browser Add-on.

Further reading

• For more information about exactly what cookies are you can visit the Wikipedia page (be warned, it gets geeky very quickly)
• If you want to learn about how you can view and delete cookie take a look at www.allaboutcookies.org
• You can also read the ICO advice on new EU cookies law press release

The whole thing explained perfectly in 2.5mins

This is an in-house position and we are looking for a versatile developer, someone not afraid to try new things and step out of their comfort zone. As well as green field development the role will involve servicing our existing clients and working with a proprietary CMS.

We use ExpressionEngine for most of our website project, are members of the EE Pro Network and are currently developing an EE Add-on. Experience and understanding of this and the CodeIgniter framework would be a bonus but is not essential. In fact we're not looking for anyone who relies too much on frameworks; using jQuery is great, but we need someone who understands things at a deeper level and is able to 'roll their own' when the situation demands it.

Job overview

• Title: Web developer
• Duration: 3 month starting in August 2011
• Location: Working from our office at the Werks in Hove (some flexibility may be available)
• Salary: Based on experience

Job Description:

• Bring ideas, imagination and creativity to the development process
• Take a lead role in the development of content managed websites and applications
• Work on maintenance and development of existing websites and applications
• Work closely with technical director and front-end developer
• Participate in internal meetings

Skills

• Demonstrable experience working with Content Management Systems
• Advanced PHP and MySQL on Linux based servers
• Advanced JavaScript
• Excellent problem solving and learning ability
• Excellent organisational and communication skills
• Great attention to detail

Experience in any of the following would be nice to have:

• CodeIgniter or similar PHP framework
• Classic ASP
• jQuery
• Standards compliant HTML / CSS
• git version control system

How to apply:

Please apply to malcolm@electricputty.co.ukwith:

• CV
• A covering letter detailing the ways in which you fulfil our requirements
• Five URLs of recent work clearly stating for each your role on the project
• Salary expectations.

No agencies please

A new report by Race Online called 'Survive and Thrive' makes some interesting reading and gathers together some case studies that illustrate the point. They say that some of the benefits of moving services online are to;

• Cut costs
• Raise more money
• Build communities
• Increase your reach
• More vividly demonstrate your impact

Recently we have found more organisations and businesses are coming to us to help them take offline processes and turn them into online applications to realise some of these benefits.

One recent project was for Villiers High School. They wanted to streamline the application process for their 6th form, cut down on the administrative overhead and at the same time encourage more students to apply.

We have created them a step by step online application form with lots of help and instructions to help guide students through the process. They can save their application in progress and submit it when they have completed all the required details. Validation on the form means there are less mistakes and therefore less work for the Admissions team. Requests for references are sent by email through the system with referees completing a simple form with their reference. All this online; replacing a ton of paperwork and the accompanying to-ing and fro-ing between students, the Admissions team and referees.

Obviously you need to weigh up the cost of developing your online tool against the cost savings you are going to make but it's also worth considering the longer term benefits and the social return on investment too.

We always interested to help you think through the potential of any ideas you have so do please get in touch to discuss your project.

I haven't done any public speaking for a long time (I think the last time was 2004) but I'm really excited about this event. We've been working really hard on the Better Workflow Add-on and believe that it will be a really useful addition to ExpressionEngine. I know it's something our clients will really appreciate.

January and February saw us working in partnership with Spencer Du Bois on a new website for the international charity Plantlife. We were also helping Fairbridge re-brand with a front-end overhaul to their website and well as getting the Ambulance Leadership Forum up and running with some collaborative tools to help them manage their internal comms.

As the snow melted and that long, hard winter finally came to an end Rob Hodges walked into our office - quite literally. We were looking for someone to join the Putty family and Rob's experience and skills fitted the bill perfectly.

The summer saw an exciting opportunity to work with the Design Council on a very high profile project. It turned out to be one of our largest project to date and was a technical challenge, but the client is delighted with the results. The site will be launched in the new year and we'll certainly let you all know about it as soon as we can.

2010 saw a lot of repeat business and in September we launched a new searchable resource for the One World Trust, an organisation we had worked with back in 2009. We were really pleased that OWT came back to us, we take it as a great compliment to be invited to do more work.

In October I went to Leiden in the Netherlands for the Expression Engine conference. It was an inspiring couple of days and I met some really interesting people from around the world. We have been developing custom add-on for EE to meet our clients needs for the last few years and are currently working on an add-on which we will be launching as a product in the New Year. Watch this space for more information.

As the year came to an end we launched two sites in close succession; the Association of Lawyers for Children, a membership organisation for lawyers working in family law, and Vitalise, a large national charity who provide short breaks and other services for disabled people, visually impaired people, and carers.

We're just about to close the office doors for the last time in 2010 so I'd like to take this opportunity to thank everyone we've had the pleasure of working with over the last 12 months. We hope you all have a great Christmas and New Year and we look forward to seeing you in 2011.

Very best wishes,

Malcolm and the Electric Putty Team

At the end of September Electric Putty celebrated it's sixth birthday. 2004 seems a long time ago now; it was a world with no Facebook, no Flickr and Eternal Sunshine of the Spotless Mind was on at the pictures.

After a couple of marvellous years down under we moved to Brighton and started working out of a small back bedroom. We concentrated with the area we knew well and soon established our reputation as first class suppliers to the third sector. The work continued to flow and it wasn't long before we got some silverware under our belt, winning the 2006 Jodi award for Web Excellence on a Low Budget with Speaking Volumes and then we were double winners at the 2007 SCIP winning Best Charity Site and the Accessibility Award for Amaze.

The last 12 months have been our best and busiest yet; we've been working on some really exciting projects and growing from two to three full time staff with the arrival of Rob Hodges, our front-end ninja. We've also extended our trusted network of partners and have and the pleasure of working with some of the best designers and developers in Brighton.

It's an emotional moment (you know, it genuinely is) and we'd like to say a huge thank you to all the people we have had the pleasure of working with over the last six years. We've come a long way, we've learnt a lot and we're as passionate and excited about the web as ever.

Here's to the next six.

You've commissioned a web project and have started working with your web designer and now she's talking about something called wireframes. What are they? Do we really need to bother? I just want to see some visuals!

What are wireframes anyway?

A wireframe is a conceptual model or diagram of a web page which provides a framework for the development of the website. The purpose of the wireframe is to communicate what a web page should contain and how it should behave. Wireframes are usually developed as part of the information architecture phase of a website project.

Information Architecture or IA is 'the art and science of organizing and labelling websites, intranets, online communities and software to support usability' according to the IA Institute.

Why IA?

IA solves information problems - how can we make the information easy to use and easy to understand for the identified key audiences? Discovering and resolving these issues at the start of a web project creates a solid foundation for the visual concept and development phase.

We carry out an IA stage at the start of each project. This process involves working with you to agree the site hierarchical structure, the content elements, labels, categorisation, relationships and flows for any complex processes. We bring the results together into wireframes which are agreed and approved before we move forward.

Who is the wireframe for?

The wireframe often has two audiences:

1. (You) the client
2. The development team – e.g. graphic designers, programmers, project manager.

What does a wireframe look like?

Wireframes are drawn using simple lines (like wires, hence the name) and are usually in black and white.

What is in the wireframe?

Wireframes illustrate the elements that make up the page:

• The general structure of the page (e.g. navigation, search, logo etc.)
• The type of content and any specific formatting (e.g.headlines, dates, body copy, etc.)
• The prioritisation of the content through position, size and layout (e.g. news comes first, sign up comes first)
• Functions that visitors can interact with (e.g. data capture, forums, RSS feeds)
• Sometimes the wireframe contains the actual copy for the page. Where actual copy isn’t available you’ll see placeholder ‘lorum ipsum dipsum’ text.

What is not in the wireframe?

Wireframes don’t contain any colour, fonts, images, or branding. Wireframes do not represent the finished look and feel of the web page; this is dealt with during the visual design phase.

How many wireframes are there?

A wireframe is created for each template. For example;

• The home page
• Section hub page
• General editorial detail page
• Any page that requires specific explanation

How do I interpret the wireframe?

Key questions to ask yourself when reviewing wireframes