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

Geschichte und Begriffe

1.1. Woher kommt „Responsive Webdesign“?

Anstoß zum Thema „Responsive Webdesign“ gab der amerikanische Webdesigner und Webdeveloper Ethan Marcotte, der im Mai 2010 den Artikel „Responsive Web Design“ bei „A List Apart“ veröffentlichte.

Der Artikel fasst in knapper Form viele wichtige Dinge zum Thema zusammen. Beginnend mit der Feststellung, dass im Webdesign häufig die gleiche Kontrolle wie im Printdesign gewünscht wird, beschreibt Marcotte die sich ändernde Web-Landschaft mit mehr Browsern (Geräten) und unterschiedlichen Eingabegeräten als je zuvor. Neben Maus und Tastatur gäbe es nun auch etwa Handytastatur („T9“-System), Touch-Interface und Controller von Spielkonsolen. Firmen fragten bereits nach eigenen „iPhone-Websites“, die speziell für das Gerät optimiert wären.

Zur steigenden Gerätevielfalt stellt Marcotte dabei die anschließende Frage:

But what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own bespoke experience? At some point, this starts to feel like a zero sum game. But how can we—and our designs—adapt?

Als praktisches Beispiel wird im Artikel ein flexibles Layout vorgestellt. Flexible Layouts gibt es – wie in diesem Kapitel noch gezeigt werden wird – bereits sehr lange. Marcotte demonstriert, dass „normale“ flexible Layouts vor allem Schwächen im Grenzbereich haben, also bei sehr kleinen (kleine Breite) und sehr hohen Auflösungen (insb. Widescreen-Displays). Es folgt ein Ausflug in die Architektur, wo bei „Responsive Architecture“ der physische Raum auf Personen reagiert und sich automatisch anpasst, etwa durch flexible Strukturen, bei Licht oder Temperatur. Um nicht das Design an eine immer größer werdende Geräteanzahl anpassen zu müssen, stellt Marcotte mit den in CSS3 eingeführten Media Queries eine allgemeinere Lösung vor. Mit Media Queries lassen sich Umbruchpunkte definieren. So können Anpassungen in Grenzbereichen vorgenommen werden, überschreitet oder unterschreitet die Auflösung eine bestimmte Größe.

Von Marcotte stammt auch die Definition, welche drei Bestandteile (Zutaten) Responsive Webdesign ausmachen:

Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.

1.2. „Papierdenken“

In der Einleitung wurde bereits festgestellt, dass Autoren häufig den Wunsch nach (vollständiger) Kontrolle über das Layout hegen. Peter Müller, IT-Dozent und Autor eines Grundlagenbuches zu Cascading Style Sheets (CSS) trifft in diesem Zusammenhang zwei wichtige Feststellungen:
1. Der Autor hat keine vollständige Kontrolle über deren Aussehen.
2. Nach der Fertigstellung sieht eine Website bei jedem Benutzer anders aus.

Im Printbereich ist das anders:

Nach der Fertigstellung wird eine Papierseite unverändert vervielfältigt und sieht – abgesehen von Kaffeeflecken, Vergilbungen und anderen marginalen Schwankungen – bei jedem Betrachter gleich aus.

Ähnlich John Allsopp, ebenfalls sehr häufig zitiert im Zusammenhang mit Responsive Webdesign:

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must "accept the ebb and flow of things".

Doch was unterscheidet eine Webseite¹In dieser Arbeit wird unter Webseite eine einzelne Seite verstanden, ein einzelnes HTML-Dokument. Website bezeichnet dagegen die gesamte Webpräsenz, bestehend aus einzelnen Webseiten. grundlegend von einer Seite aus Papier? Webseiten bestehen aus Quellcode (HTML), die vom Webbrowser des Besuchers erst interpretiert und dargestellt werden müssen. Browser wuchsen im Laufe der Jahre um Funktionalität, ebenso wie sich Standards im Web veränderten. Dabei lieferten nicht alle immer eine standardkonforme Darstellung und auch Browserbugs (Fehler in der Implementierung), die Webdesigner viel Zeit und Mühe kosten, machen die Arbeit nicht gerade leichter. Daneben gibt es je nach System unterschiedliche Einstellungen und installierte Schriftarten. Wurde die Schriftart zuvor nicht installiert, kann sie nicht dargestellt werden. Pech für den Webdesigner, der das im Sinn hatte. Der Benutzer kann über bestimmte Browsereinstellungen²Dialogfeld „Barrierefreiheit“ im Internet Explorer, ähnliche Möglichkeiten existieren auch in anderen Webbrowsern. Farben, Schriftarten und Schriftgrößen deaktivieren (sodass Standards zum Einsatz kommen) oder gar ein eigenes Stylesheet (CSS) vorgeben

