Upgrade to Pro — share decks privately, control downloads, hide ads and more …

¡Ay, caramba! Multilingual websites

Miguel Ángel Pérez
June 17, 2014
Design
0
60

¡Ay, caramba! Multilingual websites

Even though it’s a part of the name, sometimes we forget that the Web IS world wide. It is a platform enjoyed by millions of people of different languages. This presentation reviews some of the “¡Ay, caramba!” moments we might face when designing a multilingual site.

http://miguel-perez.com/talks/ay-caramba-multilingual-websites/

Miguel Ángel Pérez

June 17, 2014
Tweet

More Decks by Miguel Ángel Pérez

See All by Miguel Ángel Pérez
Predicting efficiency without user testing.
tayokoart
0
57
Talking to the Memex
tayokoart
0
71
Realizing the Memex - An introduction to the Semantic Web
tayokoart
0
68

Other Decks in Design

See All in Design
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
31
2.6k
デザインシステムで解消するさまざまな分断
hirataaa0220
1
170
社内管理画面のデザインもプロダクトデザイン
takanorip
4
740
PRDがデザインプロセスを高速化した話
tooomo
1
320
231129_FOSS4G-ASIA-2023_kato
hjmkth
1
300
BtoB SaaS Design Conference 登壇資料 Cloudbase LT
narizuka
0
490
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
150
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.2k
他人事じゃないWebアクセシビリティ入門
arihiro17
0
220
Wishing Star Comic
torije
2
1.2k
デザインをみんなのものに　「デザインの脱植民地化」を日本の文脈で考える
mayunak
7
4.1k
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.8k

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Statistics for Hackers
jakevdp
789
220k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
A better future with KSS
kneath
231
16k
A designer walks into a library…
pauljervisheath
200
23k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
17
6.4k
Unsuck your backbone
ammeep
663
57k

Transcript

  1. Multilingual Websites Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba!

  2. None
  3. None

  4. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Avoid Character Espaces

  5. ‣ Escape syntax characters" ‣ Escape invisible characters" ‣ For

    everything else, there’s UTF-8 encode Properly to avoid escapes <meta charset=‘UTF-8’> Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites
  6. None

  7. ‣ Detect your user’s language setting for a good default"

    ‣ Have a way for the user to change their settings" ‣ List language names in their own language" ‣ Don’t lose the user’s position on the site Set the language of your document <html dir=‘rtl’ lang=‘ar’> Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites
  8. None
  9. None

  10. styling a specific language Miguel A. Perez Front-end/Ux at Weblinc

    ¡Ay, caramba! Multilingual Websites [lang=en] { // IE 7+! ! line-height: 1.5em! }! html:lang(ar) { // IE 8+, HTTP headers! ! font-family: sans-serif;! } Choose your font-stack carefully since it will provide a feedback for missing glyphs.
  11. None
  12. None

  13. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Consider imagery very carefully

  14. Using images as text makes translation difficult Miguel A. Perez

    Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

  15. Non-repeatable Backgrounds will break Miguel A. Perez Front-end/Ux at Weblinc

    ¡Ay, caramba! Multilingual Websites
  16. None

  17. Visual metaphors don’t always translate This check symbol means 'correct'

    or 'ok' in many countries. In some countries, however, such as Japan, it can indicate 'incorrect'. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

  18. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Language Agnostic GUI
  19. None
  20. None

  21. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    furigana
  22. None

  23. ruby markup <p lang=‘ja’>! ! <ruby>! ! ! <rb>౦</rb> <!—

    Ruby Base —>! ! ! <rt>ͱ͏</rt> <!— Ruby Text —>! ! ! <rb>ژ</rb> ! ! ! <rt>͖ΐ͏</rt>! ! </ruby>! </p> Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites
  24. None

  25. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Embrace the wrap

  26. Number of Characters Additional Physical Space Required Up to 10

    100% to 200% 11 to 20 80% to 100% 21 to 30 60% to 80% 31 to 50 40% to 60% 51 to 70 31% to 40% Over 70 30% Text strings will vary in size Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites
  27. None

  28. Bad ways to solve this problem... Miguel A. Perez Front-end/Ux

    at Weblinc ¡Ay, caramba! Multilingual Websites .class {! ! word-wrap: break-word;! }! .class {! ! overflow: hidden;! } These may solve the visual problem of longer strings but render the text unreadable.

  29. ‣ Word Break Opportunity marks a position within text where

    the browser may break a line." ‣ Soft Hyphen is an invisible character that suggest where the browser may break the line and add a hyphen. <wbr> and &shy; Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites Alright ways to solve this...

  30. The holy grail of hyphens Miguel A. Perez Front-end/Ux at

    Weblinc ¡Ay, caramba! Multilingual Websites .class {! ! -webkit-hyphens: auto;! ! -moz-hyphens: auto;! ! -ms-hyphens: auto;! ! hyphens: auto;! } Modernizer test available for feature detection that could be used alongside a polyfill.
  31. None

  32. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Validate your work

  33. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Pseudolocalizations Instead of translating the text of the software into a foreign language the textual elements are replaced with an altered version of the original language. Normal Text Pseudolocalization Account Settings [== Àççôûñţ Šéţţîñĝš ==]
  34. None
  35. None
  36. None

  37. Miguel A. Perez Front-end/Ux at Weblinc ¡Ay, caramba! Multilingual Websites

    Respond to language

  38. Thanks ¡Ay, caramba! @tayokoart & @Weblinc