Is your charity website mobile friendly? If not, why not?!

Image attribution - Antoine Lefeuvre

Now more than ever, websites are being viewed on mobile devices instead of desktop PC’s.

Mobile internet usage rose by over 160% worldwide between 2010 and 2012 and it’s estimated that over the next 3 years mobile internet usage could overtake desktop internet usage.

So, what does this mean for your charity website?

Well – if your website isn’t mobile friendly, you could be missing out on a huge chunk of website visitors including your supporters, volunteers and donators.

Up to 50% of your visitors (and even more in the future) will be trying to access your website using a smartphone, tablet or other mobile device. If your website doesn’t display properly, those visitors are likely to just move on.

How do I know if my charity website is mobile friendly (also known as ‘responsive’)?

Image attribution - Illythr

The easiest way to check your website’s mobile friendly-ness is to simply view it on a mobile device and see how it looks. Preferably, check it on as many different types of device as you can because screen sizes and software vary widely.

If you don’t have any devices to hand, a good substitute to check your charity website is to just zoom in (on your keyboard press Ctrl and + multiple times to enlarge a web page). This simulates the view that users will get when they visit your website on a small screen. (Try it now with this website and you’ll see what we mean!)

When testing your charity website on a mobile device, ask yourself these questions:

  • Is the text easily readable?
  • Are parts of the page hidden off the sides of the screen?
  • Are the navigation menu’s viewable and easy to use?
  • Would the site be useable on devices with a small screen?

In many cases the answers to these questions will be no!

If your charity website is built using a free website provider such as webs.com…

Some of the free website providers such as webs.com have updated their website builder software to make it easy to view your website on a mobile device, so if you’re using one of those providers you may be in luck.

How do I make my charity website mobile friendly?

There are a number of ways you can make your website work on a mobile device. You can…

  1. Create a separate version of your website and set it to automatically load when a mobile device views your site
  2. Add to your existing website so that different files for the design and layout are loaded when a mobile device views your site
  3. Edit your existing website so that the same files display on a mobile but display differently depending on the size of the browser window (*this is probably your easiest option)

Usually you will need to get someone with some web design know-how to make your charity website mobile ready. Contact your original designer/developer or hire someone who can help you fix up your website. The cost shouldn’t be too high to convert an existing design. (If you need help feel free to leave us a comment below and we’ll advise as best we can)

Or if you’ve used a web-based website maker (such as webs.com) check the support pages on their website to find out what they’re doing to make your site mobile friendly.

Tip: If you know a little about CSS (cascading style sheets) design, a good place to start is to try making all your ‘width: ***px’ in to ‘max-width: ***px’, that way all the content containers such as the ‘div’s etc. will expand to a maximum width but will also contract when viewed on smaller devices.

For WordPress, Joomla and Drupal users:

Popular software like WordPress, Joomla and Drupal have easy options for making their charity websites ‘mobile ready’ using plugins or extensions:

Also, WordPress’ current default theme ‘Twenty Eleven’ is responsive and mobile friendly, and there’s lots of free responsive themes available to download or install direct from their theme directory:

Search free responsive WordPress themes at WordPress.org


The moral of this story is that whatever you’re using to create and host your website – being mobile friendly is becoming increasingly important, so don’t let your charity or non-profit organisation lag behind when it comes to your mobile visitors!


Need help working it all out?

Leave us a comment below or get in touch and we’ll do our best to advise you on how you can update your charity website to be mobile friendly and responsive.


Further reading about responsive website design:

– ‘What The Heck Is Responsive Web Design?‘ – Blog post at http://johnpolacek.github.com/scrolldeck.js/decks/responsive/

About Responsive Web Design at Wikipedia – http://en.wikipedia.org/wiki/Responsive_web_design


The importance of the ‘call to action’ on your charity website (*includes FREE samples)

Ok, so you’ve got a website, you’ve picked your design and added your logo and all of that fun stuff, now how do you make sure your charity website gets results?

Don’t make the mistake of forgetting this all important step – the ‘call to action’!

A ‘call to action’ is exactly what it sounds like – a call to your website users to make some kind of action.

As the author or manager of your charity’s website, you need to have a clear idea of what action you are hoping your users will take when they read any page on your site and make sure that this is conveyed properly to the end user.

(*Further down the page we’ve added some free sample buttons and information to help you, but first here’s some examples of charities using the ‘call to action’ to give you a better idea of what it means.)

