I am not aware of any heuristics or best practices since there are different use cases depending upon the countries you are designing for. However this excellent article Global by Design : Creating a world-ready web design gives some valuable inputs:
- Look at the scope of designing a global template (except in unique cases) : A availability of a global template with sufficient customization options to change the color and font specifications will help in keeping a uniform look across all your sites and also ensure that users dont have to look around to find the same information (since the layout is structured in a similar manner). To quote from the above mentioned article :
Consider Eli Lilly. Years ago, its local offices managed uniquely designed sites. While there is nothing inherently wrong with every country having its own unique design, the collective costs of designing and maintaining all these designs is significant. Local resources are better spent on creating local content.
A global design template frees up local offices to do just that while
also improving the user experience for those who may travel between
country websites. For example, if a web user lands on the .com site
and then travels to a specific country’s website, a consistent design
is less disruptive; the user does not have to relearn the navigation.
Today, Eli Lilly uses an excellent global template that supports
global consistency while allowing room for local content and
However though global templates should work for most languages you might to reconsider your design for languages might might read from left to right as your entire design would be flipped in that case. Take a example here of how Facebook structures its Arabic page:
- Design for Text Expansion and Contraction : As you rightly pointed out text may scale or contract in different languages. To account for that,the above mentioned article states that:
The general rule is to plan for text expansion of up to 30% to 40%
when going from English to German, which is one of the more extreme
examples of text expansion. Going from English to Spanish or French
will probably only result in a 10% to 20% expansion. To safely design
for any target language, a goal of 35% expansion is a good guideline.
Text expansion can wreak havoc with the menu; translating a single
word from one language into another, while maintaining a strict
character length, can be extremely challenging. For example, "Search"
in English translates to "Rechercher" in French, which is nearly twice
as long. Allow space for an additional 40% or more of room for
expansion in the menu.
Also the article raises an excellent point about the importance of using professional translators to ensure the correct words are used to denote navigation or content since current web translators or auto translators are not exactly correct
- Design for different font sizes : Font sizes can vary from language to language and we have to ensure there is consistency in the standards. To give an example from the above mentioned article:
For example, consider the German and Chinese web pages from Accor
Hotels. As shown here, Accor specifies the Chinese font at 12 points
while the German font is specified at 10 points.
Here are some additional resources for you to read through:
Select Country; Select Language : Developing a user-friendly global gateway
Tips For Making Your Website Multilingual Friendly - This one has some really good tips about aspects to consider while designing multilingual sites which are briefly summarized below:
- Use Unicode : By using Unicode you are making your website multilingual ready for the future as it supports over a hundred
thousand characters of different types. It is also supported by most,
if not, all web browsers and platforms. Therefore, switching to
Unicode will only benefit you in the long run.
- Flexible design : When designing for multilingual support, your design needs to be built around the languages in the sense that it
should be easily compatible with left to right and right to left
- Cut Back on images containing text : This is because the text is embedded in these images and when the user flips through languages
he would see the same text (unless he redirected to a specific page
for that language) or alternate images are automatically inserted on
the language switching
- Choose your colors wisely : However, when adding multilingual support, you need to assure the colors you pick for your website also
reflect what you do without having a negative affect within certain
Another article worth would be worth reading : 7 Tips and Techniques For Multi-lingual Website Accessibility