!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
DOES YOUR WEB APP SPEAK SCHADENFREUDE?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
DOES YOUR WEB APP SPEAK SCHADENFREUDE?DOES YOUR WEB APP SPEAK SCHADENFREUDE?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
DOES YOUR WEB APP SPEAK SCHADENFREUDE?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
SCHADENFREUDE1. boshafte Freude über das Missgeschick und Unglück eines andern
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
SCHADENFREUDE1. boshafte Freude über das Missgeschick und Unglück eines andern
1. pleasure or enjoyment derived from the accidental misfortune of others
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
INTERNATIONALIZATION & LOCALIZATION
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
New data from research firm Common Sense Advisory suggests that if your brand is to achieve truly global reach in our online world, your website must "speak" more than 16 languages.
Source: Fast Company
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THINKING GLOBALLY, CODING LOCALLY
As web developers, it is our responsibility to understand how design decisions, layouts and even coding patterns can affect our ability to deliver our web sites and applications in a different language.
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
GREG REWIS @GARAZI
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
GREG REWIS @GARAZI
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
GREG REWIS @GARAZI
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
GREG REWIS @GARAZI
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
GREG REWIS @GARAZI
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
FACTS...
▸ Salesforce is translated into 34 languages
▸ Salesforce1 is translated into 25 languages
▸ 15% Non-English users (As of Oct. 2014)
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
INTERNATIONALIZATION & LOCALIZATION
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
INTERNATIONALIZATION VERSUS LOCALIZATION
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
INTERNATIONALIZATION
▸ Internationalization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language.
▸ Abbreviated as i18n
image created by Jan Cavan
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
LOCALIZATION
▸ Localization refers to the adaptation of a product, application or document content to meet the language, cultural and other requirements of a specific target market (a locale).
▸ Abbreviated as l10n
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
I DON’T REALLY CARE ABOUT THIS. I’VE GOT PEOPLE THAT DO ALL OF THE TRANSLATION FOR OUR SITE.
the collective thought of the audience right now
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
IT’S MORE THAN JUST WORDS
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
IT’S MORE THAN JUST WORDS
▸ Date and time formats
▸ Number formats
▸ Currency formats
▸ Telephone numbers
▸ Symbols and icons
▸ Colors
▸ …and even the layout of a page
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
CALL ME, PLEASE!
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
USE PLACEHOLDERS OR PATTERN EXAMPLES
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
USE PLACEHOLDERS OR PATTERN EXAMPLES
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
USE PLACEHOLDERS OR PATTERN EXAMPLES
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
HOW HARD CAN IT BE?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
HOW HARD CAN IT BE?
▸ Most translations are done via XML documents
▸ Limited, if any, context
▸ Translation challenges are compounded when the text is technical
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THE PROBLEM WITH WORDS
Source: https://www.brighttalk.com/webcast/13375/188539/getting-started-with-web-app-localization
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THE PROBLEM WITH WORDS
▸ Le modem et l'imprimante sont des périphériques de mon ordinateur.
▸ The modem and the printer are peripheral devices connected to my computer.
Source: https://www.brighttalk.com/webcast/13375/188539/getting-started-with-web-app-localization
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
http://www.telegraph.co.uk/news/newstopics/howaboutthat/10280244/Translation-table-explaining-the-truth-behind-British-politeness-becomes-internet-hit.html
WHAT THE BRITISH SAY WHAT THE BRITISH MEAN WHAT FOREIGNERS UNDERSTAND
With the greatest respect You are an idiot He is listening to me
That's not bad That's good That's poor
Quite good A bit disappointing Quite good
Oh, incidentally/ by the way The primary purpose of our discussion is That is not very important
Very interesting That is clearly nonsense They are impressed
I'm sure it's my fault It's your fault Why do they think it was their fault?
You must come for dinner It's not an invitation, I'm just being polite I will get an invitation soon
I only have a few minor comments Please rewrite completely He has found a few typos
Could we consider some other options I don't like your idea They have not yet decided
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
CONSIDER THE LOWLY BUTTON
EDIT
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
CONSIDER THE LOWLY BUTTON
EDIT
BEARBEITEN
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
TEXT EXPANSION CREATES LAYOUT TROUBLE IF A DESIGN ONLY FOCUSES ON ENGLISH...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
“AS LONG AS WE ALLOW 20% EXPANSION FOR NON-ENGLISH TEXT, WE ARE GOOD.”
Somebody who didn’t know what they were talking about
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
HANDLING COMPOUND WORDS
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
HANDLING COMPOUND WORDS
▸ A number of languages, such as Finnish, German and Dutch, create single large 'words' to replace what is a sequence of smaller words in other languages.
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
HANDLING COMPOUND WORDS
▸ A number of languages, such as Finnish, German and Dutch, create single large 'words' to replace what is a sequence of smaller words in other languages.
▸ English: Input processing features
▸ German: Eingabeverarbeitungsfunktionen
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
JUST ADD LETTERS
Source: http://www.w3.org/International/articles/article-text-size
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
JUST ADD LETTERS
Source: http://www.w3.org/International/articles/article-text-size
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
JUST ADD LETTERS
Source: http://www.w3.org/International/articles/article-text-size
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
TEXT EXPANSION CAN HAVE LAYOUT REPERCUSSIONS
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
TEXT EXPANSION CAN HAVE LAYOUT REPERCUSSIONS
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THE LONGER, THE SHORTER
Source: http://www.w3.org/International/articles/article-text-size
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
ALL CHARACTERS ARE NOT CREATED EQUAL
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
ALL CHARACTERS ARE NOT CREATED EQUAL
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
ASCENDERS AND DEFENDERS, OH MY!
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
ASCENDERS AND DEFENDERS, OH MY!
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
ASCENDERS AND DEFENDERS, OH MY!
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
USING THE SAME LINE HEIGHT CAN LEAD TO A CROWDED SCREEN
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
TEXT OVERRUNS AND OVERLAPS...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
FLEXBOX TO THE RESCUE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
FLEXBOX TO THE RESCUE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
TABS POSE A SPECIAL PROBLEM
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
WHEN TRUNCATIONS GO WRONG
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THERE ARE ALWAYS COMPROMISES...
TruncationWrapping
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
TO WRAP OR NOT TO WRAP
UI Element Okay to Wrap Okay to Truncate
Button No NoDropdown list/Picklist Yes No
Field label Yes NoTextbox Yes Yes
Sys messaging Yes NoInput field Yes if field expands No
Tab No NoMenu No It depends**Tile Yes Yes
When wrapping UI text, use dynamic wrapping instead of manually inserting line breaks.
** It might be acceptable to add ellipses (...) to longer menu items
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
CAPITALIZATION FAIL
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THE PROBLEM WITH SEMANTICS
What is wrong with this?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THE PROBLEM WITH SEMANTICS
What is wrong with this?What is <b>wrong</b> with <i>this</i>?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THE PROBLEM WITH SEMANTICS
What is wrong with this?What is <b>wrong</b> with <i>this</i>?
https://r12a.github.io/scripts/tutorial/part6#emphasis
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
KNOW YOUR LANGUAGE
I’m getting a real sense of schadenfreude from this presentation.
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
KNOW YOUR LANGUAGE
I’m getting a real sense of schadenfreude from this presentation.
…sense of <i lang=“de-DE”>schadenfreude</i> from…
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
KNOW YOUR LANGUAGE
I’m getting a real sense of schadenfreude from this presentation.
…sense of <i lang=“de-DE”>schadenfreude</i> from…
…sense of <i lang=“de-DE” translate=“no”>schadenfreude</i> from…
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
KNOW YOUR LANGUAGE
I’m getting a real sense of schadenfreude from this presentation.
…sense of <i lang=“de-DE”>schadenfreude</i> from…
…sense of <i lang=“de-DE” translate=“no”>schadenfreude</i> from…
<a lang="es" title="Spanish" href="qa-html-language-declarations.es">Español</a>
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
KNOW YOUR LANGUAGE
I’m getting a real sense of schadenfreude from this presentation.
…sense of <i lang=“de-DE”>schadenfreude</i> from…
…sense of <i lang=“de-DE” translate=“no”>schadenfreude</i> from…
<a lang="es" title="Spanish" href="qa-html-language-declarations.es">Español</a>
<span title="Spanish"><a lang="es" href="qa-html-language-declarations.es">Español</a></span>
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
AVOID USING UI CONTROLS WITHIN A SENTENCE
What translators see:
<param name=”part1”>After</param>
<param name=”part2”>occurrences</param>
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
LABELS NEED CONTEXT
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
LABELS NEED CONTEXTWhat translators see:
<param name=”from”>From</param>
<param name=”to”>To</param>
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
LABELS NEED CONTEXTWhat translators see:
<param name=”from”>From</param>
<param name=”to”>To</param>
Japanese: 10/1/2015 12/31/2015
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
LABELS NEED CONTEXTWhat translators see:
<param name=”from”>From</param>
<param name=”to”>To</param>
Japanese: 10/1/2015 12/31/2015
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
WHAT DIRECTION ARE WE GOING?
You'd say that in Chinese as .
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
WHAT DIRECTION ARE WE GOING?
You'd say that in Chinese as .
…Chinese as <span dir="rtl" lang="zh-Hans"> </span>.
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
FLEXBOX TO THE RESCUE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
FLEXBOX TO THE RESCUE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
JUST GIVE ME THE FAQ
English: FAQ
German: FAQ
Portuguese: Perguntas freqüentes
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
JUST GIVE ME THE FAQ
▸ If you are abbreviating your text tomakeitfitinarestrictedspace, you should really consider whether this is a good idea. Other languages may not be able to replicate such an abbreviation.
▸ If you think you need abbreviations, as always work with your writer (at the design stage).
English: FAQ
German: FAQ
Portuguese: Perguntas freqüentes
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THE IMPORTANCE OF PROPER ENCODING
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THE IMPORTANCE OF PROPER ENCODING
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
UTF-8
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
BREAKING NEWS FROM MORDOR
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
PSEUDO LOCALIZATION
‣ Pseudo localization is a cost-effective preventive measure which allows you to test and detect certain internationalization and localization issues before the text is actually localized
English:
<param name="title">Introducing Accounts</param>
After Pseudo Localization:
<param name="title">[Eöש Introducing AccountsEöש ]</param>
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
PSEUDO LOCALIZATION
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
PSEUDO LOCALIZATION
Hard-coded Text
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
PSEUDO LOCALIZATION
Hard-coded Text
Text Expansion/Truncation
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
BRING PSEUDO LOCALIZATION TO ...
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
BRING PSEUDO LOCALIZATION TO ...
https://github.com/arieare/Sketch-Pseudol10n
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
CULTURE PLAYS A PART IN BOTH I18N AND L10N
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
LOOK INTO MY EYES
Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
LOOK INTO MY EYES
Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
LOOK INTO MY EYES
Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THE WAY USERS PERCEIVE AND BEHAVE...
▸ Western cultures tend to be more analytical: they perceive elements sequentially and read from the left to the right, top to bottom.
Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THE WAY USERS PERCEIVE AND BEHAVE...
▸ Japanese, Chinese and Korean audiences tend to scan the whole page in a non-linear fashion
Source: http://www.ijdesign.org/ojs/index.php/IJDesign/article/view/267/163
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THIS IS KNOWN AS CONTEXTUAL DESIGN
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
ARE YOU HIGH CONTEXT OR LOW CONTEXT?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
CONSIDER THE LOWLY BUTTON (AGAIN)
CHECKOUTCHECKOUT
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
HOW DO YOU INDICATE THE AVAILABILITY OF MULTIPLE LANGUAGES?
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
https://en.wikipedia.org/wiki/List_of_countries_where_Spanish_is_an_official_language
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
FLAGS≠LANGUAGES
Flagsaresymbolsthatrepresentcountriesorna2ons.
Source: http://flagsarenotlanguages.com/blog/why-flags-do-not-represent-language/
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
FLAGS≠LANGUAGES
Flagsaresymbolsthatrepresentcountriesorna2ons.
Languagesrepresentasharedmethodofcommunica2onbetweenpeople.
Source: http://flagsarenotlanguages.com/blog/why-flags-do-not-represent-language/
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
THE LANGUAGE ICON
http://languageicon.org/
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
USE GENERIC IMAGES AND ICONS THAT ARE CULTURALLY NEUTRAL.
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
SHOW ME THE MONEY
You are designing for an e-commerce checkout process. You need an icon which depicts the idea of an 'invoice'. It has to make sense in a global context.
http://ux.stackexchange.com/questions/83894/can-the-symbol-be-safely-considered-as-universal-when-making-a-graphic-depic
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
SHOW ME THE MONEY
You are designing for an e-commerce checkout process. You need an icon which depicts the idea of an 'invoice'. It has to make sense in a global context.
http://ux.stackexchange.com/questions/83894/can-the-symbol-be-safely-considered-as-universal-when-making-a-graphic-depic
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
IMAGES REFLECT CULTURE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
IMAGES REFLECT CULTURE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
IMAGES REFLECT CULTURE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
IMAGES REFLECT CULTURE
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
USE MULTICULTURAL PERSONAS
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
GET INVOLVED EARLY
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
GET INVOLVED EARLY
I18N
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
GET INVOLVED EARLY
L10N
L10N
I18N
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
A CHECKLIST TO FOLLOW
▸ Allow for text expansion and contraction in your UI.
▸ Think twice about international user experience before truncating your UI text
▸ Avoid inline UI controls.
▸ Avoid embedding UI text into images.
▸ Use culturally-neutral icons and graphics.
▸ Do not use flags to represent languages.
▸ Pseudo Localization is your friend.
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
http://l10nchecklist.com/
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
https://www.flickr.com/photos/wwworks/4759535950
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRST
UVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~������������������������
RESOURCES
▸ http://www.w3.org/International/articles/article-text-size
▸ https://blogs.oracle.com/translation/entry/text_expansion_for_ux_designers_points_to_consider
▸ http://uxmag.com/articles/select-country-select-language
▸ http://ux.stackexchange.com/questions/25295/best-practice-for-designing-ui-for-a-multilingual-site
▸ http://uxmag.com/articles/global-by-design