Examples of ‘call to action’ buttons on charity websites

prostate-cancer.org.uk

prostate-cancer.org.uk immediately draws the users attention to their ‘donate’ message using a bright red button for their call to action contrasting strongly with the blue design of their website.


savethechildren.org.uk

The call to action at savethechildren.org.uk does the job of drawing the users attention, but it’s a little less attention grabbing as it’s colour is the same as some other important elements of the site’s design. (Perhaps it was felt that using a different colour would have been too off-putting for this design?)


steps-charity.org.uk

There’s no missing the call to action when you arrive at the steps-charity.org.uk website – this bright pink button is the first thing you notice as it’s in such strong contrast to the greys and blues in the other elements of the screen (note – as you scroll down you will see there are other buttons and sections using the same bright pink but they are ‘below the fold’ which means underneath the area that the user sees when they arrive on the page, so they don’t distract from the main ‘call to action’.)


mind.org.uk

Like the others in this list, the ‘call to action’ at mind.org.uk is attempting to raise donations, but there’s also another call to action above that that allows users to input their post code and find the charity in their local area.

Whilst the design on these ‘call to action’ buttons is not the most eyecatching from the list of examples, this is a good example of evaluating YOUR charity’s needs and pushing your aim in to the forefront, in this case, engaging users to get more involved at a local level.

Deciding which action you want people to take from your website

Every charity is different but the most common uses for ‘call to action’ links or buttons on charity websites are:

  • donations
  • mailing lists
  • volunteering

But you can make them for anything – do you want your users to download your new poster? Or to share a link on Facebook? Or contact you?

Making your ‘call to action’ stand out and choosing the right style

Generally your ‘call to action’ should be the first thing people notice when they arrive on your page. It should be eyecatching and slightly different from the other elements.

This is usually achieved by making the ‘call to action’ a larger font size and a different colour to your website’s usual colour scheme, but don’t go too crazy – you still want to get the right colour balance!

Try locating your website’s general colour on the colour wheel then use the colour directly opposite to achieve a contrasting but still harmonious style. (This colour scheme website might be of help to you here too, this will tell you the HTML colour codes but if you’re unsure what that means just use your eye to pick the right colour when choosing the colour whilst using your website software)

FREE ‘call to action’ images and sample HTML code to use on your website

You don’t have to be a design whiz to make a great looking ‘call to action’ button. You don’t even have to use an image, you can make attractive ‘call to action’ buttons just using HTML and CSS code (although they might not look as good for anyone using an older browser like Internet Explorer version 6).

Here’s some totally free examples that you can use on your website. We have HTML/CSS code and image versions available and both large and small font sizes:

(*note – it’s advisable to separate the CSS from the HTML and not use inline styles, but if you’re unsure what this means just use the codes below)

1. ‘Make a donation’ button

Example:

RED ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


ORANGE ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


YELLOW ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


GREEN ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


BLUE ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


PURPLE ‘make a donation’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


2. ‘Sign up now’ button

Example:

RED ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


ORANGE ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


YELLOW ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


GREEN ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


BLUE ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


PURPLE ‘sign up now’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


3. ‘Contact us’ button

Example:

RED ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


ORANGE ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


YELLOW ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


GREEN ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


BLUE ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


PURPLE ‘contact us’ button –


Right click & ‘save as…’ to save the image version to your computer

Or copy the HTML code below and paste it in to your web page:

LARGE FONT:

SMALL FONT:


Want to download all the buttons? We’ve put them all in handy .zip file for you. Download all ‘call to action’ buttons.


If these buttons helped you, great! :) Please let us know in the comments below, or if you have any requests for different colours or phrases, or any questions about using these on your website – go ahead and ask by leaving us a comment.


– These free samples are available for charitable organisations without constraints, you are welcome to save, download and use these images to your hearts content! However, redistribution is not permitted.

– If you’re a web designer working on website for a non-profit organisation please feel free to use the buttons.

– Attribution / a link back to WebsitesForCharity.co.uk is not required but would be greatly appreciated! Thank you.

A beginners guide to using Google Analytics on your charity website

Google Analytics™ web analytics service helps you to track and analyse how people found your website and what they do once they get there. It’s a vital tool used by millions of websites all over the world.

By paying attention to this data you can improve your charity website content and it’s ranking in the search engines.

