Responsive Design

'Form follows function' - beim Responsive Webdesign folgen Funktion, Design und Inhalt der jeweiligen Bildschirmauflösung des verwendeten Desktop, Tablet oder Smartphone. Der Begriff Responsive Webdesign bedeutet im übertragenen Sinne "reagierendes Webdesign". Inhalts- und Navigationselemente sowie auch der strukturelle Aufbau einer Website passen sich der Bildschirmauflösung des mobilen Endgeräts an – es reagiert auf und korrespondiert mit der Auflösung und Viewport des Endgeräts.

Viewport
Viewport bezeichnet den sichtbaren Bereich innerhalb eines Browser-Fensters. Also der Platz, der für die Darstellung eines Webprojekts zur Verfügung steht und genutzt werden kann. Begrenzt wird der Viewport durch den Fold, vergleichbar dem Bruch einer Zeitung, denn wenn Informationen angezeigt werden sollen, muss erst eine Interaktion durchgeführt werden – sei es mit „Scrollen“ oder „Swipen“ – dann befindet man sich unterhalb dieses „Bruchs/Folds“. Bei Viewports kann zwischen Portrait Mode / Hochformat und Landscape Mode / Querformat unterschieden werden.


Liquid/Fluid Design

Damit die Website beweglich wird, setzt man ein flexibles CSS-Raster ein. Hier sind die Breiten der einzelnen Layout-Spalten oder der ganzen Webseite nicht mehr in absoluten Werten / Massangaben (z.B. Pixel) definiert sondern in relativen Werten / Massangaben (%, em). Aber ein liquides Layout funktioniert irgendwann nicht mehr, da die Spalten zu eng und die Texte zu klein werden.

Beispiel fixe Breite / absolute Werte: body { width: 1000px; }

Beispiel flexible Breite / relative Werte: body { width: 90%; }

>> Massangaben


Responsive Design / Media Query

Jetzt kommen die Media Queries zum Einsatz: Mit diesen Abfragen überprüft man die Bildschirm-Größe und legt fest, wann sich das gesamte Layout ändern soll, indem es zum Beispiel von einem mehrspaltigen Aufbau auf eine oder zwei Spalten wechselt. Responsive Web-Design ist die Summe aus flexiblen Rastern, flexiblen Bildern und Media-Dateien, umgesetzt mit Media-Queries.

1. Variante: Einbindung Media Query (separates Stylesheet plus Atttribute)
Es wird ein Standard-CSS-Stylesheet definiert. Als nächster Schritt werden die Media Queries eingesetzt, um die weiteren Bildschirmformate anzusprechen und diese mit CSS entsprechend anzupassen. Einerseits kann dies über ein separat abgespeichertes Stylesheet (z.B. handy.css) geschehen. Dann wird dieses Stylesheet mit einem Attribut im Head-Bereich des HTML-Dokuments eingebunden, wobei die folgenden Media-Attribute dazu dienen, das jeweilige Ausgabemedium zu bestimmen:
all = alle Medien
handheld = Handys oder Tablets
projection = Projektoren / Beamer
screen = Bildschirme
tv = Television

Einbindung anhand 'media screen'-Attribut (das style.css wird nur geladen, wenn es sich beim Ausgabemedium um einen Bildschirm/Screen handelt):

<link rel="stylesheet" href="handy.css" media="screen" />

Es ist auch möglich erweiterte Angaben zu machen (Bildschirm mit max. 700px Breite, z.B. Handy):

<link rel="stylesheet" href="handy.css" media="screen and ( max-width: 700px)" />

Da es zwei unterschiedliche Ansichtsformate zur Darstellung des Inhaltes gibt, können mit dem Attribut 'orientation' die Merkmale height und width miteinander verglichen werden. Wenn height grösser als width ist, besitzt die Darstellung den Wert portrait, im anderen Fall den Wert landscape.

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

2. Variante: Einbindung Media Query (@media)
Die zweite Variante ist, die Media Queries direkt in das Standard-Stylesheet einzufügen. Dazu wird die @media-Regel genutzt. Innerhalb der style.css-Datei wird die Media Query eingebunden (Beispiel für Bildschirme mit Breite von max. 700px). Innerhalb der Media Query werden die entsprechenden Style-Anpassungen notiert:

<link rel="stylesheet" href="style.css">
@media screen (max-width: 700px) { body { width: 600px; } }


Regeln innerhalb Stylesheet
Um bestimmte Regeln innerhalb eines Stylesheet (oder style-Elements) nur auf bestimmte Medien anzuwenden, kann auch wieder auf die Regel @media zurückgegriffen werden. Nach der @media-Angabe werden innerhalb der geschweiften Klammern { .. } alle Formatdefinitionen notiert und sind dann nur für die angegebenen Medien gültig.

