I 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.

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

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

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.

Start Slide Show with PicLens Lite

A quick follow up on the post a couple of months ago about my quest to find a simple way of embedding Google Maps in WordPress blogs. Just to recap, the main issue I had was finding a way of embedding custom maps.

While I still have yet to find a solution to self-hosted WordPress blogs like this one, there is a good solution for anyone who has a blog hosted at WordPress.com. For those of you that don’t know, this is a site that looks after thousands of WordPress blogs for free. They run their own specific version of WordPress – you can’t get at the PHP code or install your own plugins. But it’s a great way to host sites at little or no cost. I run a couple of community sites hosted there, both for the Round Table organisation – see Long Eaton Round Table and also the Area 14 sites.

That version of WordPress provides a tag – “googlemap” – that can take any Google Map reference including custom maps and embed them in the page properly. It works really well – for an example, see the About page on my Area 14 site. Instructions for using the tags can be found here.

Now all we need is the same thing on the regular version of WordPress, and I’ll be a happy bloke.

Just a quick note to describe some recent changes to this site.

I’ve changed the template from the attractive but not easily configurable “Feather” theme to Chris Pearson’s “Cutline 3 column” one. The initial advantage of this was it was easy to set up my own header images to be my own photos rather than someone else’s. All the headers are my own.

While it was nice to have each individual page type (posts, archives, pages, about etc) have their own header image, Chris posted a simple mod to the header PHP file that randomly selects an image from a set. Every time you visit the site or refresh a page you’ll get a different header. I intend updating the image set as often as I can. If you read further down this post I have described the header images currently in use.

But there have been more changes than this.

I have also updated to the latest 2.5.1 version of WordPress – I was at 2.2 previously. The update was easy to do, so kudos to the authors of the program to make it idiot proof.

The cool new feature of 2.5.1 that I could use was widgets – the bits you see on the side panels. While they did exist in 2.2, they are much better and easier to set up with the newer version. I may have gone a bit widget mad, though. Here’s what you can currently see:

• Flickr sidebar – I’m turning into a massive fan of Flickr, and this widget lets me show an image selection.
• PicLens Slideshow – The Piclens plugin is worthy of a whole post of its own. It is simply a stunningly good plugin for Internet Explorer and Firefox that provides a fantastic way of browsing image libraries. The dynamic mini-slideshow adds a nice touch to any blog, and by default just cycles through all the images in the blog. It should let you point it at a Flickr feed too, but I can’t get this working. There’s a support query in with the authors, but nothing back yet. Once this is fixed, though, then I can get rid of the Flickr sidebar.
• Site Vistor Cluster maps – not actually a dedicated widget, but rather simply a bit of HTML in a generic text widget. This shows a map of where in the world people are who have been reading this blog. See the Cluster Map homepage for more information. It’s really easy to set up.

The plugins I have currently installed are:

• Akismet comment anti-spam – I wish I had this earlier. The most popular post on this blog is the one about streamlining your PC for games, but it keeps getting spammed. Since installing Akismet, however, I’ve not had to deal with idiotic comments advertising various unsavoury products.
• Flickr Photo Gallery – provides a neat link between images on Flickr and blog posts.
• Google Maps for WordPress – already described in an earlier post.
• WP Piclens – Provides a direct link to the Piclens image browser from any picture on the blog

Header Images – updated 24th May 2008

Here is the current set of header images along with descriptions of where they are from. Click on any of them to see bigger versions in Flickr – or just keep hitting different pages in this site until they get randomly selected:

	No prizes for guessing! A scan of a photo taken in 2003 while on holiday in Australia.
	Harbour of Roscoff in Brittany, France. Taken in 2007.
	Photo-stitch of 4 images taken from the top of Mount Stinson in New Hampshire, USA in 2004.
	Ribblesdale viaduct in the Yorkshire Peaks.
	View from a walk in Yorksire Peaks near Ribblesdale viaduct, on the way down from Whernside.
	View of, I think, rapeseed field. Taken near Darley Abbey in Notts.
	Photo-stich of four images, taken from Mount Major in New Hampshire.
	Pebbles on a beach in Sidmouth, Devon.
	Canal Lock, converted to black & white as a post process.
	Darling Harbour, Sidney Australia.

All these images are also geo-tagged in Flickr, so if you do click on them to see in Flickr you can access a map of the exact location they were taken. This is a neat example of the integration of online albums, blogs, and mapping – all for free!

To fit nicely with the Cutline theme, these images have to be long and thin at 970×140 pixels. Luckily this is easy to do in Photoshop – just set the custom crop size to 970×140, and interactively select the area wanted. The challenge is in finding sections of images of this aspect ratio that are good and/or interesting in some way. I make no claims to being successful in either of these aims for all of the images. But, as mentioned earlier, I will periodically update the image set.

Start Slide Show with PicLens Lite

I have been creating my own Google maps a lot recently, largely in support of an upcoming attempt at the 3 Peaks 24 hour challenge – hiking up the three highest mountains in the UK all in 24 hours. I’ve got various maps for the three hiking trails, plus a few put together to help plan training walks.

I’ve been scratching around for a while experimenting with various ways of sharing these maps, and embedding within a WordPress blog seems a good thing to do.

For blogs that you host yourself and can upload new plugins too, there is Inline Google Maps, which gives results like this:

And lets see!

Oh….the damned thing doesn’t work…..Back to the drawing board….

Here’s an attempt with Google Maps for WordPress :

This works really nicely – lots of control over the map, and you get immediate navigation. And it just worked. But the problem with this is that apparently I can only use place names for the map. What I really want to do is to embed my own custom maps. For example, this one for the 3 Peaks challenge.

I’ve left a query with the author of the plugin, but in the meantime it’s back to the drawing board again for GM plugins.

Update (23rd May): The author – Aaron Campbell – said in this comment saying that at present he has no plans to update the plugin to take user specified maps. This is a great shame – customised Google maps are incredibly useful, and being able to embed these in a posting would be great. So, maybe I’ll write my own plugin. It’s only software – how hard can it be?   Don’t hold your breath though, I’m a busy chap…

Start Slide Show with PicLens Lite

What a pain in the rear! WordPress appears nice as a blogging tool, but my attempts to format some code snippets was painful beyond belief.

Every time I pasted some code in and surrounded it with the code tags, the generated HTML had extra paragraph markers and line breaks, and screwed up the position of the closing code marker.

Even a search for plugins did not cure things. I installed one or two “code formatting” plugins that made things a little better, but still required a lot of post-paste editing of code to get anything like presentable.

It turns out that the Rich Text Editor in WordPress 2 is to blame – it completely messes up. So my advice is to disable this from your user profile.

The thing that rankles is that the rich editor is enabled by default. I did not even know it was optional until I did a Google on code formatting in WordPress. It all just seemed much much harder than it should.

Anyway, hopefully this snippet will save others the problem in the future.