Bookmark and Share
Email This Link

Multilingual Responsive Web Design

by Michael Kriz

June 12, 2013

Multilingual Responsive Web Design- Acclaro

Not too long ago, responsive web design (RWD) was still more or less a buzzword circling the web development and design community. But within the last year, it has taken center stage as the prevalent method for building device-neutral websites. 

With the explosive growth in the variation of devices accessing content on the web, that’s really not surprising. After all, RWD is the answer to the question of how to build single-code websites that support web access across devices, from smartphones to desktop devices and tablets.

Combine that with the fact that Google has openly begun to support responsive design, favoring responsive websites in search rankings over their single-device equivalents, and you have a strong argument for making the move to RWD this year.

The benefits of responsive web design include: 

However, despite the obvious attraction of responsive design, the process of building a site using this method is definitely a classic case of “easier said than done”. Design and build cycles can double in size and duration. Now imagine creating a responsive site for multiple markets and languages, and you know challenges are almost guaranteed.

The following list of seven tips can guide you through a smooth responsive design process, with the ultimate goal of a site that speaks many languages, to many people.

1. Know your audience

For effective multilingual responsive design, you first need a clear picture of your user preferences and how they differ across target markets. If your audiences require wildly different experiences, you need to give careful thought to the question of whether a central, localized and responsive website will be able offer those unique experiences. The more consistent the experience can be throughout the versions of your website, the easier it will be to stick to just one website for all markets.

Research and document technical requirements, such as device usage, browser popularity and OS distribution. Some devices you are discarding for your source market might need to be supported for target languages. And in some target markets, the most popular browser version might be one you normally wouldn’t support for your source market.

Once you have a clearer picture of how users in each market will access and interact with your site, communicate these findings to your design and development teams.

2. Work with experienced responsive developers

Make sure your design/development team has both responsive and multilingual expertise.

This may be a tall order, so consider bringing in some consultants to help with your responsive design and have them work alongside your team. In parallel, partner with a professional translation agency for the multilingual aspects and site translation. Your translation agency can help you to define local user and business goals, identify potential pitfalls in proposed designs, provide designers and developers with mock translations for troubleshooting, help perform usability testing of your mobile prototype, spot issues related to localized content and functionality and much more.

Reviewing your project step-by-step with them in the beginning is the best way to avoid crippling issues later on in the development cycle.

3. Simplify, simplify, simplify

The simpler you can keep your site’s design and structure, the easier it will be to make it responsive and multilingual. Are those fancy animations really contributing to a better user experience? Do you really need all that content on the homepage?

Think essentials, and try to stick to them. However, make sure you don’t strip elements that are necessary for users to be able to engage with your brand or perform core tasks.

4. Think multilingual mobile first

Many resources and tutorials on responsive design will advise you to design for mobile first, and then stretch up the design to the larger resolutions, adding more content and functionality (“progressive enhancement”). That is contrary to how many developers typically operate, starting with desktop design and stripping elements away for smaller resolutions (“graceful degradation”).

When you’re supporting multilingual, you’ll still need to design for mobile first, but before you start thinking about progressively enhancing that mobile experience, you’ll need to make that design multilingual. There is no sense in enhancing your experience for larger resolutions if you discover later on that your mobile starting point isn’t localizable for the languages and markets you need to support.

Work with your local business stakeholders and your translation agency to create a fully functional, multilingual mobile solution first. Then, progressively enhance that experience to larger resolutions.

5. Prepare for increased time to market

You’re about to embark on an exciting journey — and encounter a series of challenges along the way. Creating a responsive website can easily increase development time to well over double the amount of a non-responsive website. Translation on top of that almost ensures you’re in for a tough ride. Don’t lose sight of the ultimate destination and the rewards you will reap. Make sure your stakeholders understand the value of multilingual responsive design and create the right expectations for delivery times.

6. Tackle the toughest markets first

Determine the most challenging languages and markets and use those for your pilots and prototypes. Notorious candidates are double-byte languages such as Mandarin and bidirectional languages like Arabic and Hebrew. Bidirectional languages add yet another layer of complexity as you have to account for a horizontally reversed interface that needs to be designed and coded correctly.

In addition to language considerations, there are market specificities such as device and browser usage trends that make certain locales more challenging than others. Part of your intended audience might still depend on older browsers such as IE7, for example, which are notoriously hard to code for correctly when building a responsive website. It’s best to tackle these challenges in the beginning to work out the kinks across all browsers, devices and languages.      

7. Consider a phased rollout

You can choose to wait to launch your new multilingual responsive website until the project is completely done (big bang approach). However, that might mean it could take quite a while until you start reaping any benefits from the new site. Instead of the big bang, you might want to think about a phased approach: rolling out the new site in sections, for instance. This will allow you to start getting value a lot sooner, and you will be able to continue to perfect the new design before you implement across the full website.

An example of this approach is Microsoft’s website. Not known as the quintessential progressive design leader, Microsoft surprised the web community last year with a complete overhaul of their homepage, making it responsive in over 100 languages.

Contact us today for more information on multilingual responsive web design, website translation and guidelines for enhancing your global customers' experience of your brand online. 


Request a Call Back

First Name:
Last Name:
Job Title:
Valid business email required