artist painting on smartphone on easel

Photo Credit: JD Hancock via Compfight cc

Our blog post last week told you why the new responsive web design (RWD) and translation make great partners in a globalization strategy. Many of the tips already contained in our Localization Quick Guides “Tips on Designing Websites for Translation” and “Tips on Graphic Design for Translation” remain important. The list below includes those and several additional tips specifically for RWD.

  1. Organize your site so that the parts destined for translation are easily separable. Just as with any site you may not want or need to localize all web pages in all languages. Consider which pages are most important to which users’ experience.
  2. Allow for text expansion everywhere. This is even more of an issue on a site made to adapt itself for a mobile phone. Things like menu items, designed in English to span only one line, may extend to two or three.
  3. Minimize the use of graphics with embedded text. It’s always wise to avoid text in graphics since it means that a new version of the graphic will h ave to be separately created in the target language(s). On a website with responsive web design, graphics have to be able to change size and location. Text embedded in a graphic may become impossible to read, especially if that text has become longer in translation.
  4. Try to choose culturally neutral graphics. Avoid graphics that might be culturally offensive to some, feature a specific ethnic group, or are culturally bound. Sometimes you will want to localize a foreign language site by replacing graphics. Just be aware that with RWD this is more complex than with a static site. The new graphics will also have to be adapted for the different sized screens.
  5. Use Unicode fonts that will support different character sets. Having to change a font for each language may also require other design changes such as font size and line spacing.
  6. Start with a mobile design and gradually enhance the site for larger devices. Many experts advise using a mobile-first approach in all responsive design. One reason is that, when you start with the large site and work down, you may find that some of the technology you’ve chosen won’t scale to mobile. For a multilingual site, it is even more important to create and globalize the mobile multilingual site first, since there is the added necessity of making sure that all your languages work along with the technology. That way you can ensure that the mobile experience is optimized in all languages before proceeding to build on the design for larger devices.
  7. Prepare your translated text for fluid design. Instead of assigned fixed sizes to a web page and its components, RWD generally uses what is known as fluid design—assigning percentages to different elements rather than fixed widths. As the screen size changes, the elements change proportionately. This can cause particular problems for some languages and you will want to work with your translation partner to prepare for these. Chinese, for instance, has no breaks between words, but that does not mean that you can break a sentence anywhere. Inserting zero-width spaces at allowable breaks will ensure that your text breaks the way it should. With languages like German, where words can be extremely long, you might want to insert soft hyphens between syllables so that words break correctly and retain their integrity.
  8. Start with more complex languages, such as right-to-left reading languages (Arabic, Hebrew). These are the languages most likely to raise issues during the localization engineering process.

If you’re considering RWD for your next website iteration, be sure that you use a team of designers and developers expert in RWD; and partner from the beginning with an experienced localization agency, like MTM LinguaSoft. You should also plan on a longer development timeline. But when the site is finished, you will have the capacity to reach a bigger, more diverse audience—an audience that is expanding all the time.

Click here to download our white papers, “Tips on Graphic Design for Translation” and “Tips on Website Design for Translation.”

Also check out our recent blog posts, on writing for translation for tips on how to prepare and simplify your website text to make it easier to translate:

Related Posts: