Although more than half of the world’s websites are in English, only about 25% of web users are English speakers. With half of the world’s population connected and more coming online every minute, internationalisation is as relevant as ever! Let’s explore how i18n gets made on the web and what we should keep in mind and what we should avoid when making the web more accessible to the world.

1. 1

2. INTERNATIONALISATIONINTERNATIONALISATION
IS A PIECE OF CAKEIS A PIECE OF CAKE
2

3. ELI SCHÜTZE RAMÍREZELI SCHÜTZE RAMÍREZ
WEB ENGINEERWEB ENGINEER
@ELIBELLY@ELIBELLY
❤
3

4. UNITED KINGDOMUNITED KINGDOM
NICARAGUANICARAGUA
4

5. 5

6. 6

7. INTERNATIONALIZATIONINTERNATIONALIZATION
IS A PIECE OF CAKE*IS A PIECE OF CAKE*
6

8. INTERNATIONALIZATIONINTERNATIONALIZATION
IS A PIECE OF CAKE*IS A PIECE OF CAKE*
*NOT REALLY***NOT REALLY**
6

9. INTERNATIONALIZATIONINTERNATIONALIZATION
IS A PIECE OF CAKE*IS A PIECE OF CAKE*
*NOT REALLY***NOT REALLY**
**ACTUALLY NOT AT ALL**ACTUALLY NOT AT ALL
6

10. I18N? WTF?I18N? WTF?
@ELIBELLY@ELIBELLY
7

11. NUMERONYMNUMERONYM
A number-based word, for example:
@elibelly
8

12. NUMERONYMNUMERONYM
A number-based word, for example:
Numbers as sounds: K9, l8r
@elibelly
8

13. NUMERONYMNUMERONYM
A number-based word, for example:
Numbers as sounds: K9, l8r
numbers as meaning: 411, 007
@elibelly
8

14. NUMERONYMNUMERONYM
A number-based word, for example:
Numbers as sounds: K9, l8r
numbers as meaning: 411, 007
adding up the number of letters between the first and
last and then using that number instead of the middle
of the word, wow, what a good idea : i18n, l10n, a11y
@elibelly
8

15. NUMERONYMNUMERONYM
A number-based word, for example:
Numbers as sounds: K9, l8r
numbers as meaning: 411, 007
adding up the number of letters between the first and
last and then using that number instead of the middle
of the word, wow, what a good idea : i18n, l10n, a11y
... n7m
@elibelly
8

16. I18N? WTF?I18N? WTF?
@ELIBELLY@ELIBELLY
9

17. THE INTERNET ™THE INTERNET ™
@ELIBELLY@ELIBELLY
10

18. LANGUAGES OF WEBSITESLANGUAGES OF WEBSITES INTERNET USERS BY LANGUAGEINTERNET USERS BY LANGUAGE
11

19. LANGUAGES OF WEBSITESLANGUAGES OF WEBSITES INTERNET USERS BY LANGUAGEINTERNET USERS BY LANGUAGE
11

20. LANGUAGES OF WEBSITESLANGUAGES OF WEBSITES INTERNET USERS BY LANGUAGEINTERNET USERS BY LANGUAGE
11

21. INTERNATIONALIZATIONINTERNATIONALIZATION
IS PART OF ACCESSIBILITYIS PART OF ACCESSIBILITY
12

22. INTERNATIONALIZATIONINTERNATIONALIZATION
If you internationalise, you design or develop your
content, application, specification, and so on, in a
way that ensures it will work well for, or can be
easily adapted for, users from any culture, region,
or language.
W3C Standards
@ELIBELLY@ELIBELLY
13

23. YOU MIGHT DO SOMETHING LIKE...YOU MIGHT DO SOMETHING LIKE...
Your web code with
templates or
placeholders for
strings
localised string resources
14

24. YOU MIGHT DO SOMETHING LIKE...YOU MIGHT DO SOMETHING LIKE...
Your web code with
templates or
placeholders for
strings
localised string resources
14

25. YOU MIGHT DO SOMETHING LIKE...YOU MIGHT DO SOMETHING LIKE...
Your web code with
templates or
placeholders for
strings
localised string resources
14

26. THINK ABOUT...THINK ABOUT...
@elibelly
15

27. THINK ABOUT...THINK ABOUT...
LANGUAGELANGUAGE
@elibelly
15

