Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
30 Tips for Creating International
Multilingual Websites
Jane Robbins
NOVA UX Meetup
Jan. 8, 2014
‘s Background
Managed a redesign for an international nonprofit
for a bilingual website, jankarski.net (Polish-English)

W...
The Impacts of Language
English is the most used language on the web, but …
Most (75%) internet usage
is not in English
Bo...
The International Site Process
Multilingual websites can be created in two
phases - international and localization
Interna...
Domain Considerations
Decide on one site / URL or multiple sites per
language
For SEO reasons, it’s often better to have o...
Design Considerations
Length of a label may differ by language
For example, Polish and German words are longer
than equiva...
More Design Considerations
Bi-directional languages (such as Arabic and
Hebrew) need to display characters right to left f...
More Design Considerations
Pay attention that special characters (Polish ł
and ę, German ä and ß, Chinese 德新, etc.)
for ea...
More Design Considerations
Don’t include graphics with
embedded text

Make sure payments are shown in
applicable currencie...
UX Considerations
Personas and UX testing need to include
natives of the languages for the site

Help users by defaulting ...
Cultural Considerations
The customer experience needs to fit the culture
For example, in Poland, nonprofit sites rarely ha...
Cultural Considerations
If practical, customize content to ensure that
the text, graphics, and even the colors work
for th...
Practical Considerations
Tag in all languages with the terms that local
users search for content
Is this a trunk

or a boo...
CMS Considerations
Choose a CMS suitable for a client’s business
needs including:
Handling and maintaining multilingual co...
Technical Considerations
Access outside of the US is more likely on a
mobile device

Take typical technology speeds for ta...
More Technical Considerations
Make sure that required software or plugins
are commonly used

Allow for language toggling b...
Language Considerations
Content vs. language – there’s a big difference
1)

2)

3)

The great majority of multilingual sit...
Content Considerations
In writing and tagging content, clarify
locations so that users in Cambridge, Mass.
aren’t sent to ...
More Content Considerations
Translate measurements, depictions of time
(1400 vs 2pm), and time zones, as needed
or

Be car...
Translation Considerations
Translations
Use an automated translator?
Google Translate, et al – provide the basics only
For...
Top Tips:
Get a professional translator if possible
Research cultural considerations
Localize content
Jane Robbins
@UX_Jan...
Some Resources
General information on doing global-based research:
Whitney Quesenbery and Daniel Szuc ’s book “Global UX: ...
More Resources
Writing for a global audience:
http://webdesign.about.com/od/writing/a/aa080800a.htm
http://www.webdesign.o...
More Resources
Automated translations:
Translation tools are described in http://sixrevisions.com/tools/reach-alarger-audi...
More Resources
A few firms specialize in bilingual sites:
Japanese/English http://www.designtym.net/services/
Spanish/Engl...
Upcoming SlideShare
Loading in …5
×

Tips for creating international multilingual websites

2,560 views

Published on

Presentation by Jane Robbins at the January NoVA UX meetup: http://www.meetup.com/nova-ux/events/143633812/

Details

When designing a bilingual website, there are many more factors to consider than for a website in a single language. Jane will share her lessons learned with others, since the world's internet users are becoming more diverse every day and employing a user-centered approach is her professional passion.

More about Jane

Jane is the webmaster for an international nonprofit, the Jan Karski Educational Foundation. She defined their website and currently does project management for them as well. She has also held UX, Sales, Marketing and IT roles at Volkswagen of America, Freddie Mac and Apple.

