13 Tipps zur Umsetzung von multilingualen Websites in Responsive Webdesign

Multilinguales Responsive Webdesign
Kommentare

Eines der primären Design-Prinzipien, die der Nützlichkeit und dem Wachstum des Core des Webs zugrunde liegen, ist Universalität. Richtig umgesetztes Responsive Webdesign macht sich genau dieses Prinzip zu Nutze, um zukunftsfreundliche Websites zu erstellen, die – zumindest in der Theorie – von jedem Device aus genutzt werden können.

Oder wie Tom Maslen in einem Blogpost im Responsive-News-Blog des BBC sagt: „The web wins the more viewable your website is“. Eine solche Sichtbarkeit ist gerade für weltweit agierende News-Websites wie BBC News von großer Bedeutung. Um noch mehr Usern den Zugang zu ihrem Content zu ermöglichen, ist die Adaption von Responsive Websites, die mit mehreren Sprachen funktionieren, also unerlässlich.

Aktuell werden mit der responsiven Codebase von BBC News 28 verschiedene News-Websites gerendert – und viele davon wie etwa BBC Mundo oder BBC Russland nutzen eine sprachneutrale bi-direktionale Codebase. Der besondere Vorteil beim Schreiben neuer multilingualer Responsive-Features ist dabei vor allem, dass sie sofort auf allen BBC-News-Seiten zur Verfügung stehen und so für ein konsistentes Branding und Design auf allen Devices und Websites sorgen.

Planung ist alles

Natürlich bedarf es bei der Umsetzung eines solchen Vorgehens einer umfangreichen Planung, denn die richtige Balance zwischen der Einheitlichkeit der Seiten und dem richtigen Maß an Individualisierung zu finden, ist schwieriger, als es sich zunächst anhört. So benötigt jede Seite (beziehungsweise jeder Dienst) ein Mindestmaß an Lokalisierung, das sich im Design der Seite, Unterschieden in den Content-Ansprüchen und der Art und Weise wie das Interface erstellt ist, widerspiegelt.

Um auch anderen Webentwicklern dabei zu helfen, ihr Responsive Webdesign multilingual zu gestalten, hat das BBC-News-Entwicklerteam insgesamt 13 Tipps zusammengetragen, die Maslen im oben genannten Blogpost vorgestellt hat.

13 Tipps um Responsive Webdesign multilingual zu gestalten

1.

Sprachen, Schriften und Länder sind nicht dasselbe


Ein gern gemachter Fehler beim Erstellen von verschiedenen Versionen der gleichen Website, ist es jede Version mit einem bestimmten Land zu assoziieren. Tatsächlich ist aber eine französische Version der Seite nicht nur für in Frankreich lebende Leser bestimmt, oder die russische Version nur für Russland – mal ganz abgesehen davon, dass viele Länder eine zweisprachige Bevölkerung beheimaten.

Dazu kommt, dass Sprachen durch mehr als eine Schrift abgebildet werden können, während eine Schrift auch zum Definieren mehrerer Sprachen genutzt werden kann – und dabei auch noch kulturelle und politische Untertöne beinhaltet. Darum ist es wichtig, zu identifizieren, ob der Content für verschiedene Märkte lokalisiert werden, oder er nur Übersetzungen für verschiedene Sprachen bieten soll und die Nutzung der Sprache richtig zu kennzeichnen.

2.

Jede Version leicht konfigurierbar gestalten


Während es zwar nur eine Codebase für das Hosting der multilingualen Website gibt, muss trotzdem jede Seite individuell konfigurierbar sein – und das möglichst einfach maintainable und erweiterbar. Dafür benötigt jeder Dienst eine eigene CSS-Datei, in der die Konfiguration der Site definiert wird: zum Beispiel, in welche Textrichtung geschrieben wird, welche Schriftarten und –familien genutzt werden oder wie das Layout je nach Sprache gestaltet wird.

Besonders einfach umgesetzt wird das zum Beispiel mit Sass, wodurch unnötige Code-Duplikate vermieden werden können. Zudem kann mit individuellen Variablen identifiziert werden, welche Sprache verarbeitet wird.

3.

Templating-Sprachen für die HTML-Customization jedes Dienstes nutzen


