Responsive-Webdesign-Tutorial (Vorwort, Einleitung, Kapitel 1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

Einleitung

Ausgangssituation und Motivation

Es ist die gängige Praxis der Grafiker und Webdesigner, eine Website „statisch“ in einem Bildbearbeitungsprogramm (meist Photoshop) in einer fixen Größe zu entwerfen, die dann so exakt wie möglich in HTML und CSS übertragen wird. Das dient nicht nur der Bequemlichkeit, sondern ist auch vorteilhaft, um die Vorstellungen des Kunden besser erfassen zu können. Um sehr viele Benutzer anzusprechen (es soll möglichst überall gleich aussehen) und eine konsistente Darstellung zu gewährleisten, beschränkt man sich meist auf eine feste Breite von 960 Pixel, abgeleitet von der klassischen Displaygröße mit 1024 Pixel in der Breite und korrigiert um Navigationsleiste des Browsers und Toleranz.

Dieser Gewohnheit der letzten Jahre steht eine immer größere Vielzahl an internetfähigen Endgeräten mit stark unterschiedlichen Displaygrößen gegenüber. Neben kleinen und großen Desktop-Monitoren und Notebooks werden immer häufiger Tablets, Netbooks, Feature-Phones, Fernseher und Smartphones eingesetzt. Eine feste Breite anzunehmen, wird somit zunehmend unzuverlässiger.

Gleichzeitig wird die Kritik an dieser Vorgehensweise immer lauter, die als „Papierdenken“ bezeichnet wird. Websites werden dabei ähnlich einem Buch (oder Katalog) wie ein Blatt Papier gestaltet. Das Endergebnis soll dabei bei allen Benutzern (bzw. Lesern) gleich aussehen. Diese Erwartungshaltung der vollständigen Kontrolle lässt sich im Gegensatz zu Druckwerken im Web allerdings nicht erfüllen. Verhindert wird das durch verschiedene Bildschirmauflösungen, Software (Webbrowser) und nicht zuletzt auch durch Benutzereinstellungen (z.B. Schriftgrößen, Browser- und Benutzerstylesheets).

Dem gegenüber haben Websites die Möglichkeit, sich automatisch an die verfügbare Größe anzupassen. In diesem Zusammenhang findet sich des öfteren folgender Vergleich, um den Unterschied zwischen Printmedien und dem Web zu erklären:

Stell dir vor, du kaufst eine Zeitung. Beim Lesen in der U-Bahn ist es eng, da hat sie A5-Format. Auf dem Fußweg zur Arbeit lässt du dir einen Artikel vom Walkman vorlesen. Im Büro liest du sie auf dem Schreibtisch, da hat sie A2. Abends gibst du sie deiner Oma zu lesen und machst dafür die Schrift größer. Und das alles mit ein und derselben Zeitung! Geht leider nicht mit Papier; mit einer Website geht so etwas.

Die maximale Kontrolle über das Design wird aufgegeben und der Inhalt in den Vordergrund gestellt. Neben der Flexibilität (Anpassung an die Größe; Responsive Webdesign) erfüllt mediengerechtes Webdesign auch Anforderungen zu Standardkonformität (Webstandards), Barrierefreiheit („Accessibility“ / Zugänglichkeit) und Suchmaschinenoptimierung.

Dabei bestand von Anfang an die Möglichkeit, mit CSS flexible Layouts zu gestalten, indem Breiten-, Größen und Höhenangaben in relativen Maßen (%, em) angegeben wurden. Um maximale Kontrolle zu behalten (und Aufwand zu vermeiden), wurde dies allerdings nur selten genutzt. Zudem fehlte die Möglichkeit, das Layout in Grenzbereichen (= besonders groß oder sehr klein) zu kontrollieren. Mit den in CSS3 eingeführten Media Queries wurde es möglich, dass Layouts nicht nur relative Größen enthalten, sondern sich auch an Umbruchpunkten (meist bestimmten Breiten) ändern können. Das vermeidet negative Extremfälle wie schlechte Lesbarkeit (lange Textzeilen, Schriftgrößen). Zudem können Elemente je nach Größe anders positioniert oder ganz ausgeblendet werden.

Responsive Webdesign kann nicht nur als Trend sondern sogar als evolutionärer Schritt verstanden werden, als Rückbesinnung auf die Flexibilität, die HTML-Dokumente seit Anfang an bieten. Diese „Lernphase“ kann mit dem Übergang von Table- zu DIV-Layouts verglichen werden.

Nach Meinung des Autors dieser Arbeit ist der Zeitpunkt genau richtig, sich jetzt mit diesem Thema intensiver zu befassen. Das Thema ist hochaktuell und eines der Trend-Themen für 2013, allerdings auch nicht mehr „brandneu“ (erste Artikel gab es bereits 2010; siehe Kapitel 1) – und damit genau richtig, um es bei zunehmender Browser-Unterstützung jetzt einzusetzen.

Problemstellung

Der Trend zu mehr mobilen Geräten lässt sich auch statistisch zeigen. Große österreichische Websites – die bei der Österreichischen Webanalyse (ÖWA) erfasst sind – wurden im März 2013 bereits zu 15% von mobilen Endgeräten besucht (genauer: Systeme mit einem mobilen Betriebssystem wie Android oder iOS). Ein Jahr zuvor, im März 2012, waren es nur 6,8%.

Die Gerätevielfalt spiegelt sich auch in den unterschiedlichen Bildschirmauflösungen wider. So zählte eine Meta-Auswertung mehrerer Statistik-Dienste von Oktober 2012 bereits über 190 verschiedene Bildschirmauflösungen.

Im Rahmen dieser Arbeit soll geklärt werden, wie Unternehmen, Webdesigner und Webentwickler am besten mit dieser Situation umgehen sollten. Neben der Lösung „Responsive Webdesign“ gibt es noch den Weg, serverseitig zu entscheiden, was an den Benutzer ausgeliefert wird. Einer Browserweiche wertet dabei den „User-Agent“-Header des HTTP-Requests aus – der auf den Webbrowser hinweist – und liefert je nach Programmierung bzw. Wunsch der Website-Betreiber eine angepasste Version zurück. Typischerweise existieren eigene „abgespeckte“ Versionen für mobile Geräte, etwa http://orf.at/m/ für das mobile News-Portal von ORF.at.

Ziel der Arbeit ist zu klären, bei welchen Kriterien (bzw. Schwerpunkten) Responsive Webdesign anderen Lösungen vorzuziehen ist und welche Vor- und Nachteile die jeweiligen Lösungen haben.

Christoph Zillgens bringt in seinem Buch zu Responsive Webdesign sogar den Begriff „Nachhaltigkeit“ ins Spiel, der für viele Unternehmen zur Unternehmenskultur gehört. Flexibel gestaltete (reaktionsfähige) Websites sind auf eine Vielzahl aktueller und noch kommender Geräte, Bildschirme und Nutzerszenarien ausgerichtet. Er betont auch, dass mobile Geräte (z.B. Smartphone, Tablet PC) für viele Benutzer nicht mehr nur Zweitgerät sind, sondern erste Wahl für den Internetzugang darstellen.

In dieser Arbeit werden sowohl technische als auch wirtschaftliche Aspekte in der Analyse betrachtet.

Aufbau der Arbeit

Die Methodik dieser Arbeit gliedert sich in zwei Teile:

a) Literaturrecherche und Technologie-Review:

Der erste Teil der Arbeit besteht aus Literaturrecherche und Technologie-Review zu den Themen HTML5 (insb. semantisch wichtige neue Elemente) und CSS3 (v.a. Media Queries). Außerdem werden Theorien zur praktischen Umsetzung im Rahmen einer reaktionsfähigen Website („Responsive Webdesign“) behandelt.

Die Arbeit behandelt die Schwächen einer in fixer Größe bzw. fixen Größenangaben (Pixel / „px“) erstellten Website, stellt dem ein flexibles Layout mit relativen Größen (% / „em“ / „rem“) gegenüber und zeigt die Neuerungen von CSS3 rund um Media Queries. Denn: flexible Layouts sind bereits seit vielen Jahren möglich und für sich allein nichts Neues.

Dieser Teil wird insbesondere in Kapitel 1 bis 4 behandelt. Wo es didaktisch passender ist, folgen Ergänzungen zur Theorie auch in Kapitel 5 bis 8 bei der praktischen Erstellung der Unternehmenswebsite.

b) Praktischer Teil:

Kapitel 5 bis 8 umfasst den praktischen Teil der Arbeit. Es werden drei Website-Prototypen erstellt, die anschließend anhand von Kriterien und Code-Inspektion evaluiert werden.

Der erste Prototyp der beispielhaften Unternehmens-Website wird in HTML 4.01 und CSS 2.1 mit einem fixen Layout erstellt (Angaben in px). Davon wird eine zusätzliche Subversion für mobile Geräte erstellt, die über eine PHP-Browserweiche bei passendem „User Agent“-String zurückgeliefert wird (= zweiter Prototyp; ähnlich der Mobile-Variante von ORF.at).

Der dritte Prototyp wird als reaktionsfähige Website in HTML5 und CSS3 mit einem flexiblen Layout und flexiblen Bildern erstellt. Eine spezielle mobile Version entfällt – ein Layout kommt mit allen Bildschirmgrößen zurecht (bzw. umgekehrt)

Die Kapitel 5 bis 8 („Erstellung einer beispielhaften Unternehmenswebsite“) beschreiben dabei die Vorgehensweise bei der Entwicklung der Prototypen, erläutern den Code und die dahinter stehenden Überlegungen.

In Kapitel 9 werden die Vor- und Nachteile der Lösungsmöglichkeiten bzw. unterschiedlichen Versionen behandelt. Kapitel 10 schließt mit Handlungsempfehlungen bzw. der Eignung der jeweiligen Ansätze.

In den Schlussfolgerungen in Kapitel 10 werden die Vorgehensweise und die wichtigsten Erkenntnisse der Arbeit noch einmal zusammengefasst.