This article is a basic guide on:

(I’ll also add some links at the end of the post to more in-depth articles in case you’d like to delve a little deeper in to your analytics.)


Signing up for Google Analytics™

To sign up you’ll need a Google account. (If you have an account for any of the Google products – e.g. Gmail, Blogger, Youtube – you already have a Google account and can log in with this.)

If you don’t have a Google account you can sign up for one when you click the ‘Access Analytics’ button on the Analytics home page.


Setting up a profile for your charity website

Once you’re logged in to Google or have created your new account, you should be sent back to the Analytics sign up page. Click the ‘sign up’ button and fill in the form with your website’s basic data (URL, location).

After that you’ll be given a piece of code to add to your website, usually before the </head> tag.


Installing the tracking code on your charity website

Depending on your skill level, this could be tricky. If in doubt, talk to the person who created your website or consult the help pages of the service you use to administrate your website (e.g webs.com).

If your website is powered using a CMS system (e.g. WordPress)

Some modern CMS systems allow you to edit the design/theme files direct from the admin panel, such as WordPress.

If so, you can paste the Analytics tracking code in to the <head></head> section of your header file, right before the closing </head> tag.

If not, you’ll need to access the file that includes your website’s header in the theme/design of your site, edit the file in a text editor (like Windows Notepad) and upload it to your site using FTP software (or your hosting account’s File Manager).

In WordPress you can edit your header by clicking the ‘Editor’ link in the ‘Appearance’ menu in your admin dashboard, then finding your header file in the list of files on the right of the page. (Note this only applies to self-hosted WordPress installations. WordPress.com website templates can’t be edited in the admin panel)

If your website is made using plain HTML files

You’ll have to paste the code in to the <head></head> section of each of your pages before the closing </head> tag. This is ok if your website only has a small number of pages but will be a big hassle if it’s a large website.

If your website is made using PHP files

Usually you’ll have a separate .php file that contains the header of your website. Add the tracking code in to the <head></head> section right before the closing </head> tag.

If your PHP website doesn’t have a separate .php file for the header content, you’ll have to follow the same method as the HTML files described above.


Looking at the basic data on Google Analytics™ and using it to improve your charity website

There’s a huge amount of data available with Google Analytics, but I’m just going to run through some basics here.

Your Analytics dashboard shows you at a glance:

  • the amount of visits your charity website receives each day
  • the average amount time people spend on your website
  • where your website traffic is coming from (search engines, other websites linking to you, people typing your address straight in to their address bars)
  • which countries your website visitors are from

To take a look at more details, click the ‘Standard Reporting’ link in the orange navigation bar at the top of the page.

On the next page you’ll see some extra details about your visitors and a line chart showing the number of visits your charity website is receiving. This is really useful as you can see how the visits fluctuate over time and see if the number improves as you make changes and add content to your website.

Traffic sources – where your visitors came from

Click the ‘Traffic Sources’ link in the menu on the left and then click ‘Sources’ > ‘All Traffic’. Here you can see a breakdown of the websites where users have clicked a link to your website.

Google itself is usually at the top of this list as the Google search engine provides most websites with a large portion of traffic.

Search Terms – how people found you on the search engines (SEO)

Again, under the ‘Traffic Sources menu, click ‘Search’ > ‘Organic’ and you can see what terms people used on the search engines which led to them to click a link to your site.

It’s particularly useful to pay attention to the search terms people used to find your website.

The columns next to the search terms tell you how long people stayed on your site and how many pages they viewed before leaving. Using this information you can form a good understanding of which pages on your website are of value to your users. If they like what they see they will stick around for a longer time period and read more of your content.

Content – what people looked at on your charity website

Click on the ‘Content’ link in the left hand menu then ‘Site Content’ > ‘Pages’ and you can see specifically which pages people have looked at on your website, how long they looked at them and the percentage of people that decided to leave your site from each page.

If some of your pages have a low ‘Avg. Time on Page’ or a high ‘% Exit’, this may signify that these pages didn’t give the user what they were looking for, so they just gave up and left (internet users are very fickle and it can be hard to keep their attention with so many other millions of web pages out there).

You can use this data to your advantage by going back to these pages and making a few changes to improve the page’s usefulness or design so that they’re more appealing to your readers.

You can also use the content analytics to target any important areas of your site that are being ignored, for example if you have a ‘donate’ page that’s not getting any views or a ‘news’ section that’s not being read, you can make changes to your website to draw people’s attention to these areas.

