There are some nice touches to the design. For example the blue and pink colour scheme that both mirrors their logos and makes it clear this is an issue that affects men and women. I like the way that text has a white space margin to its sides, but photos don’t.

The main feature of the website is its blog, which keeps marathon runners and supporters informed. There’s also a Twitter widget in the right column, which they keep very up-todate.

When the website first went live it also had application forms for the marathon. I built these using the Gravity Forms WordPress plugin because it enables complex, flexible online forms to be created with a minimum of fuss.

The TeamPB website can be seen at www.teampb.org.uk

Complex online forms

The website’s most important feature is perhaps its membership forms. The Association is on a drive to expand its membership and has three separate forms.  They’re all quite long, so we split the forms into sections, filled in over several pages. When the forms are submitted they send an email notification to the Association; they also send the data to a client relationship database called Salesforce.  A WordPress plugin called Gravity Forms enabled us to build such complex forms.

Displaying staff and trustees’ details

SIAA wanted their staff and trustees’ names and short biographies beside a photo, which was easy for them to do in WordPress by simply left-aligning the thumbnail images and putting a horizontal rule below each person’s biography. A added sprinkle of CSS code made it look smart.

Visit the website of the Social Impact Analysts Association.

Most WordPress plugins are free but BackupBuddy is a premium plugin. For an annual fee of US $150 I can use it to back up an unlimited number of clients’ website, which makes it great value. I simply wouldn’t have time to backup a couple of dozen sites manually every week.

Once installed on your website, BackupBuddy checks that the hosting server’s settings are conducive to doing a backup, and if there are problems, gives you advice on how to resolve them. In practice, I’ve found that only about one in four hosting packages needs tweaking in some way.

The plugin also runs a check for malware – handy, because if your site has been hacked you can revert to a previous backup.

Unlike some backup plugins, it can backup everything: your MySQL database, WordPress core files, theme, uploaded images and documents. And it saves it as a single compressed file.

You can set up a schedule – I tend to do weekly backups but the can be daily, fortnightly or monthly – and BackupBuddy will automatically do the backup and send you an email to tell you it’s ready. Then you can login to WordPress and download the backup. Even better, you can have the backup sent to your Dropbox account, or sent by FTP to another location for safe keeping.

All in all, it’s a great plugin and a reliable solution to keeping your website safe and secure.

Here is a selection of well designed favicons. Can you guess which charities’ websites they’re from? Hover over the icon to find out, and click on the icon to visit their website.

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.

Here is perhaps the most straightforwardly appropriate of all .ico files. It’s the favicon from the website of the Information Commisioner’s Office and yes, it’s simply the acronym ICO.

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

Please note that WordPress may work slightly differently from shown in the video, if your website has additional plugins or has been customised. And WordPress gets upgraded and improved regularly. But most things should still look pretty much same!

The WordPress dashboard

Let’s start with an introduction to the WordPress dashboard, the first thing you see when you login to WordPress.

Writing and publishing a page

How to write a page – pages are a basic, everyday use of WordPress.

Writing and publishing a post

How to write a post – a post is like a news item, content that’s ordered by date and can be categorised.

Excerpts & the More tag

How to give your posts an excerpt – a short bit of text that sums up what the post is about.

Saving and returning to draft posts & pages

How to edit existing posts and pages – saving drafts of your content.

For more video tutorials visit WordPress.tv’s How To section.

This site is built in static html code

I’d not been asked to build a new static website in years, but the department wasn’t using a CMS. There was a large amount of written copy to insert, carefully markup with HTML and style using CSS. Dreamweaver templates were used to ensure the layout remained consistent across the many pages and sections.

Images and captions

There were a few unusual features. Photos had to be captioned, with the words appearing when you hover over parts of the image. This wasn’t done using image maps because we wanted the text to be accessible. Instead, CSS was used to position each caption. Note the link to a longer description of the image: not something that most websites bother with, but necessary on this website to maintain accessibility.

Making web content stand out