Der Header, die Seitenspalte und der Footer werden ausgeblendet, wenn die Webseite ausgedruckt wird:

@media print { header, sidebar, footer { display: none;} }


Grid / Raster-System

Ein Raster-System/Grid ist ein spaltenbasiertes Raster (meist 12 und/oder 16) mit einer je nach System unterschiedlichen Anzahl an Spalten. An diesem Raster wird das Layout ausgerichtet und so ergibt sich eine harmonische und aufgeräumte Gestaltung für unterschiedliche Ausgabemedien.

Die Gestaltungsrastern werden jeweils an Breakpoints ausgerichtet und verändern so die Anzahl an Rasterspalten. Es gibt beispielsweise eine 1-spaltige Ansicht auf kleinen Displays, eine 2-spaltige Ansicht in mittleren Displaygrößen und eine 3-spaltige Desktop-Darstellung. Die Breiten sind jeweils flexibel und basieren auf Prozentwerten. Zusätzlich werden Elemente in Zeilen zusammengefasst. Zeilen haben den Vorteil, dass Elemente im Raster leichter horizontal verschoben werden können.


Breakpoints
Breakpoints definieren die Stellen, an denen sich das Layout einer Website ändert, wenn die Inhalte auf Geräten mit unterschiedlich grossen Displays dargestellt werden. Das Layout einer Website im Responsive Design passt sich dann automatisch der Grösse des Displays an.

Um festzulegen, wann man die Spalten und Elemente im Layout neu anordnen muss, orientiert man sich an den üblichen Bildschirmgrössen (Smartphone, Tablet oder Computer). Eine der ersten Entscheidungen, die man treffen sollte bevor man eine Website umsetzt, ist die Anzahl und Position der Breakpoints. Es gibt hier keine perfekte Auswahl, die für jede Website optimal ist. Die Breakpoints müssen aufgrund der Projektziele, der Zielgruppe, des Nutzungsverhaltens, des Inhalts und des Designs gewählt werden.

Beispiele einiger Grösseneinbindung mit @media:

/* Kann maximal 1280px darstellen. */ @media only screen and (max-width : 1280px) { /* CSS hier */ } /* Kann maximal 768px darstellen. */ @media only screen and (max-width : 768px) { /* CSS hier */ } /* Kann maximal 320px darstellen. */ @media only screen and (max-width : 320px) { /* CSS hier */ }


Content (Mobil) first

Für den Einstieg in das Konzept einer Website ist es wichtig, Inhalte zu kategorisieren und nach ihrer Bedeutung für die Website zu sortieren sowie zu gruppieren. Welches Element muss im Zweifelsfall dem Wichtigeren weichen? Was steht an oberster Stelle, was rutscht weiter nach unten, was verschwindet womöglich ganz? Hier kommt wieder der Mobile First / Content First-Ansatz ins Spiel. Denn hier ist die Website auf ihre absolute Basis reduziert, hier werden nur die wichtigsten Elemente angezeigt und es wird definiert, was bleibt übrig und was auf keinen Fall weglassen werden kann. Dann wird mit der zunehmenden Bildschirmgröße der Webauftritt Stück für Stück aufgewertet (Progressive Enhancement). Zweitrangige Inhalte könnten auf der Desktop-Seite direkt integriert werden, auf der mobilen Seite werden sie erst über einen Link erreichbar. Es kommen immer wieder neue Geräte auf den Markt, mit noch besseren Auflösungen, so wird vermehrt auf den Inhalt einer Webseite, bzw. die einzelnen Elemente, fokussiert.


Angepasstes Design/Module für Mobile Geräte
Desktop- und Mobilversion können sich in folgenden Punkten unterscheiden:

  • Navigation - während auf der Desktop-Variante oft die gesamte Navigation ersichtlich ist, wird bei der mobilen Version oft eine platzsparende aufklappbare Navigation eingesetzt
  • Bilder - Bilder sind bei der mobilen Variante kleiner als bei der Desktop-Variante

Grösse/Auflösung von Ausgabemedien

Mit dem Begriff Bildschirmauflösung werden die Dichte der Bildpunkte (dpi=dot per Inch / bzw. ppi=pixel per inch) bezeichnet. Die Bildpunkte sind auf Monitoren, Smartphones und Tablets als ein Bild wieder zu erkennen. Vor einigen Jahren war die Bildschärfe um einiges schlechter war als heute (Standardauflösung von 72 ppi). Inzwischen verfügen insbesondere die kleineren Geräte wie Smartphone und Tablet über einen hochauflösenden Bildschirm bis zu 300 ppi.

Vorherige Seite: Multimedia Nächste Seite: Tipps