Once you work out which content on your charity website is the most popular you can put extra focus on adding content of a similar nature, because you know there’s an audience out there for it. This should increase your search engine traffic (plus posting new content to your website regularly is a sure fire way to get more traffic from search engines.)


I hope this article will help you take your first steps in to a more analytical world! If you’ve got any questions feel free to send them to us and we’ll do our best to answer them.

A final thought…

Whilst it can be incredibly useful to know more about your website users, don’t worry if you feel it’s all too complicated for you – if your content is good and you regularly post fresh content that’s relevant to your organisation, your website should do just fine.


Links to articles on other sites you may find useful (more in-depth suggestions for using Analytics):


Note: this article does not include any affiliated links

How to automatically syndicate your charity website posts on to your social network accounts

More and more charities are harnessing the power of social networking sites to spread the word about their organisation and boost their website visitors / supporters.

Whilst you should try to personally post on your charity social networking accounts as often as possible to be an active part of the community, it can also be really helpful and time-saving to automatically syndicate posts from your charity’s website on to Facebook, Twitter and other social networks using RSS feeds.

What does it mean to automatically syndicate our website posts?

Basically it means when you make a new post on your website, the post (or part of it) will be automatically posted on to your social network account too, plus a link back to the original post.

What are the benefits of syndicating our charity website content on to social networks?

The benefits can be huge as people love to share links and articles with their friends and family on social networks. You are likely to get more visitors to your website and more general interest in your organisation as people see your name mentioned and begin to learn more about you.

Sometimes things can take off in a huge way on social networks if lots of people get involved. Some organisations like to offer incentives such as the first 1,000 people to ‘like’ their Facebook page are entered in to a prize draw. (This is more common for businesses but could prove very effective for charities too.)

If you already have a supporter base you should encourage them to follow you on Twitter/add you as a friend on Facebook etc. and share your posts as much as possible. Make sure your website displays prominent links to your social networking accounts.

Syndicating your posts can also help with SEO (Search engine optimisation) – you can improve your website’s placement on search engines as you get lots of relevant links back to your site (very important to search engines).

How do I set up syndication for our charity website?

I recommend using http://dlvr.it to syndicate your feeds.

It’s quite easy to use, just register a free account then click the ‘add route’ button to start setting up your syndicated feeds. (If you’re unsure on anything you can simply add your RSS feed URL and authorise your Twitter/Facebook/etc. account, and leave all the other settings as default.)

Example of a post syndicated on to the wall of a Facebook page using dlvr.it:

How do I find our website’s RSS feed?

If you’re unsure whether or not your website has an RSS feed (what’s an RSS feed?) look out for this icon anywhere on your site or in the address bar at the top of your internet browser:

If you see this symbol, click it and you should find your RSS feed. Copy the URL (in the address bar) of the feed and you can then paste it in when creating your ‘route’ at dlvr.it.

Our charity website doesn’t have an RSS feed. Can we still syndicate our posts?

You can but it will be a bit more work. There’s a couple of options available to you:

Option 1 – add posts manually on dlvr.it

dlvr.it gives you the option to add posts to your syndicated feed manually. Simply click the ‘Post’ link in their main navigation bar and you can add a post.

You could update this each time you write a new post on your website, for example just include the post title and a link back to the page where the post is displayed on your website.

That’s more time-consuming than having your own RSS feed but only a small effort if you get in to the habit of updating it each time you have a new post or add a new page to your charity website.

Option 2 – use a service or software that can make an RSS feed out of your HTML pages like html2rss.com, wotzwot.com or rsspect.com (or search google for html to rss)

You could then have one of these services make a feed from your ‘news’ or ‘latest posts’ page (whatever you have on your site). You would then use the URL of the feed the service has created for you when setting up syndication at dlvr.it.

The downside to this is that it may be difficult to set up and you may need to add code to your website ‘behind the scenes’ and not everyone has the access to do this, especially if using a ‘site builder’ type software. Also the HTML to RSS software may not always pick up the correct results when searching for new posts on your website.

In the long run you should look in to upgrading your website to software that includes an RSS feed automatically, or add this capability to your current software (if you’re unsure on what this all means – contact your website host or check their ‘help’ pages, or contact the person who created the site for you).


Note: this article does not include any affiliated links

