Projektowanie doświadczenia ” użytkownika dla witryn wielojęzycznych Gunnar Bittersmann @g16n

Photograph by Emmanuel Huybrechts Taken from Wikimedia Commons Photograph by Gunnar Bittersmann Painting by Joseph Karl Stieler Taken from Wikimedia Commons

Designing user experience” for multilingual websites Gunnar Bittersmann @g16n

Photograph by Emmanuel Huybrechts Taken from Wikimedia Commons Photograph by Gunnar Bittersmann Painting by Joseph Karl Stieler Taken from Wikimedia Commons

Gestaltung des Nutzungserlebnisses” für mehrsprachige Websites Gunnar Bittersmann @g16n

Photograph by Emmanuel Huybrechts Taken from Wikimedia Commons Photograph by Gunnar Bittersmann Painting by Joseph Karl Stieler Taken from Wikimedia Commons

Designing user experience” for multilingual websites Gunnar Bittersmann @g16n

Designing multilingual websites” for user experience Gunnar Bittersmann @g16n

Localization ≠ Internationalization

Localization adaptation of a system for a specific region • language related aspects – translations – different characters and scripts • cultural aspects – units, currencies – time and date formats – meaning of colors and symbols – suitability of images • legal requirements

Internationalization designing a system to be prepared to make localization possible and easy.

Photograph by Mat Connolley Taken from Wikimedia Commons

“ Internationalization is not a feature. It is an architecture.” —Addison Phillips, Chair W3C Internationalization WG

i18n internationalization 18 L10n localization 10 a11y accessibility 11 g16n Gunnar Bittersmann 16

International websites Website for an international target audience monolingual same content different content multilingual

RTFM Photographs by Gunnar Bittersmann

Select your language English Spanish Polish French German Chinese Russian

Select your language English español polski français deutsch 中文 русский

Select your language English ▼

Berlin Photographs by Gunnar Bittersmann

Warszawa Photographs by Gunnar Bittersmann

Select your language English español polski français deutsch 中文   русский ह”दी ? !”#$%&‫ا‬

HTTP header GET  /index.html  HTTP/1.1   Host:  example.net   User-­‐Agent:  Mozilla/5.0  (Macintosh;  Intel  Mac  OS  X  10.8;  rv: 20.0)  Gecko/20100101  Firefox/20.0   Accept:  text/html,application/xhtml+xml,application/xml;q=0.9,*/ *;q=0.8   Accept-­‐Language:  en-­‐us,en;q=0.8,de-­‐de;q=0.6,de;q=0.4,pl;q=0.2   Accept-­‐Encoding:  gzip,  deflate    

Language negotiation English polski deutsch русский español français 中文 ह”दी !”#$%&‫ا‬ • Provide your content in a language that the user (most likely) understands • Provide the option to change the language

Use UTF-8. Ever. Everywhere.

Używam wspaniałego webfonta.

First name Ferenc   Last name Liszt   Liszt Ferenc!

Given name Ferenc   Family name Liszt   Liszt Ferenc!

Given name Steven   Family name Van  Zandt  

Given name Ludwig   Family name van  Beethoven  

Given name Björk   Family name Guðmundsdóttir  

Name Björk  Guðmundsdóttir   How shall we call you? Björk  

Name Ludwig  van  Beethoven   How shall we call you? Beethoven  

Name Steven  Van  Zandt   How shall we call you? Little  Steven  

Name Liszt  Ferenc   How shall we call you? Ferenc  

Email иван@россия.рф   <input  type=”email”/>  

Colors, Images

Acknowledgement Thanks to Richard Ishida for the many articles http://www.w3.org/International  

webplatform.org

Dziękuję. Photographs by Emmanuel Huybrechts (top left), Mat Connolley (bottom left), painting by Joseph Karl Stieler, taken from Wikimedia Commons; center top and bottom photographs by Gunnar Bittersmann Ludwig  van  Beethoven