Category: Web Design

Search engines are one of the sets of rulers of the world wide web. I think that’s a fair statement, but happy to hear any counter-arguments. Ever since the dawn of the web, content producers have been trying to get content consumers to visit their sites. We seem to have passed the heyday of directories and categorisation (RIP GeoCities) and are firmly rooted now in an era where “Google” is almost synonymous with “the internet” for many people. Do you want to find a picture of a kitten? Ask Google (or ask Bing, or ask Jeeves or Lycos (yes, it is still around!) or DuckDuckGo…). That is unless your friends on your social media platform of choice have already directed you there, but I’ll ignore that, as the focus of this blog post is on search engines and SEO (search engine optimisation). You want to find a local plumber? I’m guessing that asking a search engine might be one of the options you consider.

Let’s look at this from the other side now. You are the provider of a service; maybe you’re a plumber, maybe you’re running maths workshops. You are aware that people are looking for plumbers and maths workshops via search engines; how do you make sure that your details feature as one of the top results? Before I go any further, I should say that I am not an SEO expert and therefore you should critically evaluate my musings on the subject before taking any action based on what I’ve written here. Back to the matter in hand; you’re running maths workshops and you want people to know about them.

It’s no surprise that I’ve picked maths workshops as an example here; we’ve recently been working with Nicky Bishop to develop a website for her to publicise the maths workshops she runs in East Sussex. Unsurprisingly, she would like visitors to her site and in addition to social media exposure, Nicky is aware that people will be using search engines. I disclosed fully that I’m no SEO expert and started reading up on SEO techniques. But actually, a conversation with a good friend was more helpful than anything I read, bringing me back to earth. To paraphrase Tim Wakeling:

Search engines are trying to find relevant websites that the searchers will want to read

A ground-breaking statement? Hardly. It’s common sense. But it was a good reminder that the bottom line is the person doing the search. They aren’t going to care about a list of keywords on your site, or hidden text; they’re going to care about the content. Has it answered their question? Relevant, up to date content is king. And search engines recognise this; it’s no use having a list of keywords on your site if the visitor hasn’t had their question answered. Whilst no-one knows the exact algorithms that Messrs Google and Bing (Yahoo! has been powered by the Bing engine since 2009) use for ranking websites, there are a few common sense things I (and others more qualified than me) suspect they are focussed on:

• If my site has been linked to from another site with a high ranking, that probably indicates content of interest on my site
• If my site has been updated recently, that probably indicates relevance
• Do my page URLs correspond to the content within the pages? It’s much easier to see that a URL ending “/contact” is a contact page than a URL ending in “/page=132”
• Are there words that crop up frequently in a certain page? If I’m writing an article about SEO, then it makes sense to mention the word “SEO” frequently in the text
• Is it clear where links take visitors in the site? “Click here” tells you nothing about where that link is going to take you, whereas you might get a clue from something like “My mate bob who is a builder”

In essence, I want my website to be full of content that attracts and then holds the interest of your audience. By all means I might include certain words in the text of your site that I think my visitors might type into a search engine, but I write content for a human, not a search engine to consume.

All that considered though, there are some things that I can do to help search engines. I can include a sitemap, listing the various pages on my website that I think a search engine might want to index. I can include HTML5 semantic tags (I only really use “nav”, but I should probably use more) and I can go even further than that to include other semantic markup. Anyone human viewing the maths workshops diary will recognise that it lists events there. To ensure that a search engine would also recognise that as an event, why not mark it up as such:


<div itemscope itemtype='http://schema.org/Event'class='diaryworkshop'>
<div class='event_date' itemprop='startDate' content='2015-09-12T09:30:00+0100'>Saturday 12 September 2015, 9:30am</div>
<div class='event_title'>
<div class='workshop_name' itemprop='name'>N1 Decimals, Rounding and Factors</div>
<div class='workshop_location' itemprop='location' itemscope itemtype='http://schema.org/Place'>
<span itemprop='name'>Ashburnham Pavilion</span>
</div>
</div>
<div class='event_price'>£36 introductory offer</div>
</div>


That’s not putting in extra content for the search engines; it’s helping them to understand what’s on the page, by saying that it’s an event, then tagging the date, title, place and price.

And when I’ve done all of the things listed above, the search engines are there to give me a helping hand by telling me what they know about my website:

• Google webmaster tools
• Bing webmaster tools

Will any of this work? Who knows! People write whole books about SEO… and these are just a few musings that make sense to me.

Sometimes life gets in the way of updating websites, and that’s what’s happened here! All of our efforts currently are being plugged into living full time in a motorhome as we travel around Europe, whilst documenting it as well as we can on our other website (kiriandsteve.co.uk):