28. THINK ABOUT...THINK ABOUT...
LANGUAGELANGUAGE
WRITING SYSTEM - É, โลก, 世界WRITING SYSTEM - É, โลก, 世界
@elibelly
15

29. THINK ABOUT...THINK ABOUT...
LANGUAGELANGUAGE
WRITING SYSTEM - É, โลก, 世界WRITING SYSTEM - É, โลก, 世界
FORMATTING DATE, TIME, CURRENCY -FORMATTING DATE, TIME, CURRENCY -
01/09/1701/09/17
@elibelly
15

30. THINK ABOUT...THINK ABOUT...
LANGUAGELANGUAGE
WRITING SYSTEM - É, โลก, 世界WRITING SYSTEM - É, โลก, 世界
FORMATTING DATE, TIME, CURRENCY -FORMATTING DATE, TIME, CURRENCY -
01/09/1701/09/17
WRITING DIRECTION - RTL, LTRWRITING DIRECTION - RTL, LTR
@elibelly
15

31. THINK ABOUT...THINK ABOUT...
LANGUAGELANGUAGE
WRITING SYSTEM - É, โลก, 世界WRITING SYSTEM - É, โลก, 世界
FORMATTING DATE, TIME, CURRENCY -FORMATTING DATE, TIME, CURRENCY -
01/09/1701/09/17
WRITING DIRECTION - RTL, LTRWRITING DIRECTION - RTL, LTR
ORDERING, PLURALISATION - ONE, FEW, MANYORDERING, PLURALISATION - ONE, FEW, MANY
@elibelly
15

32. THINK ABOUT...THINK ABOUT...
LANGUAGELANGUAGE
WRITING SYSTEM - É, โลก, 世界WRITING SYSTEM - É, โลก, 世界
FORMATTING DATE, TIME, CURRENCY -FORMATTING DATE, TIME, CURRENCY -
01/09/1701/09/17
WRITING DIRECTION - RTL, LTRWRITING DIRECTION - RTL, LTR
ORDERING, PLURALISATION - ONE, FEW, MANYORDERING, PLURALISATION - ONE, FEW, MANY
GRAMMARGRAMMAR
@elibelly
15

33. THINK ABOUT...THINK ABOUT...
LANGUAGELANGUAGE
WRITING SYSTEM - É, โลก, 世界WRITING SYSTEM - É, โลก, 世界
FORMATTING DATE, TIME, CURRENCY -FORMATTING DATE, TIME, CURRENCY -
01/09/1701/09/17
WRITING DIRECTION - RTL, LTRWRITING DIRECTION - RTL, LTR
ORDERING, PLURALISATION - ONE, FEW, MANYORDERING, PLURALISATION - ONE, FEW, MANY
GRAMMARGRAMMAR
RELATIVE TIME - 'DAYS AGO'RELATIVE TIME - 'DAYS AGO'
@elibelly
15

34. THINK ABOUT...THINK ABOUT...
LANGUAGELANGUAGE
WRITING SYSTEM - É, โลก, 世界WRITING SYSTEM - É, โลก, 世界
FORMATTING DATE, TIME, CURRENCY -FORMATTING DATE, TIME, CURRENCY -
01/09/1701/09/17
WRITING DIRECTION - RTL, LTRWRITING DIRECTION - RTL, LTR
ORDERING, PLURALISATION - ONE, FEW, MANYORDERING, PLURALISATION - ONE, FEW, MANY
GRAMMARGRAMMAR
RELATIVE TIME - 'DAYS AGO'RELATIVE TIME - 'DAYS AGO'
LOCALELOCALE
@elibelly
15

35. 16

36. I18N CAKEI18N CAKE
UNICODEUNICODE
BCP47BCP47
CLDRCLDR
ICUICU
ECMASCRIPT INTL APIECMASCRIPT INTL API
FORMAT JS COREFORMAT JS CORE
LIBRARY INTEGRATIONLIBRARY INTEGRATION
17

37. I18N CAKEI18N CAKE
UNICODEUNICODE
BCP47BCP47
CLDRCLDR
ICUICU
ECMASCRIPT INTL APIECMASCRIPT INTL API
FORMAT JS COREFORMAT JS CORE
LIBRARY INTEGRATIONLIBRARY INTEGRATION
Optional!
17