The department wanted to make particular parts of the content stand out, so I applied a background colour and an icon to text to make it obvious that it’s a case study, research note, or a client’s experience. Quotes were made eye-catching, with links to the citation’s source clearly linked to.

TGV provided me with PSDs, visual designs created using Photoshop. These included mockups for the home page, blog, portfolio, contact us, and other pages, which had a consistent and eye-catching design. It was my job to turn these flat pictures into a working website. I’d like to share with you some of the techniques used to build the website …

How to make WordPress more flexible, and display information more consistently

The TGV website has very few static pages. Apart from a blog, its main feature is a collection of samples of their work, organised into collections according to discipline (branding, web design, exhibitions etc). For each of their clients, there’s a gallery of photos of work done for them.

Because this information needed to be ordered and presented consistently, I opted to use several features of WordPress that enable the creation of non-standard web content. You may have heard people say that WordPress isn’t a fully fledged content management system, that it’s just a blogging tool. Not true! The following three features enable you to create complex websites with information arranged however you want.

1. Custom Post Types :  create new types of content, not just the standard pages and posts. For example, TGV’s website has “work samples”. A literary website I’ve worked on has “authors” and “books” as custom post types. You get a new box on the WordPress dashboard, alongside “Posts”, “Pages”, “Links” etc where you can add and edit your new type of post.

2. Taxonomies :  organise multiple lists of terms to describe and categorise your content. For example, a book can be categorised by language, genre etc. On the TGV Design website taxonomies are used to organise their portfolio according to discipline, client and sector.

3. Custom Fields :  add new types of information to your posts. For example, a book might have publication date, publisher and author as custom fields.

I used WPMU DEV’s CustomPress plugin for WordPress. This plugin makes it easier to create custom post types, taxonomies and custom fields, and integrate them into your website templates, without having to write a lot of code from scratch.

Carousels

An important feature of the TGV Design website is its use of carousels (also called slideshows or sliders). There are lots of carousel plugins to choose from, but I found that only yCyclista could do exactly what was required. There’s a gallery feature built into in WordPress that lets you upload photos and associate them with any page. The yCyclista plugin takes this gallery of photos and turns it into a slideshow, with thumbnails below a large image. Some customisation and styling was required to get it looking right, but the plugin’s code made that easy to do.

Visit the TGV Design website at www.tgvdesign.co.uk.

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.

Setting up an HTML e-newsletter campaign used to be a frustrating experience, but worthwhile because email is a great marketing tool. There are few methods as effective for reaching supporters and donors. A great online application called MailChimp makes it much simpler.

Why would your charity want to have an email newsletter?

Sending email in bulk is a lot cheaper than posting out printed newsletters. Emails can be easily forwarded to other people by recipients. An email can link directly to a news item on your website – or to your donations page. Your supporters can subscribe and unsubscribe themselves so you don’t have to manage a contacts list. No more stuffing envelopes!

Emails can be sent out more quickly more regularly than your print newsletter. For example, e-newsletters were a vital tool of nonprofits here in Australia when the bushfires hit and the public wanted to donate and give their support and wanted to do so immediately.

Why can’t I just write it in Outlook and send it to all my contacts?

These days most web designers follow standards when they code websites in HTML and CSS. But there are no standards for email. There are so many different software programs and web-based email applications and they all display emails differently from one another. Many of them strip out html code; some don’t display pictures by default; some won’t show background images; and some ignore CSS altogether.

Creating an HTML email newsletter is like a trip back in time to the dark ages of web design: tables for layout, repetitive style attributes within the HTML, and lots and lots of font tags.

There are pitfalls ahead. For example, if too many recipients hit the spam button you could get your organisation blacklisted as a spammer. And legally you are supposed to ask people to opt-in to receive your email newsletters and provide them with a means to unsubscribe.

You can’t use Outlook and your usual email address to send off your e-newsletters. If you’re going to do the job properly you need the proper tools. That’s why I’ve started using MailChimp. You might have heard of its older brother, SurveyMonkey. MailChimp has the cuter logo.

Here’s a summary of what you have to do:

1) design an HTML email using antiquated coding methods.

