A presentation at Front-Trends 2013 in in Warsaw, Poland by Gunnar Bittersmann
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
The following resources were mentioned during the presentation or are useful additional information.
How do people’s names differ around the world, and what are the implications of those differences on the design of forms, databases, ontologies, etc. for the Web?
On some Web pages you’ll find country flags as symbols for languages. This article explains why this approach is problematic, and what you should do instead.
Here’s what was said about this presentation on social media.
