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.

It works with basic HTML5, Jquery and CSS3. The HTML refers to basic list and select elements, you'll simply have to paste the code directly in your pages. Then to animate the selector, you need to call the Jquery function (paste it in the head of your pages). This Jquery is based on Dropkick, a javascript for custom selectors. And finally, customize the layout with CSS. In order to help you make this selector perfectly fitted your website, I highlighted where you can change colors and width within the CSS.

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.

Get source code on Github

The language selector source code is naturally available for free on Github. Feel free to re-use it in your pages and hit me up on Twitter if you need help!