38. I18N CAKEI18N CAKE
UNICODEUNICODE
BCP47BCP47
CLDRCLDR
ICUICU
ECMASCRIPT INTL APIECMASCRIPT INTL API
FORMAT JS COREFORMAT JS CORE
REACT-INTLREACT-INTL
18

39. THANK GOD FOR UNICODETHANK GOD FOR UNICODE
☕
咖啡
‫ﻗﻬﻭﺓ‬
coffee
19

40. INTERNET ENGINEERING TASK FORCEINTERNET ENGINEERING TASK FORCE
BEST COMMON PRACTICEBEST COMMON PRACTICE
20

41. INTERNET ENGINEERING TASK FORCEINTERNET ENGINEERING TASK FORCE
BEST COMMON PRACTICEBEST COMMON PRACTICE
20

42. BCP 47BCP 47
INTERNET ENGINEERING TASK FORCEINTERNET ENGINEERING TASK FORCE
BEST COMMON PRACTICEBEST COMMON PRACTICE
TAGS FOR IDENTIFYING LOCALESTAGS FOR IDENTIFYING LOCALES
20

43. [Language Tag]­[Subtags]*
en­US, en­GB
mn­Cyrl­MN
zh­Hant­HK
es­419
21

44. @ELIBELLY@ELIBELLY
❤
22

45. @ELIBELLY@ELIBELLY
❤
MY LOCALESMY LOCALES
22

46. @ELIBELLY@ELIBELLY
❤
es_MX es_NI en_US zh_Hans_CN en_UK
es_419
MY LOCALESMY LOCALES
22

47. @ELIBELLY@ELIBELLY
❤
es_MX es_NI en_US zh_Hans_CN en_UK
es_419
MY LOCALESMY LOCALES
WHAT WILL YOU SHOW ME?WHAT WILL YOU SHOW ME?
22

48. ALWAYS LET THE USERALWAYS LET THE USER
CHOOSE WHAT LOCALECHOOSE WHAT LOCALE
THEY WANTTHEY WANT
23

49. CLDR - COMMON LOCALE DATA REPOSITORYCLDR - COMMON LOCALE DATA REPOSITORY
The most extensive standard repository of locale-specific data
Maintained by Unicode Consortium
Most devs will never see it - usually wrapped in libraries
It's originally in XML
24

50. CLDR - COMMON LOCALE DATA REPOSITORYCLDR - COMMON LOCALE DATA REPOSITORY
The most extensive standard repository of locale-specific data
Maintained by Unicode Consortium
Most devs will never see it - usually wrapped in libraries
It's originally in XML
LOCALE-SPECIFICLOCALE-SPECIFIC
FORMATTINGFORMATTING
AND PARSINGAND PARSING
DATESDATES
TIMESTIMES
TIMEZONESTIMEZONES
NUMBERSNUMBERS
CURRENCYCURRENCY 24

51. CLDR - COMMON LOCALE DATA REPOSITORYCLDR - COMMON LOCALE DATA REPOSITORY
The most extensive standard repository of locale-specific data
Maintained by Unicode Consortium
Most devs will never see it - usually wrapped in libraries
It's originally in XML
LOCALE-SPECIFICLOCALE-SPECIFIC
FORMATTINGFORMATTING
AND PARSINGAND PARSING
TRANSLATIONS OFTRANSLATIONS OF
NAMES OF THINGSNAMES OF THINGS
DATESDATES
TIMESTIMES
TIMEZONESTIMEZONES
NUMBERSNUMBERS
CURRENCYCURRENCY
LANGUAGESLANGUAGES
COUNTRIES/CITIESCOUNTRIES/CITIES
TIMEZONESTIMEZONES
MONTHS/WEEKDAYSMONTHS/WEEKDAYS
CURRENCYCURRENCY 24

