Community websites on the cheap

websitescollageI have been in Round Table for a few years now, and really should have known better than to admit  I worked in the computing industry – I got “volunteered” to manage the existing website.  Me and my big mouth… But after a while I decided I would like to modernise the rather traditional and static website that I had inherited. The main constraints of this revamp were (a) it had to be cheap, and (b) I’m no web designer! In other words – no money and no talent. The reason for “cheap”, by the way, is that Round Table is a voluntary service organisation – we have a good time doing all sorts of things, but primarily we raise funds for charity and help out in our community. For more information on Round Table and what we get up to, follow this link.

So my challenge was how to put together a community website using – ideally – one of the free or very cheap services out there “in the cloud”. It had to look reasonably good, and also include an email infrastructure to help keep the 200+ members in touch.

This article describes the software and services used to create and manage a modern community website,  and the reasons for choosing them. I describe the basic steps to get up and running quickly, including optional links with Twitter and Facebook. There are doubtless a number of alternatives, and I make no claims to my solution being the best or being suited to the needs of everyone. But in explaining the choices made I hope to at least help guide those who want to do something similar.

About www.area14.co.uk

The purpose of the website is mainly to report on the charitable and social activities of the dozen or so individual Round Table clubs that made up Area 14 (i.e. Round Table in the East Midlands). There are also links to various events, and a calendar page that summarised events for the year going on. There was also a large number of photos on the existing site.

This link from the Internet Archive shows a typical news page from way back in 2004.

If I was you I wouldn’t start from here….

The  www.area14.co.uk site I inherited had been set up a few years ago. It was a “traditional” website in that it was entirely authored using Microsoft FrontPage, and generated static html pages that had to be uploaded to the web manually. It was hosted by an ISP as just one of a number of commercial websites that were owned and managed by the originator of the Area 14 website. The hosting also took care of some email redirections so that, for example, an email sent to thesecretary @ area14.co.uk would get redirected to the actual email address of the person who happened to be secretary that year.

The practical implication of this set-up was that an entire copy of the website was stored locally on the webmaster’s PC. Any changes to the site – posting a new news article etc – were done in Frontpage and then uploaded directly from the software using the FTP upload extensions. All updates had to be done from this one PC. Also, the FrontPage software is also an intensely manual website authoring tool, and setting things up like searches or article groupings is not easy.

Photographs were typically just dumped in a “galleries” folder, and then had to be manually linked from a hosting page, resized and generally made more suitable for viewing on the internet. Again, quite a manual, time consuming and error prone process.

On the upside, since the site was hosted as an adjunct to the commercial ventures of one of the members of Round Table  (Blue Bird Sam Ltd), it was all completely free to the organisation.

Requirements

So I sat down and had a think about what I wanted out of a revamped website, and came up with the following list :

  1. Use my own URL (domain name), in my case www.area14.co.uk.
  2. Not have master content stored on a single home computer.
  3. Allow more than one person to write articles and publish them.
  4. Require little or no technical knowledge to write and publish articles.
  5. Keep latest news items to the fore.
  6. Provide a nice browsing and searching mechanism so visitors can easily find news about particular clubs or activities.
  7. Easy customisation of the appearance (colours, layout, organisation etc).
  8. Manage links to affiliated websites, such as individual clubs, the national website, and special events.
  9. Provide a feedback mechanism for people to comment on stories.
  10. In addition to news stories, have static pages that are not time-sensitive (e.g. information pages).
  11. Manage email lists.
  12. Handle upload and display of photos easily.
  13. Be straightforward to pass on the job of webmaster when my time is up, and without needing much in the way of training or installation of software.
  14. Free or very low cost (in the order of a few pounds per year).

The problem really separates into two parts – the website and email/communications.

The website requirements pretty much match what a good blogging system should be able to do. And so I looked around at blogging options to start with. Email was a bit of an unknown initially, at least as a free service, so I needed to do some research.

This list was just my initial requirements. Later on, once I had a solution in place, other needs surfaced such as a link to Twitter and Facebook. I touch on these briefly towards the end of this article.

The Solution – WordPress and Google Apps

I decided upon WordPress to address all the problems, with the exception of email. WordPress is a blogging system that is very popular worldwide. There are a number of alternative systems such as Blogger which would probably also do the job. To handle the email requirements I settled upon Google Apps, although I did host the email via my own personal website for a few months.

WordPress

From my own personal website – Pushing Pixels that you are reading here – I had some familiarity with the WordPress blogging tool freely available from wordpress.org. It is hosted it on a machine I rent from my own ISP, and I have complete access to the code, database, and configuration. As an open source piece of software it is highly customisable and very powerful. There are hundreds of design templates, widgets, and plugins that give you a lot of things to play with. But to manage it at this level you really need  a reasonable level of technical expertise to be at ease with the system, how to host things, handle updates, and tweak the system to keep it running smoothly. This precluded it being easy to hand over the webmaster job to my successor, and also meant that we would be tied to a more expensive annual website hosting contract.