Using photographs to enhance your charity’s website

Adding photographs to your charity or non-profit website is vital to making it interesting and eye-catching for your visitors. It reinforces your message and can help to set the atmosphere of a page.

Building up a portfolio of images for your organisation

It’s a good idea to build up a portfolio of images specifically related to your charity, such as photo’s of special events or your volunteers hard at work.

If you’re short on images you could ask your volunteers or a local photographer to help you by attending your events or visiting your premises and taking lots of photo’s.


Using Stock Photography on your charity website

Sometimes you need something specific or a professional quality photograph instead of your own photo’s, so for this you can use stock photography.

There are lots of places you can get stock photo’s online, but my recommendation for the best place to find low cost stock photo’s is CanStockPhoto.com.

Stock Photos

I’ve always found their prices to be lower than the competition, and you often find the same images at CanStockPhoto as you would at the more expensive sites.

The range of images is huge so you’re bound to find what you need and for images suitable for use on the web you can purchase the small size, most of which cost just 2 credits which equals $1 (about 65p at the current UK rate) – a bargain!


Using ‘public domain’ images

A lot of public domain images aren’t of the best quality but it’s usually worth having a quick look at a few resources to check if you could find what you need in the public domain and royalty free.

Here’s a few recommended places to find totally free and public domain images and graphics:



Choosing the right images for your website

It may sound obvious but – always try to use images closely related to the content of your page and place them near the specific content area they’re related to.

For example:

Heading

YOUR IMAGE HERE

The content for this section. The content for this section. The content for this section. The content for this section. The content for this section.

It’s best not to use images that are too dark or too light or images that just look ‘hacky’, as it might lower people’s confidence in the professionalism of your organisation.

(Unless the image is in a photo gallery, in which case it’s not so much of a problem)


Image copyright

When using images you’ve found around the web, it’s important to note copyright issues. You shouldn’t use random images you’ve found via search engines (e.g. Google) unless you’re certain the author has given permission.

It’s worth spending a small amount on stock photographs so that you can be sure your organisation is legally allowed to use them.

Royalty Free Images at Can Stock Photo


Related articles:

Super easy to use image resize tool – very handy!
Adding watermarks to your images

Add a watermark to your charity images (for free!)

Most charities and non-profits build up a collection of photographs and other images related to their cause, ready for use in promotional materials or on the web.

When sharing these images online there’s always the chance someone might ‘borrow’ (also known as ‘steal’) your images and use them as their own. An easy way to avoid this is to add a watermark to your charity images and it’s really easy to do.

A free online watermark tool

picMarkr.com is an online tool that enables you to quickly and easily add watermarks to your photographs.

Upload your images

You can choose to upload images from your computer or you can grab images straight from your Flickr, Facebook or Picasa (google) accounts, and you can upload up to 5 images at once. There’s also an option to resize your images if required.

Set up the watermark

You can add any text you like for the watermark (your website URL might be a good idea to grab the attention of a few extra visitors) and the style (white on black, black on white, background opacity etc.) and placement of your watermark can be customised.

The sample image updates as you change the settings, so you can see a preview of how the watermark will look before you save your changes.

The result – a watermarked image!

Once you’ve got the watermark settings as you want them, hit the ‘Continue’ button and your watermarked image will appear, ready to save to your computer or upload direct to your Flickr, Facebook or Picasa accounts.

Easy!

My experience of this service: Having just discovered picMarkr I’ve used it to add a few watermarks to images on my non-profit site SaveTheStrays.co.uk. I’ve found it to be really easy to use and it creates a stylish looking watermark with minimum fuss! Definitely recommended.

Ready to add watermarks to your charity images?
» Visit picMarkr.com


Note: this article does not include any affiliated links

How to make an effective low cost website for your charity or non-profit organisation – part 1

Today I encountered another organisation paying way too much for way too little in terms of their hosting account. This is a real pet peeve of mine and something I see all the time!

I suppose people purchase these services for 2 reasons:

1. Lack of knowledge about what’s considered a good deal when it comes to making your own website

2. Ease of use – a lot of these services include a free ‘web builder’, so people feel they can make a website even if they’re not website savvy

But – what you end up with is a greatly overpriced package and a rather naff looking website based on a very basic template. You miss out on many features that you could be getting for less money elsewhere!

So, let’s put an end to this waste of money which is all the more important when it comes to charities and non-profit orgs who’ve worked hard to raise the funds in the first place.