52. CLDR - COMMON LOCALE DATA REPOSITORYCLDR - COMMON LOCALE DATA REPOSITORY
The most extensive standard repository of locale-specific data
Maintained by Unicode Consortium
Most devs will never see it - usually wrapped in libraries
It's originally in XML
LOCALE-SPECIFICLOCALE-SPECIFIC
FORMATTINGFORMATTING
AND PARSINGAND PARSING
TRANSLATIONS OFTRANSLATIONS OF
NAMES OF THINGSNAMES OF THINGS LANGUAGE ANDLANGUAGE AND
SCRIPTSSCRIPTS
DATESDATES
TIMESTIMES
TIMEZONESTIMEZONES
NUMBERSNUMBERS
CURRENCYCURRENCY
LANGUAGESLANGUAGES
COUNTRIES/CITIESCOUNTRIES/CITIES
TIMEZONESTIMEZONES
MONTHS/WEEKDAYSMONTHS/WEEKDAYS
CURRENCYCURRENCY
CHARACTERS USEDCHARACTERS USED
WRITING DIRECTIONWRITING DIRECTION
CAPITALIZATIONCAPITALIZATION
PLURAL CASESPLURAL CASES
SORTING RULESSORTING RULES
24

53. CLDR - COMMON LOCALE DATA REPOSITORYCLDR - COMMON LOCALE DATA REPOSITORY
The most extensive standard repository of locale-specific data
Maintained by Unicode Consortium
Most devs will never see it - usually wrapped in libraries
It's originally in XML
LOCALE-SPECIFICLOCALE-SPECIFIC
FORMATTINGFORMATTING
AND PARSINGAND PARSING
TRANSLATIONS OFTRANSLATIONS OF
NAMES OF THINGSNAMES OF THINGS LANGUAGE ANDLANGUAGE AND
SCRIPTSSCRIPTS
COUNTRYCOUNTRY
INFOINFO
DATESDATES
TIMESTIMES
TIMEZONESTIMEZONES
NUMBERSNUMBERS
CURRENCYCURRENCY
LANGUAGESLANGUAGES
COUNTRIES/CITIESCOUNTRIES/CITIES
TIMEZONESTIMEZONES
MONTHS/WEEKDAYSMONTHS/WEEKDAYS
CURRENCYCURRENCY
CHARACTERS USEDCHARACTERS USED
WRITING DIRECTIONWRITING DIRECTION
CAPITALIZATIONCAPITALIZATION
PLURAL CASESPLURAL CASES
SORTING RULESSORTING RULES
LANGUAGE USAGELANGUAGE USAGE
CURRENCYCURRENCY
TELEPHONETELEPHONE
CODESCODES
CALENDARCALENDAR
CONVENTIONSCONVENTIONS 24

54. <days>
<dayContext type="format">
<dayWidth type="abbreviated">
<day type="sun">dom.</day>
<day type="mon">lun.</day>
<day type="tue">mar.</day>
<day type="wed">mié.</day>
<day type="thu">jue.</day>
<day type="fri">vie.</day>
<day type="sat">sáb.</day>
</dayWidth>
<dayWidth type="short">
<day type="sun">DO</day>
<day type="mon">LU</day>
<day type="tue">MA</day>
<day type="wed">MI</day>
<day type="thu">JU</day>
<day type="fri">VI</day>
<day type="sat">SA</day>
</dayWidth>
<dayWidth type="wide">
<day type="sun">domingo</day>
<day type="mon">lunes</day>
<day type="tue">martes</day>
<day type="wed">miércoles</day>
<day type="thu">jueves</day>
<day type="fri">viernes</day>
<day type="sat">sábado</day>
</dayWidth>
</dayContext>
</days>
CLDR 'Days' Section for Spanish Language
UNICODEUNICODE
BCP47BCP47
CLDRCLDR
ICUICU
ECMASCRIPT INTL APIECMASCRIPT INTL API
FORMAT JS COREFORMAT JS CORE
REACT INTLREACT INTL
25

55. 26

56. ICUICU
INTERNATIONAL COMPONENTS FOR UNICODEINTERNATIONAL COMPONENTS FOR UNICODE
DEFINES DEFINES MESSAGE FORMATMESSAGE FORMAT FOR RESOURCE FOR RESOURCE
STRINGS STRINGS
SET OF C/C++ AND JAVA LIBRARIESSET OF C/C++ AND JAVA LIBRARIES
WRAPS CLDRWRAPS CLDR
27

57. Welcome, { name } !
28

58. Welcome, { name } !
There were { count, number } people there // 1,000 vs 1.000
28

59. Welcome, { name } !
There were { count, number } people there // 1,000 vs 1.000
My birthday is { birthday, date , short } // 04/02/2017 vs 02/04/2017
28