But there is also a WordPress service WordPress.com – that  hosts blogs and manages all the technical bits for you.  It is free for up to 5Gb of data – that’s a lot – and pretty modest charges should you need more. You do lose out on the number and choice of widgets and plugins available – you are stuck with what WordPress allows you to use – and the number of themes (designs) is again limited to what WordPress approve. There is still an enormous choice of themes, however, so unless you have quite specific needs you are unlikely to feel too limited on the design front.

One of the benefits of going the hosted WordPress route is that if at any point in the future you decide you want to host it yourself, then you can download all your existing data from WordPress.com to bootstrap your WordPress installation. In addition, a number of other blogging systems can import WordPress data. Between them these two features give you some flexible choices should your needs change.

Creating your own WordPress blog is easy and can be done in literally a few minutes. Just goto WordPress.com, sign up, and register your blog name. WordPress blogs are all named “something.wordpress.com”, where you supply the something, typically the name of your organisation.  The first requirement on my list is satisfied by the WordPress “Domain Mapping” feature so you can get away from the default something.wordpress.com URL to something closer to what you want. In other words, having your URL point at the WordPress servers instead of somewhere else. It is very easy to do, and described in the WordPress help here. In my case I used www.area14.co.uk instead of the default area14.wordpress.com.

There is a small charge for this of $10 per year (US dollars). If ever you want to host this away from WordPress, then you can simply stop the domain mapping.

Choosing a Look

Once you have your website registered the next step is to get it set up ready to go live. Typically this means choosing a theme (what the site looks like), customising any plugins, and optionally setting up some static pages to tell visitors a little about your organisation.

Creating the header image

Building a logo in Photoshop

Choosing your theme is very much a matter of taste. One of the nice things about WordPress themes is you can easily try out different ones without messing anything up. For the Round Table website I chose ‘Digg’ – a three column layout so I could have navigation and information panels down both sides, with a central wider column that contains the main content of the website. I also wanted a theme that let me define my own header image to go across the top of the page.

If you do want your own header image then you need to find out the dimensions expected – i.e. the width and height in pixels – which you can get from the theme information. I used Photoshop to knock something up of the right size, and which blends together different subimages – the Round Table logo, the Area 14 logo, and a white background. The screenshot shows how this was built.

Writing a post

Once you have your blog all set up, you’ll want to start writing things to populate it. There are two kinds of things you can write (well, three actually, but I’ll come to that later):

  • Posts” – these are the articles that appear in the central part of the home page of the site. The system automatically displays the newest one first, with earlier posts shown further down. It also automatically organises posts into”Recent Posts”, “Archives” etc.
  • Pages” – These are more general articles that appear along the top tabs and in the “pages” section. Whereas posts are generally date-stamped news items, the content of posts is more factual information about the club that we want to be visible all the time and so is not time-sensitive.

This link on the WordPress FAQ provides a more concise description of posts and pages.

The third item is a “Link”, which provides a way of adding permanent links to the sidebar of the website. You could, for example, link to sponsors and related websites from here.

To create a new post just press the “New Post” link, and you can just type away. For example:

Writing a new post

Writing a new post

If you have ever used Word or email, then the user interface for writing stuff is obvious, and I won’t describe it here. You also can upload pictures from the “Add media” button on the Post bar.

The panel on the right of the editing page  provides the commands to preview your post, save a draft and finally to publish it:

When you are finished you just press the Publish button. Then go to the main page (there’s a link “Visit Site” at the top to help), and you’ll see your post at the top.

And that’s pretty much it for the basics of setting up and populating a website. There is much more to WordPress than I have described here: for example, you can edit posts after publishing them, organise with tags and categories, insert pictures and video etc. My advice is to just dive in and explore. Have a look at the widgets available in the Appearance section of the WordPress administrative page: these provide a number of services such as Google Maps, links to Flickr photo galleries.

Email – the Google bit

Google Apps is a free service that has some overlap with WordPress. It lets organisations set up their own websites, complete with hosted email, mailing lists, etc.  While it would have been simpler to just have the one system, the website features of Google Apps just aren’t as nice and easy to use as those of WordPress.

So what do we want out of an email system to support clubs and voluntary organisations? I had a few things on my list:

  1. Provide email addresses along the lines of  “areasecretary@area14.co.uk” – i.e. have email addresses to match your club URL, and a name that matches a position in the club rather than an individual. The point here is that the email addresses remain the same from year to year even though the actual recipient changes. But even better, it means you don’t have to post your private home email addresses onto the internet – always a bad thing to do!
  2. Allow such emails to just forward on to the real person, without requiring them to learn how to manage multiple email accounts.
  3. Mailgroups to assign a single email address that gets delivered to multiple people. So you may have one group for everyone in the organisation and another for the committee, for example.

The email features of Google Apps ticks all these boxes.