Der große Vorteil daran, ein Templating-System zu nutzen, ist die Möglichkeit, den gesamten HTML-Code auf einmal zu updaten, was die Maintenance der Seite deutlich vereinfacht. Für das Schreiben von multilingualem HTML wird dafür zunächst die Sprache in der der Content verfasst wird und die Textrichtung, deklariert. Damit soll vor allem sichergestellt werden, dass die Charaktersets von jedem Browser korrekt angezeigt werden.

4.

Übersetzungsdaten für Worte erstellen, die im UI hart-kodiert werden


Eigentlich sollte es offensichtlich sein: auch beim Erstellen von mehrsprachigen Seiten sollte nicht nur eine Sprache in die Templates eingebunden werden. Stattdessen ist es ratsam, eine Liste übersetzter Wörter für jede unterstützte Sprache in einer Vocab-Datei zu verwalten, die nur wenn nötig geladen wird.

5.

Sicherstellen, dass Web-Fonts mit allen unterstützten Sprachen kompatibel sind


Web-Fonts gehören mittlerweile fast zum Standard eines jeden Developer-Toolkits und ermöglichen mehr Nuancen als die gewöhnlichen serif– und sans-serif-Fonts. Sollen Web-Fonts in einer Responsive designten multilingualen Website genutzt werden, muss darauf geachtet werden, dass alle Buchstaben und Glyphen einer Sprache unterstützt werden. Tatsächlich gibt es Sprachen, bei denen der Einsatz von Web-Fonts sogar vorzuziehen ist. Mit Diensten wie Font Squirrel, Google Fonts und Type Kit kann eine Schriftleicht zudem leicht vor dem Download getestet werden.

Für manche Schriften wie Hindi, die auf manchen Devices noch nicht vollständig unterstützt werden, kann mit einer image-basierten alternativen Version der Sprache ein Workaround eingesetzt werden. Für die Veröffentlichung kommt bei BBC News zudem mit Kaleidoscope eine eigene Technologie zum Einsatz, die einen Screenshot der Seite erstellt und ihn als Mix aus HTML und Images veröffentlicht.

6.

Das Layout sprachneutral gestalten


Jede Schriftart wird vom Browser unterschiedlich gerendert und die Schriftgröße und Position innerhalb eines Grid-basierten Layouts im Web variiert. Die Baselines werden durch den Unterschied zwischen Line-Height und Schriftgröße festgelegt, was bei Schriften mit einem größeren Font-Face und nicht auf lateinischen Buchstaben basierenden Schriften einige Probleme mit der Darstellung verursachen kann. So ist es fast unmöglich, eine konsistente vertikale Baseline über alle Seiten hinweg zu erreichen. Stattdessen sollte mit einer Kadenz von Komponentengrößen und Spacing zwischen einzelnen Komponenten gearbeitet werden, um das Layout sprachneutraler zu gestalten.

7.

Bi-direktionale Layouts mit Sass erstellen


Nicht alle Sprachen werden von links nach rechts gelesen, darum muss für multilinguale Seiten oft ein Layout erstellt werden, das sowohl von links nach rechts als auch von rechts nach links funktioniert. Tatsächlich ist es aber gar nicht so schwierig, den entsprechenden Code zu erstellen, indem zum Beispiel das Interface in Komponenten aufgeteilt wird, die leicht austauschbar sind. Mit Sass lassen sich besonders leicht solche bi-direktionalen Layouts erstellen. Wie genau man dabei vorgehen sollte und worauf es zu achten gilt, zeigt Tom Maslen mit einigen Code-Beispielen im Blogpost von BBC News.

8.

Zusätzliche Break-Points für spezielle Sprach-Issues hinzufügen


Screenshot Micro-Break-Points BBC News Russland

Micro Break-Points BBC News

Ein besonders großes Problem für multilinguale Websites ist die Wortfülle der einzelnen Sprachen. So ist zum Beispiel ein Text in Russisch oft durchschnittlich 25 % länger, als der gleiche Text in einer westeuropäischen Sprache. Dadurch benötigt er im Interface meist mehr Platz und muss trotzdem auf Devices mit kleineren Displays gut lesbar bleiben. Responsive Webdesign kommt dem bereits von Haus entgegen, weil sowieso schon Break-Points hinzugefügt werden, wenn das Content-Layout im Viewport unleserlich wird.

Mit sogenannten Micro-Break-Points, die nicht das gesamte Layout beeinflussen, können für bestimmte Sprachseiten Darstellungsprobleme auf kleineren Displays behoben werden, wie zum Beispiel Umbrüche im Site-Name-Banner (siehe Screenshot).

