Posted 16th September 2013 | By ExtraMile

If you've been keeping up with the latest tweets from extramilecomms, you'll have seen that the website development for our EU funded multilingual project is well underway.

What's it all about?

SPiCE³ (Sectoral Platform in Chemicals for Energy Efficiency Excellence) is a project designed to enable the European chemical industry to improve their energy efficiency, particularly aimed at SMEs as they make up a substantial part of the industry.  It aims to bring together a range of expertise, tools and knowledge from partners representing 11 countries and expert organisations within Europe.

What part does ExtraMile play in the project?

It's our job to create an online platform which will act as an information hub, allowing for expertise to be shared and the aim of improving energy efficiency to be met. No pressure then!

Just some of the key requirements of the website:

  • Available in 12 languages - This means that all users will see an identical website, but in the language of their choice. All done with the use of a language switcher, a little like booking.com
  • User friendly and intuitive - Absolutely key to the project as it's a new scheme, so users will have little knowledge of what to do or where to begin on the site
  • Outlets for online participation and social interaction - Users need to be able to share knowledge and interact with each other online, while partners of the project should be able to add details of the latest news, events, resources or any other useful content to the site
  • Online assessment tool - A quick and easy way for a user to assess their own energy efficiency knowledge to help point them to relevant areas of the website

What were our design considerations?

multilingual-website-menuOnce the navigation structure had been finalised and with the above ideas in mind (and many more), our designer Matt got to work on the design. He created a corporate yet modern concept with bright splashes of colour, which would work well with the large navigation structure and create the user friendly feel that we were aiming for. At this point, the layout of the website elements was also carefully considered.

Building a multilingual website meant that we had to be aware of language differences and how they could affect the visuals and overall user experience. Our ongoing work on multilingual email marketing campaigns may have helped a little with this!

For example, a menu item "On site training" when translated into German is "Unternehmensinterne Schulungen"... almost twice as long! We decided to go responsive too so this added another layer of complexity meaning that the design needed to be capable of adapting elegantly to a range of screen widths in any language.

We opted for a left hand vertical menu (to the right) to ensure that our navigation was easy to access on any device and looked near identical, regardless of the language it is being viewed in.

Another important aspect of the design for us was to place a large focus on the the key areas which users of the SPiCE³ website would benefit from. We placed Key Resources front and centre on the home page. Above this, quick access tiles to the assessment tool and user registration area. The top section of the home page was filled with a colourful geometric banner, scrolling through to guide users to useful areas of the website.

banner

What were our design considerations?

I've been tasked with building the SPiCE³ website and bringing the design concepts to life. I began by researching the various technical solutions that we could use to achieve our range of requirements. The first decision was an easy one. I opted to build the site using the Joomla! Content Management System. It's native multilingual support has been around for a while and is definitely impressive, extending to 3rd party components too.

multilingual-folder-structureJoomla! supports many languages, using translation packs (all Open Source and contributed by the Community) which contain the core translations for CMS elements like login buttons, system messages etc. Each translation pack places a folder in the back-end with its own language files for a developer to work with. This principle is followed for 3rd party components and plugins too, so each of these can have associated language files for any installed language, which you're also able to create yourself if they don't already exist.

The language/country codes you see to the right form part of any URL for the website. So if you're on the About page and viewing it in English/UK, then switch the language to French/France, you'll see the French version of the About page. Only the language code will have changed while the rest of the URL stays the same. This is great for SEO and helps maintain a more organised site.

The Apple Online Store provides a good example of this:

Here's the iPod Touch page for UK - http://store.apple.com/uk/buy-ipod/ipod-touch
Here's the iPod Touch page for France - http://store.apple.com/fr/buy-ipod/ipod-touch

After researching and comparing a number of 3rd party translation systems for Joomla!, I chose one which met our requirements nicely and used this within our site. It acts an interface for users to input their own translations for each language, managing the structural elements of the website (menus, tiles, headers, footers) as well as the main article content. So essentially, it allows us to duplicate our main elements and make the necessary modifications for each language we wish to translate in to.

The site has been built fully in its base language of English and I'm now working hard at implementing the multilingual functionality and translations, which we sourced at an earlier stage of the development. Attention to detail at this point is critical as you're dealing with 12 times the amount of menus, modules, language files and variables you would normally have when building a single language site. Any non standard functionality must also be considered. Our site has a calendar, a forum, an article tagging system, social feeds and contact forms to name a few, so we're making sure that each of these elements are available in their fully translated form for any of the participating languages.

Take a look at the shot of the forum below to see how it is viewed in German:

multilingual-forum

Watch this space for the final product, it'll be worth the wait!

Written by Anita Mander, Web Developer at ExtraMile Communications.

At ExtraMile we try to take an hour out each week to look around us at what others do and to gain inspiration and to admire people's creativity. Each post in this series is one staff member's take on the world of web, design and things online. We hope you enjoy it.

extramile

About ExtraMile

A digital marketing agency with international capabilities