However, as we’ve been travelling, we’ve been stopping to help at various projects; telling them what our skills are, then being open to take on any tasks they’d like us to do. At HUB, Serbia, their need was for a bit of a facelift to their website. Whilst the current website was pretty good, it was difficult for them to update, there were specific parts of it (search engine-readable URLs, newsletter sign-ups) that weren’t working for them and they also wanted it to look a bit more modern. With part of their problem being a confusing content management system (they were using Joomla), they were basically asking for a re-platforming of the site, with a few design tweaks here and there, rather than a wholesale re-design. Oh, and did we forget to mention that the site had to operate in both Serbian and English? Gotta love a bit of a challenge!

Here’s the flash splashscreen and homepage from the old version of the site:

WordPress is the content management system that we know (and love), so we got to work. It’s not a particularly complicated website, but the main complexity with this site comes from the two languages. This is the first multi-lingual site that we’ve designed, so we’ve learned a lot this week! Essentially, from our understanding, you have 4 options when it comes to multi-lingual sites:

1. A site per language – for example rs.hub.org.rs and en.hub.org.rs for the Serbian and English versions
2. Each page duplicated, one for each language – for example hub.org.rs/o-nama (Serbian) and hub.org.rs/about-us (English)
3. Two languages on each page – either Serbian and English text side by side, or only one language displayed at a time, with a switcher element
4. One master website, with on-the-fly translation – the whole website written in Serbian, with the option for English speakers to have an automatic machine translation when they visit it

We pretty much discounted number 4 straight away; the previous version of the website had human translation of all content into English, so to have machine translation would be a step backwards. Numbers 1 and 2 would potentially raise synchronisation issues across the site unless there was something to prompt content editors to update all pages. Number 3 would confuse search engines. All of them have their down-sides… so which do we choose? Our first call was to see what W3C say about best practice for multilingual sites. Well, they’ve set up a site dedicated to the multi-lingual web, but it wasn’t particularly easy to find any guidance on which option to go with. The gut feeling was that options 1 and 2 felt best, so we started to hunt for WordPress plugins.

To add further complication to the multi-lingual conundrum, Serbian uses two alphabets; Latin and Cyrillic. There is a WordPress plugin (SrbTransLatin) which allows Cyrillic content to be displayed in either Latin or Cyrillic… this turned out to be very useful, as the content of the previous site is in Latin script and the Serbian WordPress localisation uses Cyrillic. Switch on plugin, turn to “always use Latin”. Bingo. So now we just needed something that could help to keep two Latin script versions of a page synchronised (as much as possible). To cut a long story, involving testing a couple of other plugins, we chose Xili Language to manage the synchronisation of pages in different languages.

This WordPress plugin adds a few little features here and there around the admin side of WordPress to tag pages and posts as written in a certain language. It’s not the most intuitive plugin to set up, but there’s extensive documentation and it’s quite good once you get your head around some of the quirks! In the case of creating pages, you specify the language of the page you’ve just created, then you’re prompted to add another page which is a translation of that page. The menus are then basically sorted out for you – if a visitor is viewing a Serbian page, the only other pages that will be shown in the menu will be Serbian pages. There’s then a PHP hook (a function named “the_curlang()”) which is then extremely useful to find out which language visitors are viewing the site in, so that you can add in extra content in headers and footers that are specific to that language.

So… just over a week on from receiving our brief, and complete with a little bit of scope creep, here is the updated site:

We’ve tried to retain the general feel of the site, whilst making minor improvements where possible. For example, we’ve removed the unused space at the top of each page and we’ve replaced the previous flash banner animation with a CSS3 and Javascript animation, where the images can be changed by adding and removing images from a WordPress gallery. We’ve added a videos page (as requested), added a calendar page (simple embed of a Google calendar), added a blog, used consistent icons for the contact page and embedded a Google map on their contact page. There’s also now just one stylesheet behind the whole site rather than the individual page stylesheets of the old site, which should help to improve consistency of pages across the site.

This has been a fun challenge and it will be interesting to see whether we’re called upon for any other website tweaks before our trip is up. For now, it’s back onto the road in Bertha!

Over the last 2 and a half years I have been cultivating the online presence of the church we go to; St. Mark’s Kennington. Although it’s grown and changed fairly organically, this week marks (pardon the pun) the date that the website is finally at a level where both Kiri and I are happy with it in terms of functionality and design. Obviously there’s still more that we’d like to do to it (for example optimising it for mobile, improving some of the photos), but for now we’re happy.

