Beautiful Language Selector with Jquery
May 18, 2013
Last week, we released an English version of Dexem's corporate website. To easily navigate between both English and French versions, I was looking for a beautiful selector which could fit with our pages layout. Here are the language selector I designed, several inspirations I found on the Web and some best practices I read about where to place it in a website.
A Mix between HTML5, CSS3 and Jquery
There are some great examples on the Web and I particularly liked a lot the flat animated selector by Gizmodo, so I finally ended up to choose it and adapt it as a language selector for our websites. And I isolated the selector's source code from the above flat UI kit so you'll easily be able to use it.
Language Selector Best Practices
The main question about a language selector is "where should I place it in my website?". And in particular, I wondered if we should place the language selector on the top of the page, in the footer or both. After visiting around a dozen websites which came to my mind, the answer was clearly not clear! As I saw each many times...
But what surprised me even more is the number of posts related to this topic on Google. Some recommend not to use flags only but plain text or plain-text plus flag. Then, it mainly depends on your strategy. All agree that you have to place it at least in the footer. And if allowing visitors to switch quickly is important in your strategy, it could be also relevant to place it on the top.
If you do not want to place it on the top but consider it quite important even so, automating a redirection by detecting the visitor's browser's language (with PHP for example) could match your expectations. So the first thing a visitor has to do on your pages, is not to switch language but directly enjoy your content. In fact, lots of website are running like this.
So in the case of Dexem, we've set up an automatic redirection based on the visitors' browser's language and place the language selector only in the footer of our pages.