Making a website for your charity/non-profit org

To do list:

PART 1 (covered in this guide)

1. Buy your hosting & domain name
(*if you already have this you can move on to step 2)

2. Install software to run your website

3. Edit some settings in the software and choose a design for your website

PART 2 (covered in the next guide, coming soon)

4. Add content to the website

5. (Optional) Set up email addresses at your domain name (i.e. yourwebsite.com)

6. (Optional) Do a little extra legwork to get more traffic and better results in the search engines like Google


1. Buying your hosting & domain name

Buying hosting and a domain name is just like buying anything else on the web. You add your details, give them your payment info and your order is placed. The process is quite self-explanatory (but we’ve included some extra detailed instructions below for anyone who’s unsure).

We recommend Bluehost hosting because they provide a good quality service with lots of features for a great price (currently on special at just $3.95/£2.50 per month). Oh, and you get a free domain included (.com, .net, .org, .info, .biz or .us).

(Even if you already have a domain, we’d recommend getting a free domain as well, then you can use it to create another website or set it to redirect to your existing domain name.)

> Go to bluehost to order my domain and hosting now
(*opens in new window)

If you need some more help with the process of ordering your hosting and domain you can read our extra details below, otherwise you can now move on to Step 2.

*Super detailed guide for non ‘web-savvy’ users:

1. On the Bluehost home page, click the big ‘Sign Up Now’ button.

2. On the next page, enter the domain name you would like to use, choose the domain type from the dropdown list (.com, .net, .org, .info, .biz or .us) then click ‘Next’

3. The next page is where you enter your contact details and payment info and choose your package. If you want to pay the lowest price you have to sign up for the 24 month package. It’s a good saving so it’s recommended to go for the full 24 months, but if you really can’t afford it, the shorter term packages are still very good value.

There’s also an area where you can choose to pay extra for Domain Security, Site Backup Pro and Domain Whois Privacy. Chances are you won’t need these things, so you can untick those boxes, but you should read the details to see if those services might be of use to you.

(The Domain Privacy option may be worth it as unfortunately spammers can find your email address if you use your own details on the domain name ‘Whois’ data which is basically just a public record of who owns the domain)

4. Complete your order at Bluehost and soon you should receive an email containing your account login information (usually your domain name plus a login password)

…which brings us nicely to the next step…


2. Install software to run your website

WordPress is the best choice of software for running your charity/non-profit website.

I wouldn’t normally make such a blanket statement but in this case I think it’s true and I’ll tell you why:

– WordPress is FREE

– WordPress is easy to use

– WordPress is a hugely popular website software and it has millions of users all over the world. Because of this it’s very stable and regularly updated and improved

– WordPress allows you to add pretty much any feature you will need via the use of ‘plugins’ – extra bits of software you can install with just a few clicks to give your site extra features, for example – contact forms, photo galleries, shop facilities and lots, lots more

– WordPress allows you to use ‘themes’ which can change the design of your whole site, with just a few clicks. And there’s thousands of free and paid themes available to choose from

Installing WordPress

Once you’ve received the email from Bluehost containing your login details, login to your hosting account at http://yourwebsite.com/cpanel (replacing the yourwebsite.com part with your previously ordered domain name)

Once logged in, scroll down the page until you see the section titled ‘SimpleScripts Installations’ and click the ‘WordPress’ icon

On the next page, click the green ‘Install’ button to install the WordPress software and fill in the details as needed (more info from Bluehost about installing WordPress)

Once the installation is complete, the location of your WordPress installation and your login details will be displayed. Make sure you make a note of the WordPress login details as you will need these to manage your website.


3. Edit some settings in the software and choose a design for your website

Login to your WordPress admin dashboard at http://yourwebsite.com/wp-admin (replacing the yourwebsite.com part with your own domain name)

(The dashboard page can be a bit cluttered so if you’d like to avoid seeing all that stuff every time you login, click the ‘Screen Options’ tab on the top right of the page, click to un-tick any items you don’t need – I’d leave the ‘Right Now’ and ‘Recent Comments’, the rest you can probably get rid of – then click the ‘Screen Options’ tab again to hide those settings.)

Your home page

Because WordPress is primarily used as a blogging tool, by default the home page (that’s the first page people see when they visit your domain name, it’s also known as the index page) is set to show the latest blog posts.