Noch mehr Möglichkeiten hat der Benutzer über Browser-Add-ons. Ein versierter Benutzer kann über Entwicklertools – etwa über die Add-ons „Web Developer“³ und „Firebug“⁴ - auch einzelne CSS-Dateien deaktivieren, CSS-Werte beliebig überschreiben, Formulargrenzen aufheben, Formularfelder umwandeln und weitere (für sich selbst temporäre) Änderungen vornehmen, mit denen der Autor der Webseite wahrscheinlich nicht gerechnet hat. Auf den Rechner (sei es ein Desktop-PC, Notebook, Tablet PC, Smartphone oder sonstiges Gerät) des Besuchers hat der Autor der Webseite keinen Einfluss, somit auch nicht auf die Darstellung.

Um es noch einmal mit Peter Müllers Worten zusammen zu fassen:

Papierdenken + Webseiten = Enttäuschte Erwartungen.

1.3. Geschichtliche Entwicklung des Webdesigns

Die letzten ca. 20 Jahre Webentwicklung lassen sich in mehrere Phasen bzw. charakteristische Gestaltungsweisen unterteilen. Anfang der 90er-Jahre dominierten wissenschaftliche Websites, deren Inhalt i.d.R. wichtiger war als die Gestaltung. Es folgten mit dem Browser „Mosaic“ die ersten Websites, die auch Grafiken enthalten konnten. Mitte der 90er-Jahre erschien die erste Version des „Netscape Navigator“, der zunehmend mehr Gestaltungsmöglichkeiten – wie etwa das neue Element <font> zur Schriftgestaltung – bot.

Typisch für die zweite Hälfte der 90er-Jahre war die Positionierung von Elementen mit unsichtbaren Tabellen (= tabellenbasierte Layouts mit dem Element <table>). Die Methode wurde auch durch WYSIWYG⁵WYSIWYG = „what you see is what you get“; dabei handelt es sich um Programme (und ein Prinzip), wo – ähnlich einer Textverarbeitung – das bearbeitete Dokument so aussieht wie das spätere Endergebnis (also quasi eine Sofort-Vorschau).-Editoren wie Adobe Dreamweaver, Microsoft Frontpage oder NetObjects Fusion voran getrieben, die zum Teil ein pixelgenaues Positionieren erlaubten. Um die Jahrtausendwende wurde die CSS-Unterstützung der Browser besser und es setzte sich mehr und mehr eine Trennung von Inhalt und Gestaltung durch. Websites wurden mit HTML – semantisch – sinnvoll strukturiert und mit CSS gestaltet.

Webseiten werden dabei typischerweise mit <div>-Elementen strukturiert und mit CSS formatiert (= DIV-Layouts). Bei <div> handelt es sich um allgemeines Element zur Strukturierung ohne nähere semantische Bedeutung.

In CSS gibt es mehrere Möglichkeiten, DIV-Elemente zu positionieren, insb. absolut positioniert⁶Eine absolute Positionierung mit position: absolute; erfolgt – meist in Pixel – relativ zu einem umgebenden Element. Ist keines vorhanden, bezieht sich die Angabe auf <body>. So kann z.B. bestimmt werden, dass ein <div> mit fester Breite 300px vom oberen und 200px vom linken Rand – sinnvollerweise in einem freien Bereich – positioniert werden soll (vgl. SELFHTML). (position: absolute) und float-basiert⁷Elemente umfließen ein mit dem Attribut float definiertes (anderes) Element automatisch - damit lässt sich der zur Verfügung stehende Platz flexibel ausnutzen (vgl. SELFHTML)., wobei es bei letzteren meist feste und flexible Layouts gibt.

