Charity website

Charity website home page

Carefree Kids is a small charity working in East London.

I created a new website for them working on every stage from initial planning to implementation.

The charity’s aims were to move the site from a Joomla! platform, which had been set up by an agency and which only one person knew how to update, to a self-hosted WordPress.org site so that more staff and volunteers could be trained to contribute to the site.

By moving to WordPress and a new hosting service they were also able to reduce their monthly website costs to just the cost of the hosting (around £5 a month) and the cost of the domain name.

My role covered:

  • Setting objectives for the website
  • Creating a content plan and production schedule
  • Creating a mock up site using WordPress.com
  • Selecting a design theme
  • Creating a menu structure
  • Creating a categories and tags structure
  • Writing selected pages including:
    • Cookies and privacy page
    • Accessibility page
    • Contact page
    • Donate/fundraising section
  • Editing and proofreading all other pages:
    • For sense
    • For navigation
    • For spelling and grammar
  • Set up a Translate page to link automatically to Google Translate
  • Search engine optimisation (SEO) on all pages, posts, images and graphics
  • Creating and uploading graphics and embedded content including:
    • new header
    • location maps
    • graphs
    • embedded calendar and spreadsheet
    • formatting Word documents into the charity’s housestyle
    • adding alt-tags and maximising for SEO
  • Creating inline CSS graphics
  • Editing and enhancing photos
  • Transferring the domain name
  • Transferring the hosting
  • Installing WordPress.org
  • Exporting the WordPress.com mock up site into WordPress.org
  • Installing the design theme
  • Selecting, installing and activating plugins
  • Selecting and installing widgets
  • Creating widgets
  • Editing and checking hyperlinks
  • Creating a user sitemap
  • Creating an XML sitemap
  • Setting up social media and sharing links
  • Writing and publishing blog posts on the site and social media
  • Creating a spreadsheet of plugins evaluated and those chosen and installed
  • Creating a site back-up/export file
  • Monitoring initial analytics
  • Creating training notes and presentations for staff/volunteers

Initial meetings were held in London, while I still lived there, however most of the work was carried out remotely after I moved to Ipswich.

The site was delivered to schedule, just before the old hosting arrangement was due to expire and went live without any downtime.

Screenshots

Inline CSS graphic

The graphic below was created on the original site using inline CSS code (the example here, however, is a screenshot saved as a graphic file). Inline CSS can only be used for basic text and colour graphics but has the advantage that the text can be read by screenreaders and Google Translate and so is more accessible.

Example of a graphic created on the original site using inline CSS

Google Translate

Language links to Google TranslateThe charity is in an area of London where high number of community languages are spoken. Linking the site to Google Translate allows instantaneous and automatic translation in over 70 languages. Google Translate is far from perfect and can produce some howlers, but this goes a long way to including people who might otherwise be excluded — and this charity has never had and will never have the funds to undertake costly translation and interpreting. Using Google Translate is simply a process of linking the code on the site to Google Translate — it costs absolutely nothing.

You can also see this in action on my site’s Translation page.

The examples below show French and Gujurati. Note how the coloured buttons in the right sidebar, produced using inline CSS, have translated as well.

Charity website in French

Gujurati

 

Privacy and cookies

It’s been a legal requirement since 2012 to include a privacy and cookies policy on your website, but many sites still do not comply with the law.

Privacy and cookies graphic

Data Protection

If you’re collecting personal data you should also have consent for that. Many sites do not comply.

Data Protection graphic

 

Maps

Maps graphicIt’s easy and commonplace to embed a map from Google Maps into your website. Before you do, make sure though that you have submitted your details to Google Places through Google MyBusiness.

However Google maps has limitations:

  • it’s links to local transport arrangements don’t always give the best recommendations — and won’t be able to show supplementary information about local car parking or accessibility arrangements for example
  • you have to be online to use it — tablet users who are not paying for an extra away from home internet connection or smartphone users who pay for internet access or have limited downloads might not thank you for that
  • Google Earth photos are often out of date: your building may not be shown or may have a different name on it if you moved in in the last few years
  • for businesses it may show your competitors more prominently than you

Many of these issues affected the charity and their target audience, so we decided to give two options:

  • embedded Google Maps
  • a simple pdf map I drew for them

Giving alternatives helps to increase the accessibility for everyone.

Testimonials

I installed a testimonial plugin (it had to be a very basic one without complex settings) which I set up to work on both the sidebar and on selected pages.

Unfortunately the plugin assumes you can add the photo of the person giving the testimonial — that isn’t feasible for this charity so I created a set of simple quotation graphics in different colours to replace the otherwise ugly hole left by the lack of a photo.

Testimonials graphic

 

Advertisements