Published in: Design, Technology, Business
  • Check the copyright of the photos you use in your presentation might be a good tip too
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Wow, this is very interesting! Your thoughts have brought the Multilingual Website Design Tips to limelight. Thank you for sharing it. You might want to read this also: http://bit.ly/2bb8N1M I look forward to more articles or presentations based on this Multilingual Website Design Tips. Thank you again.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Amazing and important tips! Give https://www.bablic.com - an easy solution for website translation. Basically lets you edit your whole website in a visual editor and then just takes 1 line of code to make the translated version live! Works on all websites too :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Tips for creating international multilingual websites

  1. 1. 30 Tips for Creating International Multilingual Websites Jane Robbins NOVA UX Meetup Jan. 8, 2014
  2. 2. ‘s Background Managed a redesign for an international nonprofit for a bilingual website, jankarski.net (Polish-English) Was a UX consultant at Volkswagen of America on a web portal that will be used in many countries Jane Robbins 2
  3. 3. The Impacts of Language English is the most used language on the web, but … Most (75%) internet usage is not in English Bottom line ~ we need to reach users in their own languages Jane Robbins 3
  4. 4. The International Site Process Multilingual websites can be created in two phases - international and localization International planning includes: domain definition, design and layout, technical factors, UX considerations, CMS and content decisions, and cultural research Localization includes content translation and implementation If your planning is handled correctly, your localization process will be smoother and there should be less rework Jane Robbins 4
  5. 5. Domain Considerations Decide on one site / URL or multiple sites per language For SEO reasons, it’s often better to have one website with multiple language links Example: jankarski.net with a /pl or /en suffix Google recommends getting a country-specific domain if you can afford it Examples: ebay.de = ebay.fr = Ensure that the URL is short and neutral Jane Robbins 5
  6. 6. Design Considerations Length of a label may differ by language For example, Polish and German words are longer than equivalent English words “Benutzername” = “User name” in German Right-justified labels work for all languages (this approach worked well at VW) User name Benutzername Jane Robbins 6
  7. 7. More Design Considerations Bi-directional languages (such as Arabic and Hebrew) need to display characters right to left for text and left to right for numbers Use horizontal menus if any of your languages are bi-directional Make sure your layouts and templates work for all languages Jane Robbins 7
  8. 8. More Design Considerations Pay attention that special characters (Polish ł and ę, German ä and ß, Chinese 德新, etc.) for each language: Are findable in the site’s Search Read correctly on the screen and printed out Jane Robbins 8
  9. 9. More Design Considerations Don’t include graphics with embedded text Make sure payments are shown in applicable currencies Jane Robbins 9
  10. 10. UX Considerations Personas and UX testing need to include natives of the languages for the site Help users by defaulting a language, but allow users to change it (for expats and visitors) Jane Robbins 10
  11. 11. Cultural Considerations The customer experience needs to fit the culture For example, in Poland, nonprofit sites rarely have a Donate button, considering it tacky Also, European users tend to use bank transfers for payments (not PayPal) Jane Robbins 11
  12. 12. Cultural Considerations If practical, customize content to ensure that the text, graphics, and even the colors work for the different audiences Examples from IRS.gov: Jane Robbins 12
  13. 13. Practical Considerations Tag in all languages with the terms that local users search for content Is this a trunk or a boot? Build links to same-language content – avoid mixing links Jane Robbins 13
  14. 14. CMS Considerations Choose a CMS suitable for a client’s business needs including: Handling and maintaining multilingual content Checking in and out and exporting / importing translation workflows Determine whether the local or centralized entity will have final say on content Decide the site’s formality of tone plus regional terms that may differ by country Jane Robbins 14
  15. 15. Technical Considerations Access outside of the US is more likely on a mobile device Take typical technology speeds for target audiences/countries into consideration Jane Robbins 15
  16. 16. More Technical Considerations Make sure that required software or plugins are commonly used Allow for language toggling back and forth on the same page Jane Robbins 16
  17. 17. Language Considerations Content vs. language – there’s a big difference 1) 2) 3) The great majority of multilingual sites have the same content for all languages Some sites (IRS.gov) have translations for frequent items, but most content is in English My Polish-English sites both have the same branding and navigational structure, but differing content Jane Robbins 17
  18. 18. Content Considerations In writing and tagging content, clarify locations so that users in Cambridge, Mass. aren’t sent to content for Cambridge, England Ensure that graphics aren’t insensitive to other cultures Jane Robbins 18
  19. 19. More Content Considerations Translate measurements, depictions of time (1400 vs 2pm), and time zones, as needed or Be careful about idiomatic or slang terms that might not be understandable to all “my bad” “phat” “groovy” Figure out how to handle VOI (voice on the internet) and accessibility features Jane Robbins 19
  20. 20. Translation Considerations Translations Use an automated translator? Google Translate, et al – provide the basics only For a professional, credible website, you really need a human translator to polish the content Have native speakers proofread all text Employ a translator or use a service? Assuming you’ll be adding content over time, you’ll need to determine a long-term solution for content maintenance Jane Robbins 20
  21. 21. Top Tips: Get a professional translator if possible Research cultural considerations Localize content Jane Robbins @UX_JaneRobbins jmurobbins@gmail.com
  22. 22. Some Resources General information on doing global-based research: Whitney Quesenbery and Daniel Szuc ’s book “Global UX: Design and Research in a Connected World” “The Handbook of Global User Research” by Robert Schumacher “A Pocket Guide to International User Research” by Chui Chui Tan and Owen Gregory “Beyond Borders: Web Globalization Strategies” by John Yunker (2002-3) Mashable article by Christina Warren http://mashable.com/2010/10/11/global-web-design/ Two summaries of technical and non-technical considerations by Christian Arno http://sixrevisions.com/web_design/how-web-designers-can-adopt-a-globalmindset/ and http://www.webresourcesdepot.com/8-tips-for-designing-betterglobal-websites/ http://ezinearticles.com/?Web-Designing-Tips-For-Bilingual-WebsiteDesigns&id=4021163 Government best practices Howto.gov Best Practices http://www.howto.gov/web-content/multilingual/best-practices Jane Robbins 22
  23. 23. More Resources Writing for a global audience: http://webdesign.about.com/od/writing/a/aa080800a.htm http://www.webdesign.org/web-design-tips-for-an-internationalaudience.22281.html “A Practical Guide to Localization (Language International World Directory)” by Bert Esselink and Arjen-Sjoerd de Vries Accessibility and CSS: http://blog.globalizationpartners.com/internationalization-andaccessibility.aspx Bilingual sites & SEO Google video about bilingual sites http://www.youtube.com/watch?v=GyWx31GeQWY&feature=player_e mbedded http://alexwebmaster.com/developer-bilingual-websites-searchengine-optimization-spanish-english-houston-texas/ Jane Robbins 23
  24. 24. More Resources Automated translations: Translation tools are described in http://sixrevisions.com/tools/reach-alarger-audience-with-content-translation-tools/ Translators for WordPress sites http://codex.wordpress.org/Multilingual_WordPress Build a multilingual site with WordPress by Shannon Smith http://www.creativebloq.com/wordpress/build-multilingual-sitewordpress-9112795 Lingual plugins for Joomla http://www.joomfish.net/ A translator incorporated into an HTML forms builder called Wufoo Crowd source translations with a tool like http://www.worldlingo.com/ Managing international projects: http://blog.globalizationpartners.com/website-translation-localizationand-internationalization.aspx Some firms that specialize in multilingual site translations: http://www.lingo24.com/ http://www.translations.com/ http://www.globalizationpartners.com/ Jane Robbins 24
  25. 25. More Resources A few firms specialize in bilingual sites: Japanese/English http://www.designtym.net/services/ Spanish/English http://www.gogonzalez.com/webdesign/bilingual-multilingual-web-design French/English – both in Canada http://www.beginwithb.com/bilingual-calgary-web-design and http://www.joceydesigns.com/ Welch-English http://www.drupology.co.uk/bilingual-websitedesign-wales Jane Robbins 25

×