9.

Komponenten für bestimmte Sprachprobleme adaptierbar machen


Grundsätzlich sollte so viel vom Design und dem Code auf verschiedenen Versionen einer Website wiederverwendet werden. Allerdings gibt es Fälle, wo die Wortfülle einer Sprache dem im Weg steht, weil sie den Rahmen einer sprachneutralen Komponente sprengt. So kann zum Beispiel bei wortreichen Sprachen wie Russisch auf Introtexte in Indexseiten und Streams verzichtet werden, um die Lesbarkeit der einzelnen Komponenten nicht einzuschränken. Dafür sollten das Design und der Code einer jeden Komponente individuell konfigurierbar sein.

10.

Social-Media-Buttons lokalisieren


In fast jeder Website finden sich Links zu verschiedenen sozialen Netzwerken – doch nicht alle Netzwerke sind überall gleich verbreitet. Darum müssen die Social-Media-Buttons der verschiedenen Versionen von multilingualen Websites den entsprechenden Gegenden nach lokalisiert werden. Auch hier vereinfachen Komponenten wie Share-Komponenten und Share-Buttons die Arbeit. Dazu sagt Tom Maslen:

When rendering the social media component, instead of having the HTML within our template, we pass the URL to share and what social media buttons to render from our config into a sub template called share_component.

So lässt sich mit nur einem Break-Point, dem nativen Browser-Verhalten und ein wenig Sass-Syntax eine leicht zu konfigurierende bi-direktionale Komponente erstellen.

11.

Nicht zu viel über Ikonografie nachdenken


Icons spielen in fast jeder Website eine wichtige Rolle – und sie sind ein Bereich, über den man sich bei multilingualen Websites nicht zu viele Gedanken machen muss. Viele Icons sind universell einsetzbar, unabhängig von der Region, Sprache oder Schrift, die verwendet wird. Zwar sollten neue Icons in allen unterstützten Sprachen auf ihre Bedeutung getestet werden, allerdings müssen sie nicht extra lokalisiert werden.

12.

Das Datum lokalisieren


Während Daten, die im body-Text erscheinen, meist vom Autor eingegeben werden und so bereits in der jeweiligen Konvention der Sprache erscheinen, ist das bei automatisch vom Server oder aus Datenbanken hinzugefügten Daten nicht der Fall. Sie müssen dann für jede Sprachseite einzeln übersetzt werden, indem der UTC-Datenwert mit dem Namen des Dienstes und nötigen Vocab-Labels durch ein Template zur Datenformatierung geparst wird.

13.

Content für bestimmte Dienste lokalisieren


Manche Website-Versionen einer multilingualen Website benötigen umfangreichere Änderungen als nur die Adaption der Komponentenformatierung oder dem Sicherstellen, dass sie in einer bi-direktionalen Art und Weise funktionieren. So können einige Seiten andere Ansprüche haben oder über unterschiedlich große Content-Teams verfügen. Auch darauf kann man sich mithilfe von individuellen Komponenten einstellen.

Allerdings: sind die Ansprüche zu unterschiedlich und der Aufwand zu groß, sie zu erfüllen, ist es meist ratsam, doch mit verschiedenen Codebases zu arbeiten – sonst erschwert man sich schnell unnötigerweise die Arbeit.

Multilinguale Responsive Websites – ein hartes Stück Arbeit

Mehrere Versionen einer multilingualen Website zu erstellen und zu maintainen, klingt zunächst wie ein hartes Stück Arbeit – und das ist es auch, gibt Maslen zu:

It took a long time to get to where we are now, we had lots of issues trying to work out the best way of sitting in the same codebase together.

So sind auch die oben genannten Tipps in erster Linie ein erster Ansatzpunkt, wie sich die Umsetzung einer multilingualen Website mit Responsive Webdesign angehen und vereinfachen lässt. Natürlich ist es auch immer abhängig vom Projekt und wie viele Sprachen unterstützt werden soll, ob die Umsetzung so oder ähnlich funktioniert. In jedem Fall zeigt die Case Study von BBC News, dass es durchaus möglich ist, auch großangelegt Projekte multilingual von einer responsive Codebase aus zu gestalten.

Aufmacherbild: Thank You Word Cloud printed on colorful paper different languages von Shutterstock / Urheberrecht: ivosar

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -