Es gab mal Zeiten, in denen es eigentlich völlig egal war, wie eine Internetseite aussah – es war allein schon toll, dass ein Unternehmen überhaupt so fortschrittlich war, eine eigene Homepage einzurichten. Lange her. Heute werden viel Zeit und viel Aufwand investiert, damit Seiten möglichst viele Menschen ansprechen. Wie wir bereits in den Blogbeiträgen zum Thema „Barrierefreiheit“ oder den Layout-Tipps für Webshops verdeutlicht haben, ist es für einen anständigen Traffic wichtig, den Besuchern das Surfen auf einer Webseite so einfach wie möglich zu machen und alle Hindernisse im Vorfeld zu eliminieren – auch, wenn die Nutzer ein Smartphone oder ein Tablet verwenden. Und genau hier kommt unser heutiges Thema ins Spiel: Das responsive Webdesign.
Inhaltsverzeichnis:
Ich sehe was, was Du nicht siehst
Ein aktuelles Problem, das sich in letzter Zeit vermehrt als Bremse für ein ungetrübtes Surfvergnügen herausstellt, ist die steigende Anzahl neuer internetfähiger Geräte und die damit verbundene Vielfalt möglicher Bildschirm-Formate. Zu den diversen Displaygrößen der einzelnen Desktop Computer, die es bisher beim Layout einer Webseite zu beachten galt, kommt jetzt eine Fülle neuer Geräte wie zum Beispiel Smartphones, Tablets oder auch internetfähige Fernseher hinzu. Vor allem die mobilen Devices sind auf dem Vormarsch. Ihr Anteil beim weltweiten Surfaufkommen betrug 2012 bereits 10 % und hat sich damit im Vergleich zum Vorjahr verdoppelt.
Der unangenehme Nebeneffekt dieser Vielfalt: Auf jedem Display-Format sieht eine Webseite anders aus. Bei dem einen bleibt ein großer Leerraum, bei dem anderen verschwindet die Hälfte des Contents im Seitenaus des rechten oder unteren Bildschirmrandes. Und der Programmierer muss versuchen, es allen recht zu machen.
Die Lösung des Problems heißt „Responsive Web Design“ (deutsch: reaktionsfähige Internet-Gestaltung) und beschreibt die Programmierung von Webseiten für unterschiedliche Ausgabegeräte. Der Begriff wurde im Jahr 2010 von Ethan Marcotte geprägt und er meint die automatische Anpassung von Internetseiten an das Format des jeweiligen Ausgabedisplays. Das Design reagiert auf die vielfältigen Anforderungen der verschiedenen Devices.
Liquid vs. Responsive
In Grundzügen kennt man das Problem schon lange. Denn auch ohne die mobilen Surfhilfen gibt es im Desktopbereich die unterschiedlichsten Bildschirmformate, denen die Programmierer das Layout der jeweiligen Seite anpassen mussten. Sie bedienten sich dabei des Liquid Designs, machten das Format also flüssig. Anstatt fester Maße erhielten die einzelnen Elemente wie Bilder oder Textkästen prozentuale Größen. Damit kann man die Unterschiede zwischen verschiedenen Bildschirmen zwischen 13 und 27 Zoll effektiv ausgleichen. Das genügte auch, weil das Grundprinzip des Querformates nicht durchbrochen wurde.
Das Responsive Web Design wurde nötig, weil zum einen die mobilen Displays bis auf Größen von lediglich 3,5 Zoll schrumpften und weil die Bildschirme um 90 Grad gedreht werden konnten und sich dadurch das Grundformat komplett änderte. Responsive Design begnügt sich deshalb nicht nur mit der Skalierung der Webinhalte, sondern kann das Layout der Seiten neu strukturieren.
Um das zu veranschaulichen, führe folgendes Experiment durch: Klicke mit Deiner Maus auf die untere rechte Ecke dieser Seite und schiebe sie in der Breite zusammen. Ungefähr bei der Hälfte verändert sich das Layout der Seite sprungartig. Ohne die Schrift- oder Bildgrößen zu verringern, passt sich das Design dem neuen Format an. Ein weiterer Sprung findet bei der Viertelung der Seite statt. Welchem Prinzip dieser Umbau folgt, erkläre ich weiter unten.
Technische Grundlagen
Die Voraussetzung für ein Responsive Web Design ist die saubere Trennung von Inhalt und Struktur, beziehungsweise von HTML und CSS. Bei der Programmierung steht HTML für den Inhalt und CSS für die Struktur der Webseite.
Wenn Du diese Grundregel strikt befolgst, ist es äußerst unaufwendig, mit wenigen CSS Befehlen das Aussehen eines Online-Auftrittes zu verändern, ohne den Inhalt antasten zu müssen. Sehr anschauliche Beispiele dafür liefert die Projekt-Seite www.csszengarden.com. Auf ihr kannst Du unter der Rubrik „select a design“ verschiedene gestalterische Umsetzungen ein und desselben HTML Inhalts finden.
Für ein funktionierendes Responsive Web Design muss Dein Internet-Auftritt wissen, in welcher Umgebung er gerade geöffnet wird, und wie er dort am besten auszusehen hat. Mit Hilfe sogenannter Media Queries, die es seit CSS3 gibt, fragt die Seite das Gerät, auf dem sie betrachtet werden soll, zunächst nach dem verwendeten Bildschirmformat. Je nach Antwort wird das Layout der Seite so modifiziert, dass es ideal zum Ausgabegerät passt. Das Tutorial von Nettuts+ zeigt, wie einfach das sein kann.
Flexibilität
Bei der Modifikation der Seite kommt es folglich nicht darauf an, dass je nach Bildschirmgröße alle Inhalte lediglich geschrumpft werden. Vielmehr ist es wichtig, auf die Besonderheiten des Devices wie Hoch- oder Querformat zu reagieren, die wichtigsten Inhalte immer im Vordergrund zu behalten, den Content hierarchisch zu strukturieren und sich zur Not auch von unwichtigen Dekorationen zu verabschieden, wenn die Bildschirmgröße dafür keinen Platz mehr bietet.
Was das genau bedeutet, will ich einmal an der checkdomain Blogseite erklären. Wir betrachten die Veränderungen, die wir bei dem kleinen Experiment von vorhin gemacht haben, einmal im Detail und schauen, wie die Seite auf unterschiedliche Bildschirme reagiert.
Desktop
Auf dem Desktop-Monitor gibt es am meisten Platz. Alle Inhalte wie Überschrift, Bild, Text, Infokästen können übersichtlich auf dem Bildschirm verteilt werden. Was aber, wenn der Besucher lieber mit einem Tablet-Computer im Internet surft?
Der Tablet-Computer
Bei der Adaption auf einen Tablet-Bildschirm mit horizontaler Ausrichtung entstehen noch keine Darstellungsprobleme der Seite. Es verschwindet lediglich der graue Rand links und rechts.
Wird das Tablet jedoch gedreht, muss die Seite anders aufgeteilt werden. Um die Schrift- und Bildgrößen konstant halten zu können, und trotzdem in das schmalere Hochformat zu passen, werden zwei kleine aber effektive Änderungen vorgenommen. Die Kästen für die einzelnen Artikel werden schmaler und höher und die Navigationsleiste schrumpft, indem man auf das Sucheingabefeld verzichtet.
Das Smartphone
Richtig schwierig wird es bei der Umsetzung für das Smartphone, speziell im Hochformat. Würde man hierfür die Tablet-Variante lediglich verkleinern, wäre die Schrift viel zu klein, um sie noch augenfreundlich wahrnehmen zu können. Also muss ein komplett neues Layout her.
Die für das Smartphone untaugliche Menüleiste verschwindet gänzlich und wird durch eine zeilenweise Aufzählung ersetzt. Die Twitter-, Facebook-, Google+-Links ziehen an das untere Ende der Seite um. Unter der Navigation reihen sich jetzt die einzelnen Blogbeiträge auf und die Teaserkästen haben für dieses Layout in ein Hochformat gewechselt.
Darunter folgen alle weiteren ergänzenden Inhaltselemente wie das Youtube-Video, die Autoren-Portraits und die Social-Media-Links. Alles passend für das Smartphone-Display aufbereitet und in optimaler Größe.
Vieles ist möglich – und alles erlaubt
Dies ist selbstverständlich nur eine mögliche Variante für die Bildschirmoptimierung und bezieht sich auf diesen speziellen Content des checkdomain Blogs. Wie Du Deine Seite für die mobilen Computer fit machst, und welche Inhalte dabei welche Gewichtung erhalten, hängt ganz von Deinem Content und Deinem Geschmack ab.
Die Vielfalt der Möglichkeiten, kannst Du im Netz unter www.mediaqueri.es in einer Reihe interessanter Beispiele entdecken. Die dort aufgeführten Seiten dienen sicher auch als Anregungen für eigene Ideen.