We’re going to be using this WordPress installation as more of a standard website than a blog, so we want our home page to show something else.

First we have to create a page that will be your home page. To do this click the ‘Pages’ link on the left of the screen, then click ‘Add New’.

One the ‘Add New Page’ screen, add a title for the page, for example ‘Home’. You don’t need to add any content to the page yet, you can just click the ‘Publish’ button on the right.

Now we need to tell WordPress that we want that page to be our home page instead of it displaying our latest blog posts. To do this, click on the ‘Settings’ link on the left of the screen, then click ‘Reading’ from the list that appears below.

On the next page, change the ‘Front Page’ setting to ‘A static page’, and choose ‘Home’ as the front page. Set the ‘Posts page’ to ‘Sample page’ (that’s just a page that is automatically created as part of the default WordPress installation, you can change the title to ‘Latest Posts’ or ‘Blog’ later on)

Hit the ‘Save changes’ button at the bottom of the page. Now if you take a look at your website home page (http://yourwebsite.com) it should be displaying a blank page with the ‘Home’ title at the top.

Website design (aka your website ‘theme’)

We’re working on some free WordPress themes specially for charities and non-profits, but they’re not ready yet so for now –

There’s lots of great free designs available for WordPress and you can access them directly from your admin dashboard.

Click on the ‘Appearance’ link on the left of the screen, then click ‘Themes’.

On the Themes page, click the ‘Install Themes’ tab at the top of the page.

You can then search the available themes and filter the results by:

Colour – pick a colour that fits with the ‘branding’ of your organisation. Creating a good brand presence for a charity is probably of as much importance as it is for retail businesses. It helps instil confidence in your organisation when people recognise your brand.

Columns – the number of columns on the page (for example, this page has 2 columns – the main content and the sidebar on the right) and whether or not you want your sidebar on the left or the right. Left is good if you want to use that column for a navigation menu area, otherwise right is usually best.

Width – the width of the content on your website pages – with a fixed width theme, the page will be the same width for all users, with a flexible width the page will stretch or contract depending on the width of the user’s monitor.

Subject – you aren’t likely to need to this for your charity website, but it lets you find themes based on holidays or seasons, or specifically made for photo-blogging websites

Make your selections as necessary. If you’re unsure about what you need, just pick a colour and leave the rest of the settings as is.

After you hit the ‘Find Themes’ button, you’ll be shown the results of your search. Under each little image preview there are links to install or preview the theme.

Once you’ve found a theme you think you’d like to use, click the ‘Install’ link and a box will pop up to confirm the install. Click the ‘install’ button and the theme will then be installed. This only takes a second and on the next page you should see confirmation that it has been installed.

Click the ‘Activate’ link to turn on the theme for your website.

Now visit your website home page to see the new theme – for easy access to your home page there’s a link near the top left of the admin dashboard. This will display the name of your website, this is how ours looks here at Websites For Charity:


Ok, you’ve done it! You’ve made it through part 1 of our ‘How to make an effective low cost website for your charity or non-profit organisation’ guide.

The next step is to add some content to your new charity website. We’ll be covering this in part 2 of our article which will be online soon.

Check back over the next week or subscribe to our posts by email, RSS, Facebook or Twitter to be notified when part 2 is posted.

Thanks for reading! If you’ve got any questions feel free to leave us a comment below.

Low cost website hosting for charities and non-profit orgs

Bluehost is a hosting company that we recommend to many charities and non-profit organisations.

> Visit Bluehost.com

They provide a feature rich hosting account at a fantastic price, giving you everything you need to start your own charity website including ‘one-click’ installs of top quality software like WordPress, and plenty of space and resources to host your organisations website, emails, images etc. You also get a free .com domain included in the deal!

At time of writing (October 2011) they’re having a special offer of just $3.95 per month (around £2.50 per month) – if you’re looking for a quality low cost host for your charity or non-profit this is a deal you should not miss.

Personal recommendation

We use Bluehost hosting here at WebsitesForCharity.co.uk along with some other sites we own, and our experience of Bluehost has been good – we have received helpful advice whenever needed from their technical support team, and find their ‘Knowledgebase’ and videos very helpful whenever we have a query.

(Note – As Bluehost hosting is on ‘shared servers’, we wouldn’t recommend hosting a very large or busy forum or chat room on the account, as with most shared hosting accounts you need a little more of a boost for this, but you can always set up your website on Bluehost and host your charity/non-profit forum on a free forum hosting service.)

Super easy to use image resize tool – very handy!

Every now and then you may need to resize an image for your charity or non-profit org. As a web editor I find myself editing images almost daily, and opening up Photoshop or another feature-packed program really is overkill for such a small task.

Image resizing in your browser

I often use this handy tool for image resizing and would like to recommend it to you:

PicResize.com

It’s a quick and easy process, even for people who feel they are less experienced with image resizing and ‘webby’ things. Simply hit the ‘browse’ button to select your image from your computer, then click ‘continue’.

On the next page you will see a preview (not to scale) of your image. Under the preview is where you will set the new size for the image. Click the dropdown menu at Step 2 and choose one of the options as per your needs, or choose ‘Custom size’ if you know the specific size (in pixels) that you need.

If you’re unsure on what size you need, bear in mind that the average computer screen (not widescreen) is around 1024 pixels wide.

So, for instance if you want an image that would be around half the width of the screen – 500px wide should be fine, or for small thumbnail size images – around 100px wide.

Free forums for your charity or non-profit website

A forum is a place for discussion and community interaction. For some charities and non-profit organisations they can be a lifeline, but for others an unnecessary distraction. So it’s wise to think carefully before jumping in to creating your own forum.

Ask yourself – does my charity or non-profit organisation need a forum?

Why using a forum might be a good idea:

  • To interact regularly with your volunteers or supporters
  • To provide support and advice to the people your charity was set up to help
  • To run online events such as fundraising competitions

Why using a forum might be a bad idea:

  • Once a forum has built up a membership base and is receiving lots of visitors and posts, it can become very time consuming to maintain with approving new members, sorting out people’s problems with logging in and posting, not to mention having to ‘manage’ a community of people who may not always agree and may not always be polite! All of this may outweigh the benefits of having a forum in the first place
  • You will need volunteers (or paid staff) dedicated to maintaining and managing the forum
  • If your organisation has any relation to issues that might be considered controversial, people that oppose your ideas may use your forum to post derogatory or abusive comments
  • If you have a large organisation (or if it becomes large at a later date) forum hosting costs can start to spiral. If you have more than 50-80 people browsing your forum at any one time you really will need some proper solid hosting, and this rarely comes for free! (Unless you have a very generous hosting company :) )

