Integrating Bilingualism in a Mobile Menu

Here in Canada many organizations have English and French versions of their website. Making sure that their language options are easily available to users can get tricky in a mobile environment. There's limited space and those of us who have big clumsy fingers (me!) demand big, easy to press buttons. So what's the best way to integrate a bilingual option?

A lot of the websites that we looked to for inspiration didn't have responsive or mobile sites at all. This of course meant that the French/English option was absolutely tiny on a small phone screen and one could only find it through pinch and pull zooming if you already knew it was there and where to look for it. Speaking of bad options, splash screens are frequently used to funnel traffic to the English or French version of a site. This is a particularly bad idea on a mobile site where load times are much slower and an extraneous page can be very frustrating. Besides, users frequently don't enter a site from the home page.

There are two really good options that I'm seeing right now - and both are from the responsive websites of government agencies (since when does the government have a responsive site and Jugo Juice doesn't?)

Settings Icon

Passport Canada uses the 'gear' icon traditionally used to represent Settings as seen in Gmail and my phone, among many other places.

Passport Canada home page - mobile view


They also keep their 'About Us' information under that button, which doesn't make a ton of sense to me. But Settings is a very natural place to look to change your language preferences. Although only English and French are listed, this setup could easily accommodate for more language options.

Settings button expanded


Icon buttons have pros and cons, for sure. They can be unfamiliar, especially to less technilogically immersed users. But they make for a very clean interface and can be more accessible than text in the case of language barriers. The gear is a widely used symbol and we already know the user is accessing the site via mobile and therefore probably isn't a complete techno-phobe. Plus, if you have more Settings type content it can be grouped together under this icon.

Integrated Button

Other sites made room for a dedicated button for changing languages. The example below is from Public Works and Government Services Canada


Public WOrks home page - mobile view


Here the option to switch to a French site is integrated into the very top of the page and shares space with the Government of Canada logo. This option is more limited in when it can be implemented. It only works for one language and it requires that the rest of your site, including your logo, is very clean and minimalistic - otherwise the button won't stand out or there just won't be room for it.

Of course, the advantage is that the language option isn't hidden behind anything. Users only have to glance at the header here to know that the website is available in French and that it's only a tap away.

Whatever solution you pick, make sure it's the one that fits the layout of the site and the proclivities of your users. Let us know if you've seen options you like even better!