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:
- A site per language – for example rs.hub.org.rs and en.hub.org.rs for the Serbian and English versions
- Each page duplicated, one for each language – for example hub.org.rs/o-nama (Serbian) and hub.org.rs/about-us (English)
- 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
- 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!