Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
2200+ different ways to
view a website
42 languages, 54 currencies, 1 CSS
@shiota ConFoo 2015
@shiota
eshiota.com
contato@eshiota.com
slideshare.net/eshiota
Crafting a global
website
Getting a small website
going might be fairly
straightforward…
R$
pt-BR
… but sometimes you
need to speak more
than one language.
around
83%
do not speak English
(as a first or second language)
http://en.wikipedia.org/wiki/List_of_languages_by_total_num...
Sometimes you need
to show the prices the
right way.
Sometimes you need
to understand more
than one culture.
And every world event
might affect you.
200+ countries
600.000+ properties
150 offices
42 languages
54 currencies
Our design and code must
support all languages, all
currencies, and allow
multicultural solutions.
Dealing with
languages
There are a few HTML
attributes and CSS
properties you must know:
`dir` attribute
<html>
<html dir="ltr">
<html dir="rtl">
`direction` property
html {
direction: ltr;
}
html {
direction: rtl;
}
`:lang` selector
<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"...
.love {
padding: 1em;
}
.love:lang(en) {
background-color: royalblue;
}
.love:lang(pt-BR) {
background-color: mediumseagre...
You may also add a
html/body class via
server-side.
<body class="dir-rtl lang-nl">
Remember to take care
of right-to-left script
languages.
<div class="content">
<div class="box box1">
<p>BOX 1</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesett...
.box {
width: 300px;
padding: 10px;
background-color: royalblue;
color: #fff;
float: left;
margin-right: 20px;
}
.box2 {
b...
wrong
Know and understand
different CSS solutions,
use what fits best.
inline-block
/*
remember to account for additional
space between elements
*/
.box {
display: inline-block;
}
[dir="ltr"] .box {
margin-...
table/table-cell
.content {
display: table;
}
.box {
display: table-cell;
}
[dir="ltr"] .box {
border-right: 20px solid #fff; /* cheat */
}...
Flexbox
.content {
display: flex;
}
[dir="ltr"] .box {
margin-right: 20px;
}
[dir="rtl"] .box {
margin-left: 20px;
}
Floats
[dir="ltr"] .box {
margin-right: 20px;
float: left;
}
[dir="rtl"] .box {
float: right;
margin-left: 20px;
}
“If you work with multiple
languages and still support
legacy browsers, a table is
your best friend.”
— Eduardo Shiota, a ...
Remember to adjust
positions, margins,
paddings etc.
.powered-by-html {
font-size: 72px;
padding-left: 80px;
position: relative;
}
.powered-by-html:before {
content: "";
backg...
wrong
[dir="ltr"] .powered-by-html {
padding-left: 80px;
}
[dir="ltr"] .powered-by-html:before {
left: 0;
}
[dir="rtl"] .powered...
(or use inline-block)
A short word in your
language might be a
huge one in another.
(always view your layout
in greek and cyrillic)
Each language has its
own perks.
1 rouble
2 roubles
3 roubles
4 roubles
5 roubles
1 рубль
2 рубля
3 рубля
4 рубля
5 рублей
If you have a good
localisation tool, use
resources instead of words.
"I love the web"
i_love_the_web
copywriter
content
translators
tag
<p class="powered-by-html">
I love the web!
</p>
<p class="powered-by-html">
<TMPL_VAR i_love_the_web>
</p>
Be careful about the
typefaces you choose.
UTF-8 ALL THINGS
Ask for help.
“This is completely wrong.”
— Karim Naguib, Designer
Pay attention to
small details.
Dealing with
currencies
Not everyone in the
world uses R$, € or U$.
€ 90,00
R$ 278,05
$ 114.73
¥ 12,467.08
Prepare your layout for
large numbers.
1,374,521.70rp
Remember each currency
and country uses
different separators.
R$ 90,00
$ 90.00
€ 90,00
€ 90.00
Be careful about doing
math with JavaScript.
parseFloat("10.58"); // 10.58
parseFloat("10,58"); // 10
Provide a consistent
rounding on both client
and server code.
Dealing with
culture
Some symbols might
have different meanings
on different countries.
Each country has its
own habits.
Beware of local laws.
A language’s John Smith
might be another’s
Jacques Martin.
john.smith@company.com
jacques.martin@société.com
joao.silva@empresa.com
jan.jansen@bedrijf.nl
juan.perez@empresa.com
taro...
Either be neutral or
very focused on your
layouts.
“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 t...
Keep the customer at
the centre of
everything you do.
Thanks!
Credits (in order):
Map of Brazil - Single Color by FreeVectorMaps.com
Map of World - Single Color by FreeVectorMaps.com
h...
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Internationalisation: 2200+ different ways to view a website
Próxima SlideShare
Cargando en…5
×

Internationalisation: 2200+ different ways to view a website

47.993 visualizaciones

Publicado el

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.

Publicado en: Tecnología, Internet, Diseño
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD TH1S BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD TH1S BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc EBOOK Here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

Internationalisation: 2200+ different ways to view a website

  1. 2200+ different ways to view a website 42 languages, 54 currencies, 1 CSS @shiota ConFoo 2015
  2. @shiota eshiota.com contato@eshiota.com slideshare.net/eshiota
  3. Crafting a global website
  4. Getting a small website going might be fairly straightforward…
  5. R$ pt-BR
  6. … but sometimes you need to speak more than one language.
  7. 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/
  8. Sometimes you need to show the prices the right way.
  9. Sometimes you need to understand more than one culture.
  10. And every world event might affect you.
  11. 200+ countries 600.000+ properties 150 offices 42 languages 54 currencies
  12. Our design and code must support all languages, all currencies, and allow multicultural solutions.
  13. Dealing with languages
  14. There are a few HTML attributes and CSS properties you must know:
  15. `dir` attribute
  16. <html>
  17. <html dir="ltr">
  18. <html dir="rtl">
  19. `direction` property
  20. html { direction: ltr; }
  21. html { direction: rtl; }
  22. `:lang` selector
  23. <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>
  24. .love { padding: 1em; } .love:lang(en) { background-color: royalblue; } .love:lang(pt-BR) { background-color: mediumseagreen; } .love:lang(nl) { background-color: orange; }
  25. You may also add a html/body class via server-side.
  26. <body class="dir-rtl lang-nl">
  27. Remember to take care of right-to-left script languages.
  28. <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>
  29. .box { width: 300px; padding: 10px; background-color: royalblue; color: #fff; float: left; margin-right: 20px; } .box2 { background-color: firebrick; }
  30. wrong
  31. Know and understand different CSS solutions, use what fits best.
  32. inline-block
  33. /* remember to account for additional space between elements */ .box { display: inline-block; } [dir="ltr"] .box { margin-right: 20px; } [dir="rtl"] .box { margin-left: 20px; }
  34. table/table-cell
  35. .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 */ }
  36. Flexbox
  37. .content { display: flex; } [dir="ltr"] .box { margin-right: 20px; } [dir="rtl"] .box { margin-left: 20px; }
  38. Floats
  39. [dir="ltr"] .box { margin-right: 20px; float: left; } [dir="rtl"] .box { float: right; margin-left: 20px; }
  40. “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
  41. Remember to adjust positions, margins, paddings etc.
  42. .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; }
  43. wrong
  44. [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; }
  45. (or use inline-block)
  46. A short word in your language might be a huge one in another.
  47. (always view your layout in greek and cyrillic)
  48. Each language has its own perks.
  49. 1 rouble 2 roubles 3 roubles 4 roubles 5 roubles 1 рубль 2 рубля 3 рубля 4 рубля 5 рублей
  50. If you have a good localisation tool, use resources instead of words.
  51. "I love the web" i_love_the_web copywriter content translators tag
  52. <p class="powered-by-html"> I love the web! </p>
  53. <p class="powered-by-html"> <TMPL_VAR i_love_the_web> </p>
  54. Be careful about the typefaces you choose.
  55. UTF-8 ALL THINGS
  56. Ask for help.
  57. “This is completely wrong.” — Karim Naguib, Designer
  58. Pay attention to small details.
  59. Dealing with currencies
  60. Not everyone in the world uses R$, € or U$.
  61. € 90,00
  62. R$ 278,05
  63. $ 114.73
  64. ¥ 12,467.08
  65. Prepare your layout for large numbers.
  66. 1,374,521.70rp
  67. Remember each currency and country uses different separators.
  68. R$ 90,00
  69. $ 90.00
  70. € 90,00
  71. € 90.00
  72. Be careful about doing math with JavaScript.
  73. parseFloat("10.58"); // 10.58
  74. parseFloat("10,58"); // 10
  75. Provide a consistent rounding on both client and server code.
  76. Dealing with culture
  77. Some symbols might have different meanings on different countries.
  78. Each country has its own habits.
  79. Beware of local laws.
  80. A language’s John Smith might be another’s Jacques Martin.
  81. john.smith@company.com jacques.martin@société.com joao.silva@empresa.com jan.jansen@bedrijf.nl juan.perez@empresa.com taro.yamada@company.com
  82. Either be neutral or very focused on your layouts.
  83. “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
  84. Keep the customer at the centre of everything you do.
  85. Thanks!
  86. 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

×