So – if you’ve read all that and decided that a forum IS a good idea for your charity or non-profit organisation, read on to find out where you can go to set one up for free!…


FREE forum hosting services:

*Note – I haven’t tested all of these services, the only one I have had significant experience with is Forumotion and their service seemed pretty good, but had occasional ‘downtime’. Your best bet in choosing which one to use is to check out their support forums, there you can see how many complaints they have from users and how they deal with them)

1. Forumotion – http://www.forumotion.com

2. Free Forums – http://www.freeforums.org

3. Lefora Free Forum – http://www.lefora.com

4. Forumer – http://www.forumer.com

3. Make Forum – http://www.makeforum.org

One drawback – many (if not all) of the services listed do put adverts on your forum. This is how they make the money to host your free forum. Usually though these are only displayed to unregistered users so your regular members will not be irritated by them.

Forum Software

Most of these services run on phpBB forum software, which is a very popular open source software used by millions of sites around the web.

Getting set up is fairly simple (although so far I’ve never seen a good quality forum software that wasn’t just a little bit tricky to manage!), and if you’re web-savvy there’s lots of different ways you can make your forum stand out by using different design choices, adding your own headers, extra pages, polls etc.

But of course, if you’re unsure on all that you can still get a very effective forum up and running where your members and supporters can have a ‘chinwag’ and get to know each other better. Content is the key – post regularly and make it interesting!

Self-hosted forums

If you’ve got your own hosting account and enough resources to run a forum (if you’re unsure always check with your hosting company) you can install forum software on your own account and have more control over the entire site. This gives you a lot more scope for making the forum unique to your organisation and customising it to your needs, but also means more maintenance in terms of backing up the database, updating the software and being ready to spring in to action should anything go wrong (always keep backups!)

If your hosting account includes SimpleScripts software you can install phpBB with just a few clicks! It’s very easy to do and saves you a lot of time and hassle.

Got any questions about setting up a forum for your charity/non-profit? Or perhaps some advice for others about setting up their forum? Please feel free to leave a comment!