Designing user experience for multilingual websites

Slide 1

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

Slide 2

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

Slide 3

Designing user experience” for multilingual websites Gunnar Bittersmann @g16n

Slide 4

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

Slide 5

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

Slide 6

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

Slide 7

Designing user experience” for multilingual websites Gunnar Bittersmann @g16n

Slide 8

Designing multilingual websites” for user experience Gunnar Bittersmann @g16n

Slide 9

Slide 10

Localization ≠ Internationalization

Slide 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

Slide 12

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

Slide 13

Photograph by Mat Connolley Taken from Wikimedia Commons

Slide 14

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

Slide 15

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

Slide 16

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

Slide 17

RTFM Photographs by Gunnar Bittersmann

Slide 18

Select your language English Spanish Polish French German Chinese Russian

Slide 19

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

Slide 20

Select your language English ▼

Slide 21

Berlin Photographs by Gunnar Bittersmann

Slide 22

Warszawa Photographs by Gunnar Bittersmann

Slide 23

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

Slide 24

Slide 25

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

Slide 26

Slide 27

Slide 28

Slide 29

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

Slide 30

Slide 31

Slide 32

Use UTF-8. Ever. Everywhere.

Slide 33

Używam wspaniałego webfonta.

Slide 34

First name Ferenc Last name Liszt Liszt Ferenc!

Slide 35

Given name Ferenc Family name Liszt Liszt Ferenc!

Slide 36

Given name Steven Family name Van Zandt

Slide 37

Given name Ludwig Family name van Beethoven

Slide 38

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

Slide 39

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

Slide 40

Name Ludwig van Beethoven How shall we call you? Beethoven

Slide 41

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

Slide 42

Name Liszt Ferenc How shall we call you? Ferenc

Slide 43

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

Slide 44

Colors, Images

Slide 45

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

Slide 46

webplatform.org

Slide 47

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