Our journey with the website started with a familiar story – a church website that was ok…but which needed a lot of regular attention to keep it up to date. The first step was to get the front page changed so that it showed activities that were going on this week, but without someone having to update the site each week. So with a bit of help from the Google Calendar Zend framework I wrote some PHP to display events from the church calendar that were coming up in the next week, then extended that so that upcoming non-recurring events could be shown as dates that people may wish to note in their diary.

From there, it was clear that it would be useful for the weekly news sheet to be made available on the website. By this time, I’d transitioned the site across to use WordPress, so I created a custom post type of “News Item” to allow our church administrator to add and remove news items easily. This was followed shortly by a custom post type of “Sermon” so that sermons could be easily uploaded to the site.

As I had taken on managing the web content as well, I started blogging a bit and thought it would be good if we had a social media presence, so I created a Facebook page and Twitter account. I hooked these up to the main website and the event calendar using IFTTT so that there would be automatic updates on the social media accounts when a news item was added, a sermon uploaded, a blog post written or when it was an hour before an event scheduled in the calendar.

Photos were a little lacking on the site and as a photographer, this made me a little unhappy, so with the help of the NextGEN Gallery plugin I added galleries of pictures of the church, church hall and ministry leaders. This was then extended to give the option to add pictures of events as and when they happened.

I was pretty happy with the functionality by now, but it didn’t look great. Enter Kiri. Kiri took what I’d created and wrapped it in a better design, encouraging me to tweak some of the functionality where it could be better. This included the addition of “highlights” on the front page of the site to replace an image carousel – functionality that allows the church to highlight important things going on in the life of the church.

So that’s where we are at this moment. As Kiri and I will be leaving St. Mark’s (and London) shortly, we’ll be handing over the management of the content of the site to someone else, but we intend to remain fully involved in the running of the site from technical and design perspectives.

Responsive design. It’s the latest buzzphrase (I don’t even know if “buzzphrases” exist, but if they did, this would be one) in anything to do with web design at the moment. So what exactly is it, and why should web designers and their clients care about it?

Well, back when I was coding up my first websites a few years ago, you could be pretty sure that if you were doing a fixed layout site (i.e. it doesn’t change size with a bigger monitor) and you set your minimum width to 750 pixels you’d be ok. This was back when 20% of people still had monitors with a resolution of 800 x 600 pixels, so you had to cater for them, removing a few pixels for scrollbars and screen edges. Then, using the BBC news website as a good guide of when to change (in this case June 2009), that increased to a width of 1000 pixels as the majority of end users had monitors starting at 1024 x 768 pixels.

This resolution seems to have stuck as a kind of standard for desktop / laptop machines, with companies developing separate versions of their sites for mobile phones. This was often found at m.mycompanydomain.co.uk, with an automatic redirection to that version of the site if it detected a mobile being used, often with fewer graphics so that loading times were faster. But hang on, what if I tether my phone to wifi – I still want to see images on a site. What if actually my mobile device is an iPad…I might want to see the normal website, not some cut down functionality design for a much smaller screen.

Step in responsive design – an idea that’s been around for many years, but just not badged as such. One version of the data behind the site, several different “views” of it for different sized screens, and a controller to determine which view should be shown. To geeks such as me, we know this as MVC coding – model, view, controller. When a site detects what type of device is accessing it, a different stylesheet can be served up. The site might work off the user agent (i.e. details of the machine and browser), or maybe the number of pixels available in the browser window. The code stays the same – just the CSS changes.

So is it just about what it looks like? Well, partially, but it’s also about usability (as alluded to in the title). As people who have used Windows 8 (designed to work with a touchscreen) with a mouse will know, you have to design differently depending on whether a mouse or a finger is being used. Buttons and links have to be bigger if you want a finger to select them (guidelines suggest a minimum of 44 x 44 pixels) and gone are the days of using “a:hover” to have a different effect when hovering over something. Now don’t get me wrong, the hovering functionality still works with a touchscreen (for instance on the home page of pigandporter.co.uk, you can instead click on the headings of Quality, Flexibility and Reliability), but you can’t rely on a hover of a mouse to inform the user that they should click.

All this is great for end users when implemented correctly – they visit the same site from different devices and have a good experience of the content optimised for the method of viewing. It does, unfortunately, come with a price though in terms of extra web development required – the cost of a designing and implementing a couple of extra stylesheets, but I think it’s well worth it, especially with the statistics showing an increase in the number of users who access the web through mobile devices. And this site? We’re designing it with all of these things in mind.

I was considering starting this blog post with an apology for it being a bit geeky…but actually that’s not something that I should apologise for – I should celebrate it. So, in true geek style, I thought I would share what I think are the best core WordPress plugins as we start 2013. Oh – before I start, I should probably say that I’m not associated with any of the providers of these plugins, so they’re not paying me to promote them.