Responsive Webdesign benötigt ein flexibles Layout mit relativen Größenangaben (%, em, rem), worauf in Abschnitt 3.1 noch genauer eingegangen wird. Daneben bietet HTML5 mit zahlreichen neuen Elementen (z.B. <section>, <nav>, <article>, <aside>, <header> und <footer>) die Möglichkeit, den Inhalt sinnvoller und passender zu strukturieren (siehe Abschnitt 2.3).

Alles in allem kann Responsive Webdesign als Weiterentwicklung der DIV-basierten Layouts die nächste „Evolutionsstufe“ darstellen:

Responsive Webdesign ist also kein Trend, sondern ein evolutionärer Schritt, der das Web weiter voranbringt und unsere Inhalte leichter auf verschiedenen Geräten erfassbar macht. Wir sollten die Zeit der fixen Dimensionen eher als eine fehlgeleitete Phase sehen, aus der wir gelernt haben, wie es auf Dauer nicht geht.

1.4. Responsive Webdesign vs. Adaptive Webdesign

Gelegentlich wird zwischen adaptiven (anpassungsfähigen, „adaptive“) und reaktionsfähigen („responsive“) Layouts unterschieden.

Diese Arbeit folgt – aus Lesefreundlichkeit – dabei der in ähnlichen Webdesign-Artikeln gängigen Definition:

a) Bei einem anpassungsfähigen Layout („Adaptive Layout“) werden an vordefinierten Größen (bestimmten Umbruchpunkten) andere Layouts ausgegeben. Beispiel: http://foodsense.is/

b) Reaktionsfähige Layouts („Responsive Layout“) sind eine spezielle – weiterentwickelte – Unterform anpassungsfähiger Layouts. Diese enthalten zusätzlich zu Umbruchpunkten auch ein flexibles Layout („Fluid Layout“ bzw. flexibles Grid). Ein reaktionsfähiges Layout reagiert stufenlos auf Größenänderungen (des Fensters) – und nicht nur an bestimmten Punkten. Beispiel: http://www.bostonglobe.com/

1.5. Der Inhalt steht im Mittelpunkt – der Umgang mit Inhalten

Im Zusammenhang mit Responsive Webdesign spielt auch das Thema Inhalte und der Umgang mit diesen eine große Rolle. Mobile Geräte haben oft eine langsamere Internetverbindung mit geringerem Datendurchsatz und höheren Latenzzeiten – somit auch längere Ladezeiten bei einer Webseite. Dazu kommt ein – oft – wesentliches kleineres Display als vom Desktop-Bereich gewohnt. Das zwingt Webautoren dazu, sich mit u.a. folgenden Fragen näher zu beschäftigen:
a) In welcher Situation befindet sich der Besucher gerade? In welchem Kontext (Nutzungskontext) wird die Webseite aufgerufen?
b) Was erwartet der Besucher/Leser von der Webseite, d.h. welche Inhalte und Funktionen sind besonders wichtig (Erwartungen)?

Nur wer seine Zielgruppe kennt und genau weiß, was die eigene Website erreichen soll, kann im mobilen Kontext die richtigen Entscheidungen treffen.

In manchen Fällen erscheint die mobile Variante einer Website aufgeräumter und konzentriert sich stärker auf den Inhalt und wesentliche Funktionen. Vergleich beispielsweise (gilt im Dezember 2013): Air Berlin am Desktop, Air Berlin - mobile Website.

Die Leute sind immer weniger bereit, überfüllte Websites einfach so hinzunehmen. Wenn wir Webdesigner ihnen das nicht bieten können, werden sie Mittel und Wege finden, sich die Inhalte selbst anwenderfreundlich aufzubereiten.

Zillgens meint damit Dienste wie „Readability“, die relevante Textpassagen aus Websites extrahieren und auf das Wesentliche reduziert anzeigen. Readability ist bereits in mehreren Anwendungen integriert und auch als Firefox-Addon verfügbar.