60. Welcome, { name } !
There were { count, number } people there // 1,000 vs 1.000
My birthday is { birthday, date , short } // 04/02/2017 vs 02/04/2017
{ gender, select ,
male { He likes trains },
female { She likes trains },
other { They like trains }
}
28

61. Welcome, { name } !
There were { count, number } people there // 1,000 vs 1.000
My birthday is { birthday, date , short } // 04/02/2017 vs 02/04/2017
{ gender, select ,
male { He likes trains },
female { She likes trains },
other { They like trains }
}
{ count , plural ,
=0 {No more seats available }
one {Just a single seat left!}|
other { # seats left}
} // some languages have few and many !
28

62. JAVASCRIPT ALERT JAVASCRIPT ALERT
29

63. UNICODEUNICODE
BCP47BCP47
CLDRCLDR
ICUICU
ECMASCRIPT INTL APIECMASCRIPT INTL API
FORMAT JS COREFORMAT JS CORE
REACT INTLREACT INTL
ECMASCRIPT INTL APIECMASCRIPT INTL API
ECMA 402
Intl.NumberFormat
Intl.DateTimeFormat
Intl.Collator
@ELIBELLY@ELIBELLY
30

64. 31

65. @ELIBELLY@ELIBELLY
Not supported in older browsers
Expensive (esp. in React)
32

66. DISCLAIMER:DISCLAIMER:
THERE ARE OTHER SOLUTIONS/LIBSTHERE ARE OTHER SOLUTIONS/LIBS
⚠⚠
33

67. UNICODEUNICODE
BCP47BCP47
CLDRCLDR
ICUICU
ECMASCRIPT INTL APIECMASCRIPT INTL API
FORMAT JS COREFORMAT JS CORE
REACT INTLREACT INTL
@ELIBELLY@ELIBELLY
34

68. UNICODEUNICODE
BCP47BCP47
CLDRCLDR
ICUICU
ECMASCRIPT INTL APIECMASCRIPT INTL API
FORMAT JS COREFORMAT JS CORE
REACT INTLREACT INTL
FORMAT JS - COREFORMAT JS - CORE
Exports Javascript API with more
functionality than ECMA
Polyfills where needed
@ELIBELLY@ELIBELLY
35

69. REACT INTLREACT INTL
HTTPS://GITHUB.COM/YAHOO/REACT-INTLHTTPS://GITHUB.COM/YAHOO/REACT-INTL
@ELIBELLY@ELIBELLY
36

70. @ELIBELLY@ELIBELLY
37

71. 38

72. UNICODEUNICODE
BCP47BCP47
CLDRCLDR
ICUICU
ECMASCRIPT INTL APIECMASCRIPT INTL API
FORMAT JS COREFORMAT JS CORE
REACT-INTLREACT-INTL
39

73. I18L HAS A LOGISTICS PROBLEMI18L HAS A LOGISTICS PROBLEM
40

74. CONTINUOUSCONTINUOUS
LOCALISATIONLOCALISATION
ease
price
services & features
It is a way of automatically, seamlessly gathering new
source material, publishing it for translation, acquiring
translations and integrating them back into the product.
I18L HAS A LOGISTICS PROBLEMI18L HAS A LOGISTICS PROBLEM
40

75. I18N IS MUCH EASIER TOI18N IS MUCH EASIER TO
INTEGRATE INTO YOURINTEGRATE INTO YOUR
PROJECT PROJECT EARLYEARLY
@elibelly
41

76. @elibelly
42

77. @elibelly
Internationalise all the things - I18n is part of
accessibility
42

78. @elibelly
Internationalise all the things - I18n is part of
accessibility
I18n is supported by a bunch of standards, helps
do it "right"
42

79. @elibelly
Internationalise all the things - I18n is part of
accessibility
I18n is supported by a bunch of standards, helps
do it "right"
Try to start early if you can
42

80. @elibelly
Internationalise all the things - I18n is part of
accessibility
I18n is supported by a bunch of standards, helps
do it "right"
Try to start early if you can
Always let your user pick their own locale
42

81. @elibelly
Internationalise all the things - I18n is part of
accessibility
I18n is supported by a bunch of standards, helps
do it "right"
Try to start early if you can
Always let your user pick their own locale
German is a great first test language!
42

82. THANK YOU THANK YOU
@ELIBELLY@ELIBELLY
43