Designing user experience for multilingual websites (Front-Trends 2013)

Video: https://vimeo.com/68680322

Transcript

1. Projektowanie doświadczenia " użytkownika dla witryn wielojęzycznych Gunnar Bittersmann @g16n
2. Photograph by Emmanuel Huybrechts Taken from Wikimedia Commons Photograph by Gunnar Bittersmann Painting by Joseph Karl Stieler Taken from Wikimedia Commons
3. Designing user experience" for multilingual websites Gunnar Bittersmann @g16n
4. Photograph by Emmanuel Huybrechts Taken from Wikimedia Commons Photograph by Gunnar Bittersmann Painting by Joseph Karl Stieler Taken from Wikimedia Commons
5. Gestaltung des Nutzungserlebnisses" für mehrsprachige Websites Gunnar Bittersmann @g16n
6. Photograph by Emmanuel Huybrechts Taken from Wikimedia Commons Photograph by Gunnar Bittersmann Painting by Joseph Karl Stieler Taken from Wikimedia Commons
7. Designing user experience" for multilingual websites Gunnar Bittersmann @g16n
8. Designing multilingual websites" for user experience Gunnar Bittersmann @g16n
10. Localization ≠ Internationalization
11. 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
12. Internationalization designing a system to be prepared to make localization possible and easy.
13. Photograph by Mat Connolley Taken from Wikimedia Commons
14. Internationalization is not a feature. It is an architecture.” —Addison Phillips, Chair W3C Internationalization WG “
15. i18n internationalization 18 localization 10 L10n a11y g16n accessibility 11 Gunnar Bittersmann 16
16. International websites Website for an international target audience monolingual multilingual same content different content
17. RTFM Photographs by Gunnar Bittersmann
18. Select your language English Polish German Russian Spanish French Chinese
19. Select your language English polski deutsch русский español français தจ
20. Select your language English ▼
21. Berlin Photographs by Gunnar Bittersmann
22. Warszawa Photographs by Gunnar Bittersmann
23. Select your language English polski deutsch русский español français தจ   ह"दी !"#$%&ا ?
25. 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     HTTP header
29. Language negotiation •  Provide your content in a language that the user (most likely) understands •  Provide the option to change the language English polski deutsch русский español français 中文 ह"दी !"#$%&ا
32. Use UTF-8. Ever. Everywhere.
33. Używam wspaniałego webfonta.
34. First name Last name Ferenc   Liszt   Liszt Ferenc!
35. Ferenc   Liszt   Liszt Ferenc! Given name Family name
36. Van  Zandt   Given name Family name Steven  
37. van  Beethoven   Given name Family name Ludwig  
38. Guðmundsdóttir   Given name Family name Björk  
39. How shall we call you? Björk  Guðmundsdóttir   Name Björk  
40. How shall we call you? Ludwig  van  Beethoven   Name Beethoven  
41. How shall we call you? Steven  Van  Zandt   Name Little  Steven  
42. How shall we call you? Liszt  Ferenc   Name Ferenc  
43. Email <input  type="email"/>   иван@россия.рф  
44. Colors, Images
45. Acknowledgement Thanks to Richard Ishida for the many articles http://www.w3.org/International  
46. webplatform.org
47. 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   Dziękuję.