2200+ ways view global website
•
292 likes•54,412 views
As a product goes global, multiple languages and currencies becomes a major requirement. Sounds straightforward, but is simply displaying localized content enough? Will a design choice work for both Japan and US markets? Will that 200px wide column fit long greek words? Will your layout still work on a right-to-left language? In this talk, we'll see the challenges of implementing a front-end that works for 42 languages and 54 currencies.
Recommended
More Related Content
Similar to 2200+ ways view global website
Similar to 2200+ ways view global website (20)
More from Eduardo Shiota Yasuda
More from Eduardo Shiota Yasuda (14)
Recently uploaded
Recently uploaded (20)
2200+ ways view global website
- 1. 2200+ different ways to view a website 42 languages, 54 currencies, 1 CSS @shiota ConFoo 2015
- 5. Getting a small website going might be fairly straightforward…
- 6. R$ pt-BR
- 7. … but sometimes you need to speak more than one language.
- 8. around 83% do not speak English (as a first or second language) http://en.wikipedia.org/wiki/List_of_languages_by_total_number_of_speakers http://www.worldometers.info/world-population/
- 9. Sometimes you need to show the prices the right way.
- 11. Sometimes you need to understand more than one culture.
- 17. And every world event might affect you.
- 23. 200+ countries 600.000+ properties 150 offices 42 languages 54 currencies
- 24. Our design and code must support all languages, all currencies, and allow multicultural solutions.
- 26. There are a few HTML attributes and CSS properties you must know:
- 27. `dir` attribute
- 28. <html>
- 29. <html dir="ltr">
- 31. <html dir="rtl">
- 38. `:lang` selector
- 39. <p class="love" lang="en"> I love the web! </p> <p class="love" lang="pt-BR"> Eu amo a web! </p> <p class="love" lang="nl"> Ik hou van het Web! </p>
- 40. .love { padding: 1em; } .love:lang(en) { background-color: royalblue; } .love:lang(pt-BR) { background-color: mediumseagreen; } .love:lang(nl) { background-color: orange; }
- 42. You may also add a html/body class via server-side.
- 44. Remember to take care of right-to-left script languages.
- 48. <div class="content"> <div class="box box1"> <p>BOX 1</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="box box2"> <p>BOX 2</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div>
- 49. .box { width: 300px; padding: 10px; background-color: royalblue; color: #fff; float: left; margin-right: 20px; } .box2 { background-color: firebrick; }
- 50. wrong
- 51. Know and understand different CSS solutions, use what fits best.
- 52. inline-block
- 53. /* remember to account for additional space between elements */ .box { display: inline-block; } [dir="ltr"] .box { margin-right: 20px; } [dir="rtl"] .box { margin-left: 20px; }
- 55. table/table-cell
- 56. .content { display: table; } .box { display: table-cell; } [dir="ltr"] .box { border-right: 20px solid #fff; /* cheat */ } [dir="rtl"] .box { border-left: 20px solid #fff; /* cheat */ }
- 58. Flexbox
- 59. .content { display: flex; } [dir="ltr"] .box { margin-right: 20px; } [dir="rtl"] .box { margin-left: 20px; }
- 61. Floats
- 62. [dir="ltr"] .box { margin-right: 20px; float: left; } [dir="rtl"] .box { float: right; margin-left: 20px; }
- 64. “If you work with multiple languages and still support legacy browsers, a table is your best friend.” — Eduardo Shiota, a developer who hopes to use only flexbox in a near future
- 65. Remember to adjust positions, margins, paddings etc.
- 67. .powered-by-html { font-size: 72px; padding-left: 80px; position: relative; } .powered-by-html:before { content: ""; background-image: url("html.svg"); background-size: cover; width: 72px; height: 72px; position: absolute; left: 0; top: 50%; margin-top: -36px; }
- 68. wrong
- 69. [dir="ltr"] .powered-by-html { padding-left: 80px; } [dir="ltr"] .powered-by-html:before { left: 0; } [dir="rtl"] .powered-by-html { padding-right: 80px; } [dir="rtl"] .powered-by-html:before { right: 0; }
- 72. A short word in your language might be a huge one in another.
- 75. (always view your layout in greek and cyrillic)
- 76. Each language has its own perks.
- 77. 1 rouble 2 roubles 3 roubles 4 roubles 5 roubles 1 рубль 2 рубля 3 рубля 4 рубля 5 рублей
- 78. If you have a good localisation tool, use resources instead of words.
- 79. "I love the web" i_love_the_web copywriter content translators tag
- 80. <p class="powered-by-html"> I love the web! </p>
- 82. Be careful about the typefaces you choose.
- 85. UTF-8 ALL THINGS
- 86. Ask for help.
- 88. “This is completely wrong.” — Karim Naguib, Designer
- 89. Pay attention to small details.
- 92. Not everyone in the world uses R$, € or U$.
- 93. € 90,00
- 94. R$ 278,05
- 95. $ 114.73
- 96. ¥ 12,467.08
- 97. Prepare your layout for large numbers.
- 98. 1,374,521.70rp
- 99. Remember each currency and country uses different separators.
- 100. R$ 90,00
- 101. $ 90.00
- 102. € 90,00
- 103. € 90.00
- 104. Be careful about doing math with JavaScript.
- 107. Provide a consistent rounding on both client and server code.
- 108. Dealing with culture
- 109. Some symbols might have different meanings on different countries.
- 111. Each country has its own habits.
- 114. Beware of local laws.
- 116. A language’s John Smith might be another’s Jacques Martin.
- 118. Either be neutral or very focused on your layouts.
- 120. “If you talk to a man in a language he understands, that goes to his head. If you talk to him in his language, that goes to his heart.” — Nelson Mandela
- 121. Keep the customer at the centre of everything you do.
- 122. Thanks!
- 123. Credits (in order): Map of Brazil - Single Color by FreeVectorMaps.com Map of World - Single Color by FreeVectorMaps.com http://commons.wikimedia.org/wiki/File:Exchange_Money_Conversion_to_Foreign_Currency.jpg https://www.flickr.com/photos/leandrociuffo/6932936401 https://www.flickr.com/photos/karlocamero/9768744423 https://www.flickr.com/photos/ishanz/4688443134 Paula Abrahão — @darkdiva https://www.flickr.com/photos/darkdiva/14022904161/ Jamie McDonald/Getty Images https://www.flickr.com/photos/112078056@N07/14424444150 http://en.wikipedia.org/wiki/File:Fimmvorduhals_2010_03_27_dawn.jpg http://flagpedia.net/ iStockphoto