This is the step where you might need help from a web designer. Your code has to be coded carefully, using old-fashioned techniques. Fortunately MailChimp has its own newsletter design tools which work very well. Even if you’re a seasoned coder, you’ll find that it saves time to use one of MailChimp’s templates as a starting point.

You also need to provide a plain text version. That’s much easier – and Mailchimp can do it for you automatically.

2) provide the correct information

If your message contains too many of the wrong sorts of words it’s likely to be given the boot by recipients’ spam filters. I had to remove the words ‘free‘, ‘funding‘ and ‘grants‘ from the text before I could be confident of anyone actually receiving it. Which was a bit annoying because the whole point of the email campaign was that we were offering organisations funding grants.

Your email must give your organisation’s address, offer an unsubscribe link, and explain to recipients why they’re receiving the email. If you don’t do this properly someone at MailChimp writes you a very polite email to tell you off and offers you advice.

3) test your email works in dozens of different email clients

You could send test emails to people you know who use Hotmail, Gmail, Yahoo, Outlook, Lotus Notes, Eudora, Thunderbird etc etc and ask them if it looks ok. No seriously, use Inbox Inspector instead. That’s MailChimp’s testing tool – you have to pay extra but it’s worth it.

4) compile a list of people to send the email to

You can either put a subscribe link on your website, or import a list of recipients’ emails (but you must have asked their permission first). Be careful when doing this as MailChimp, quite rightly, are very strict about what you can and can’t do with people’s emails. You’ll get one of those lovely tellings-off if you transgress the rules so figure out what the rules are before you send your e-newsletter.

5) send the campaign

Click a button to send ‘em all off. By this stage you’ll be giving a huge sigh of relief but it’s not over yet.

6) check your stats

Now you’ll find out how successful your email campaign was. Find out how many people opened the email and if they forwarded it to anyone else. Track how many of them clicked on a link to visit your website.

If there are too many bounced emails you should check the quality of your email address list. If too many recipients hit their spam report button you could get banned.

Figure out what worked well and what didn’t and use this information to improve your next email campaign.

Why do I use MailChimp?

There are other bulk email products that I’ve used with charities, such as Vertical Response, Constant Contact and Salesforce, but I find the MailChimp interface the clearest and most intuitive. There’s a lot of functionality in there should you need it but it’s simple enough to get started. The customer support is fast, firm but friendly. The documentation is very helpful.

There’s a free plan that gives you up to 12,000 emails a month, sent to a maximum of 2,000 subscribers. That’s going to be suitable for many smaller charities. If you need more, the rates are very fair and there’s a 15% nonprofit discount.

Most of all, it’s such a cheerful tool. Whenever I got frustrated with the whole confusing business of trying to send bulk emails, the friendly little monkey face in its cute-looking postman’s hat looked back at me, giving me encouragement.

More advice on email newsletters for nonprofits

Try these two articles for the basics: bring your e-newsletter from snoring to soaring and why do email newsletters? And find out about email subject lines that work for your nonprofit.

The Ectopic Pregnancy raises awareness of ectopic pregnancies amongst women of childbearing age, the medical profession and the general public. Their website is a vital tool for providing information and enabling those affected by this medical condition to share their own experiences.

The website underwent a complete redesign in 2010, changing its layout and visual style as well as how it’s updated. Staff at the Trust can easily update their own pages and publish news on the website using the WordPress content management system.

The website has a large footer area, which makes their contact information, subscription links and latest news available from any page on the website.

Online forums using phpBB

The website has built up a self-sustaining community by using an online message board. The forums have been a great success with hundreds of new messages per day from women discussing their experiences of ectopic pregnancy and sharing information. The website uses the free and open source phpBB application to run the discussion forums. It has been customised (by editing its CSS stylesheet) to match the look and style of the main website. It also has full admin and moderating facilities and a thriving community of users who can help you get to grips with it.

eWellBeing award

In 2007 my website for the Ectopic Pregnancy Trust won an eWellBeing award. The site won the award for its use of forums to build an online community.

Visit the Ectopic Pregnancy Trust’s website at www.ectopic.org.