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

Mehrsprachige Websites

Mehrsprachige Websites

- Internationalisierung (i18n), Lokalisierung (L10n)
- Sprachauswahlmenü-Design
- Verlinkung entsprechender Seiten
- Sprachvereinbarung (language negotiation)

Links zu Ressourcen und Codepens auf https://noti.st/gunnarbittersmann/b6lgwT/mehrsprachige-websites

Gunnar Bittersmann

January 06, 2023
Tweet

More Decks by Gunnar Bittersmann

Other Decks in Design

Transcript

  1. O I T Z I L N O I T

    N R E T N A A A I N i18n
  2. i18n I A A A N

  3. i18n I N T E R N A T I

    O N A L I Z A T I O N
  4. C O I T Z I L O A A

    L N L10n
  5. C O I T Z I L O A A

    L N L10n
  6. L10n l10n I18n i18n L10n l10n I18n i18n L10n l10n

    I18n i18n Fira Sans Helvetica Condensed Gill Sans
  7. E T E N R E B U S K

    k8s
  8. E T E N R E B U S K

    k8s
  9. I T I L I B S S E C

    C Y A a11y
  10. I T I L I B S S E C

    C Y A a11y
  11. N A M S R E T T I B

    R A N N U N G g16n
  12. N A M S R E T T I B

    R A N N U N G g16n @
  13. A D I H S I R A H C

    I D R r12a @
  14. T R E I M S N E E J

    j9t @
  15. Lokalisierung Anpassung eines Systems an eine bestimmte Region (geografisch, ethnisch)

    
 sprachlich: Zeichen, Schriftsystem 
 kulturell: Datum/Zeit, Währung, Bedeutung von Farben und Symbolen, Bilder rechtlich
  16. Internationalisierung Gestaltung eines Systems, so dass es leicht an andere

    Sprachen und Kulturen angepasst werden kann 
 “Internationalization is not a feature. It is an architecture.” 
 — Addison Phillips
  17. Foto: Emmanuel Huybrechts, CC BY 2.0 Foto: Thomas Kraft, CC

    BY-SA 2.5 Foto: Mat Connolley, CC BY 2.5
  18. Mehrsprachige Websites

  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. Sprachauswahlmenü • oben auf der Seite; Icon o.ä. • Optionen

    anzeigen, kein Pull-Down-Menü • Beschriftung der Optionen in der jeweiligen Zielsprache: ةيبرعلا, deutsch, English, español, français, ೔ຊޠ • keine Flaggen für Sprachen
  30. None
  31. None
  32. Diagramm: Mozilla Contributors, CC BY-SA 2.5 Content negotiation

  33. .htaccess index.de.html index.en.html index.zh.html seite2.de.html seite2.en.html seite2.zh.html seite3.de.html seite3.en.html sprachspezi

    fi sche URLs: https: // example.net/index.de https: // example.net/index.en https: // example.net/index.zh https: // example.net/seite2.de // generische URLs: https: // example.net/index https: // example.net/seite2 https: // example.net/seite3 Options +MultiViews
  34. index.de.html <a href="https: // example.net/seite3">Seite 3 </ a> <a href="https:

    // example.net/seite3.de">Seite 3 </ a> vs.
  35. index.de.html <a href="https: // example.net/seite3">Seite&nbsp;3 </ a> <a href="https: //

    example.net/seite3.de">Seite&nbsp;3 </ a> vs.
  36. Language negotiation (Sprachvereinbarung) • Präferenz des Nutzers im HTTP-Header Accept-Language

    • generische und sprachspezifische URLs • Sprachauswahlmenü notwendig • Änderung der Sprache durch Nutzer speichern (Cookie)
  37. Mehrsprachige Websites TIL about -starting -blocks 1 min