The main problem to be aware of when you have both WordPress and Google Apps is that you need to handle having one domain name (e.g. area14.co.uk)  being split across two destinations: you need to ensure that web traffic gets directed to the WordPress servers, and email gets sent to the Google Apps servers. Normally when you host a domain, both web and email are sent to just one place. Fortunately, the WordPress people thought of this, and provide a facility to make it easy to set up. See the instructions  on WordPress website here.

Signing up for Google Apps is simple. Once you have an account, then you can set up the email accounts and mailing lists via the either the “Manage this Domain” or “Users and Groups” menus. One useful feature of the user interface for setting up mailing lists is that you can just paste a whole block of email addresses to the “Add new members” input panel. The one annoying feature that I hope will get corrected soon is that you cannot search your mailing lists for particular email addresses. This would be useful when having to change emails. The irony of not being able to do such a simple search within a Google owned site is not lost on me!

There is much more to Google Apps than just email hosting, but to date I have not really explored it. For example I think there is scope for using the calendar facilities – currently the way I list upcoming events for the Round Table websites is just to have a page with a list of dates in a table (see example here). And WordPress’s handling of tables is not very good so I end up doing hand-crafted HTML directly. It would be great if I could integrate a proper calendar control with the website, and I think that Google Apps may be worth looking at.

Photos

A slideshow in Flickr

A slideshow in Flickr

WordPress nicely handles the upload and display of photos and other images to be part of an article. However, its slideshow capabilities are somewhat limited and so in practice it is best suited to a few images to support a written article rather than presenting a whole load of photos at once. If you get to the stage where this limitation affects you, then I recommend you use another free service called Flickr. WordPress provides direct links to Flickr albums and photos, which makes for  a nice integration.

For an example Flickr site, click here to see the one I set up for Round Table Area 14.

Set up an account in the name of your organisation, and you can then upload whole sets of photos at once. You can organise photos into sets, and then post links to a set within your blog post. You can also point Flickr back at WordPress, and so you can write articles directly from Flickr too and the images will be insterted into your post for you.

Extras – Using Twitter and Facebook

Twitter is all the fashion these days. Rather than me describe it in detail I advise you goto twitter.com and dig around a bit there. In a nutshell, it provides a service that lets you broadcast short messages over the internet to anyone who is interested. As such, it is great for little news items, or ways of alerting people of events in real-time.

WordPress has a widget that will display a Twitter feed in the side panel. You just give it the name of your Twitter account, and that’s all you need. When people visit your website, they will see the latest Twitter items displayed on a sidepanel. Have a look at my Area 14 website for an example. This shows feeds from the Area 14 Round Table Twitter feed.

The link with Facebook works the other way around: when you create new posts on your website, Facebook will update your profile so that all your Facebook friends can see it too. You could, however, make it so that more than one person has their profiles updated – there is nothing stopping multiple people from being updated by the same website. This could be quite a good way of publicising your organisation’s activities around a number of social networks.

Miscellaneous Hints and Tips

While writing this I thought of a few tips and guidelines that will hopefully help those setting up and managing community websites.

  1. Create login accounts that are related to the name of your organisation, and use passwords that do not bear a relation to any of your normal personal ones. Remember that at some point you could be passing on the management of the website to someone else.
  2. You could be looking after between one and four free webservices, each with their own logins and passwords. Write them down somewhere!
  3. Resist putting full email addresses in plain text on your website (e.g. someone@yourorganisation.co.uk), as you could open yourself up to email spam attacks. Instead write it as something like ‘someone at yourorganisation.co.uk’ and most people will understand that. (Note that all the email addresses I’ve used in this article are fake).
  4. The same applies to phone numbers if they are personal rather than specific to an organisation.
  5. Create an “About” page (not a post) on your WordPress site,  and give  summary of what your organisation is all about.
  6. When posting photos, try and be critical and only use good ones that actually show something meaningful about the event they were taken at. A few good and carefully chosen photos will have a much bigger impact than tens of poor ones. Consider cropping photos to focus attention on the main subject of the photo.
  7. Try and post some news up reasonably frequently – if people see your site changing they are more likely to keep coming back. If you are trying to attract new members then an active website implies an active organisation that people will feel more inclined to join.

Summary

If you have managed to read this far you’ve done well! I’ve tried to cover all the basics, and as result the article is a little long. I have described how to set up an internet presence for little or no money which is well suited to clubs and community organisations. I have also shown how you can separate out your email services from a website, which gives you flexibility and choice. The article has also covered social media websites, and gives a few hints and tips to get you started.

I have set up three websites now using WordPress and Google Apps: Area 14 Round Table, Long Eaton Round Table, and the 15th Long Eaton Sea Scouts. The last of these I set up on behalf of a friend, and although I continue to give help and advice I do not actively administer it or contribute content. It has acted as a test for the “easy to handover” requirement. They do not all use all of the services described, which is a concious choice based on the slightly differing requirements of each organisation.

I would appreciate any feedback if you use the preceeding information for your efforts, or if you have questions on what I have written. Either login and leave a comment, or send me a Tweet @gregwhitfield.

Leave a Reply