Image gallery plugins
Most websites that we (Kiri and I) have worked on have required some kind of image gallery. When I wrote my previous photography website (in the days before Kiri), I wrote the gallery functionality from scratch in PHP, but it didn’t have a particularly usable admin interface as I knew I’d be the only one uploading to it. However, we needed something more user-friendly for sites that other people would be updating. WordPress does have its own native gallery, but I think it is no co-incidence that if you perform a search for “gallery” within wordpress.org, the top result is the NextGEN gallery plugin. The flexibility that it provides in the admin interface is great, with the ability to organise images into albums and galleries, update the thumbnails etc. I’ve made a few tweaks to the CSS and navigation between pictures on a couple of our sites, but think it’s great in its raw form too.

Search plugins
Not all websites require a search functionality – in fact there’s an argument for leaving out the option to search, which allows visitors to use their favourite search engines, whether that be Google, Bing or Lycos (ah, flashback to the late 90s!). Now I’m aware that WordPress again has native search functionality, but in line with the inner workings of WordPress, the results are sorted by date. In this day and age, we’re used to search results being returned with the most relevant links up at the top – step up Relevansii. Once again, it’s got a lovely admin interface and it’s very easy to integrate.

Social media “sharing” plugins
In a world where social media is king, you want to be sharing your content with the world. Actually, scrub that. You want your visitors to be sharing your content with the world. It’s got to be easy for them to share your words of wisdom with all of their friends on Facebook, Twitter and Friends Reunited (wow, I really am having a throw-back day here). There are loads of companies begging to help you with that so you don’t have to add individual buttons to your site. Most have catchy names like addthis or sharethis – doing what they say on the tin. Something else that does what it says on the tin is sexy bookmarks. Sadly, since I started using this plugin several years ago, they’ve renamed it to “Shareaholic“, but it will always be sexy to me. You get to choose which social media sites you feature and which bits of your site you want shareable, and you’re sorted. Boom.

Cookie compliance plugin
In May 2011 the Privacy and Electronic Communications Regulations were updated with regards to their cookie policy (cookies are the crumbs of information that websites store on your computer so they recognise you when you visit the site again). This meant that websites have to ask the visitor’s permission before putting a cookie on their computer. Now that’s quite a bit of work for website owners to do, and for users to click “yes, I agree” on every website…so the Information Commissioner’s Office updated the guidance in May 2012 saying that actually implied consent will do. As WordPress is designed to remember someone’s name when they comment on a site, WordPress sites require a warning about cookies. I’ll be honest, I haven’t found any great plugins to warn users yet, but the best one I’ve found (aside from the spelling mistake in the word “compliance” and some CSS validation errors) is the EU Cookie Law Complience Message plugin where you can customise the warning and provide a link to your own compliance page (or the ICO website).

Anti-SPAM plugin
Before Askimet started charging for businesses to use their plugin, I probably would have recommended them (and I guess I would still recommend them for personal blogs), but actually, I’m quite happy with the in-built WordPress SPAM handling. I can’t really explain why in any better way than a blog post at oneextrapixel.com does…so I won’t!

And there you have it – my favourite WordPress plugins. I’m now going to go and do something ungeeky like…ummm…ummm…you know what, who am I kidding? I’m off to gizmodo.co.uk to check out the latest gadget offerings from CES!

So it’s been several months since we’ve had a blog post here and it’s not because we’ve been being lazy – quite the opposite in fact!

The last post mentioned marriage and a certain wedding in September, which was a great occasion with hearty food and drink, featuring especially good burgers and great local beer.  It was therefore an honour when we were asked to design and implement a website for Robin and Sean who provided said tasty refreshment and are going into business together providing artisan event catering.  So for the last 3 months Kiri has been busy with the design side of things and I (Steve…Kiri’s husband…I probably should have introduced myself earlier) have been doing the more geeky technical implementation.  We are therefore proud to present the website of Pig and Porter – www.pigandporter.co.uk.

It’s been a great learning experience for both of us working with Robin and Sean as they had clear ideas about how they wanted to create their brand, but they were also open to our (read “Kiri’s”!) creative suggestions.  This is officially our first website project working together as designer and geek, although our church website (www.stmarkskennington.org) is high up the list to have the ‘Kiri’ treatment having only been created by Steve to date.

Firstly, however, we’ll focus on designing this site.  The plan is that in the new year, I (Steve) will merge my photography business, currently trading as srphotos.co.uk, with Lightbulb Head and Kiri and I will be able to bring complimentary skills to the business.  That’s all for 2013 though!  For now, it’s Christmas and we will focus on the light.

The light shines in the darkness, and the darkness has not overcome it.

Happy Christmas all!