Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Designing user experience for multilingual websites (Front-Trends 2013)
Gunnar Bittersmann
April 26, 2013
Design
0
160
Designing user experience for multilingual websites (Front-Trends 2013)
Video:
https://vimeo.com/68680322
Gunnar Bittersmann
April 26, 2013
Tweet
Share
More Decks by Gunnar Bittersmann
See All by Gunnar Bittersmann
Frühstück mit Pu
gunnarbittersmann
0
5
Grid to the future, Part II
gunnarbittersmann
0
2
CSS for Designers
gunnarbittersmann
0
30
Früchte des Zorns
gunnarbittersmann
0
11
TIL about coming downstairs
gunnarbittersmann
0
16
ISO 9241 – Ergonomie der Mensch-System-Interaktion
gunnarbittersmann
0
52
TIL :where the fun :is
gunnarbittersmann
0
16
What a kerning!
gunnarbittersmann
0
27
TIL where no one has gone before
gunnarbittersmann
0
19
Other Decks in Design
See All in Design
Rakuma Developers
nojirakuten
0
1.4k
A Designer’s Guide to Documenting Accessibility & User Interactions
stephaniewalter
0
9.9k
アクセシビリティに興味のあるデザイナーに向けて
cybozuinsideout
PRO
1
10k
アンラーンし続けるデザインプロセス / DESIGNWAVEvol.04
daitorii
2
290
Детский парк Фили
zapoimu
0
560
採用担当デザイナーがみるポートフォリオのポイント
yonekura907
0
640
今から始めるFigma超入門
448jp
0
570
Storyboard: Midnight Cookie
luchiianita
0
220
コミュニケーションデザイン組織のタタキ台 - SmartHR Communication Design Group
bebe
4
1.7k
クラスメソッドアプリデザインドリルver1
cmdesignteam
1
1.7k
Bec Purser - Are you consulting, collaborating, or co-designing? And why it matters.
uxaustralia
PRO
0
110
Dear User, Let's Be Friends: Designing Friendly Interfaces - UX Lisbon 2022
scottkubie
0
250
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Designing Experiences People Love
moore
130
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
Debugging Ruby Performance
tmm1
65
10k
Stop Working from a Prison Cell
hatefulcrawdad
261
17k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
Robots, Beer and Maslow
schacon
152
7.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Faster Mobile Websites
deanohume
294
28k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
Facilitating Awesome Meetings
lara
29
4k
Transcript
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
None
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 localization 10 L10n a11y g16n accessibility 11
Gunnar Bittersmann 16
International websites Website for an international target audience monolingual multilingual
same content different content
RTFM Photographs by Gunnar Bittersmann
Select your language English Polish German Russian Spanish French Chinese
Select your language English polski deutsch русский español français தจ
Select your language English ▼
Berlin Photographs by Gunnar Bittersmann
Warszawa Photographs by Gunnar Bittersmann
Select your language English polski deutsch русский español français தจ
ह"दी !"#$%&ا ?
None
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
None
None
None
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 中文 ह"दी !"#$%&ا
None
None
Use UTF-8. Ever. Everywhere.
Używam wspaniałego webfonta.
First name Last name Ferenc Liszt Liszt Ferenc!
Ferenc Liszt Liszt Ferenc! Given name Family name
Van Zandt Given name Family name Steven
van Beethoven Given name Family name Ludwig
Guðmundsdóttir Given name Family name Björk
How shall we call you? Björk Guðmundsdóttir Name Björk
How shall we call you? Ludwig van Beethoven Name
Beethoven
How shall we call you? Steven Van Zandt Name
Little Steven
How shall we call you? Liszt Ferenc Name Ferenc
Email <input type="email"/> иван@россия.рф
Colors, Images
Acknowledgement Thanks to Richard Ishida for the many articles http://www.w3.org/International
webplatform.org
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ę.