© prettyboy80/Shutterstock.com
Responsive Webdesign für Anwendungen

Einer für alle, alle für einen


Responsive Webdesign ist eines der meistgenutzten Buzzwords in der Webentwicklung. Lesen Sie in diesem Artikel, was Responsive Webdesign ist, was es nicht ist und wie Sie webbasierte Clientanwendungen dank des Responsive-Webdesign-Paradigmas einfach auf allen Plattformen und Devices bereitstellen können.

Video: Cross-Plattform-Mobile-Apps mit Ionic und AngularJS

Bei Responsive Webdesign oder kurz RWD handelt es sich um einen Sammelbegriff für diverse Gestaltungstechniken, der von Ethan Marcotte in seinem Artikel „Responsive Web Design“ [1] geschaffen wurde. In der Praxis wird ein Responsive Layout (RL) dazu verwendet, um die Ziele des RWD zu erreichen. Beim RWD wird eine Webseite oder eine Web-App für die Darstellung auf beliebigen End- und Anzeigegeräten entwickelt. Die Webseiten oder Web-Apps reagieren hierbei dynamisch auf äußere Gegebenheiten (insbesondere auf die Breite des Viewports, siehe Kasten: „Viewports“) und präsentieren dem Benutzer die Daten in einer für die aktuelle Auflösung optimierten Form. Sämtliche Browser respektieren dabei auch das devicePixelRatio (siehe Kasten: „DevicePixelRatio“). Darüber hinaus ist es ebenfalls eines der Aufgabengebiete von RWD, unterschiedlich auf die möglichen Eingabemethoden des Benutzers zu reagieren. So sind an einem Desktop oder Notebook die Oberflächen für die Interaktion mittels Maus und Tastatur optimiert, wohingegen an einem Tablet oder Smartphone die Verwendung von Touch-Gesten in Verbindung mit der Bildschirmtastatur als primäre Interaktionsmöglichkeiten mit der Oberfläche gesehen werden.

Technisch gesehen werden Responsive Layouts durch die Kombination aus HTML5, CSS3 und (falls notwendig) JavaScript realisiert. CSS-Media-Queries dienen hierbei als Gerüst, um die Oberflächen auf den jeweiligen Geräten und Auflösungen unterschiedlich darzustellen.

Viewports

Als Viewport bezeichnet man den Bereich einer Webseite, den ein Benutzer zu einem bestimmten Zeitpunkt sehen kann. Äußere Faktoren wie die Gestaltung des Browserfensters, eine Lesezeichenleiste oder die Größe des Browserfensters haben somit eine direkte Auswirkung auf den Viewport. Der Benutzer kann den Viewport durch diverse Interaktionen wie Scrolling anpassen oder durch Aktiveren/Deaktivieren der Lesezeichenleiste aktiv verändern.

DevicePixelRatio

Das DevicePixelRatio ist einfach betrachtet ein Umrechnungsfaktor zwischen den Pixel­angaben einer Webseite und der Pixelanzahl des Bildschirms. Notwendig wurde dieser Umrechnungsfaktor wegen extrem hochauflösenden Bildschirmen wie zum Beispiel einem Retina-Display. Auf solchen Bildschirmen wird nicht einfach mehr Inhalt angezeigt, es geht hier vielmehr darum, den gleichen Inhalt in einer höheren Schärfe darzustellen. Um bereits existierende Webseiten, Anwendungen oder Grafiken allerdings weiterhin korrekt anzeigen zu können, musste an dieser Stelle ein neuer Umrechnungsfaktor (eben das DevicePixelRatio) eingeführt werden. Im Bereich des Webdesigns kann man solche hochauflösende Displays über eine CSS-Media-Query ansprechen. Weitere Informationen zu der DevicePixelRatio finden Sie zum Beispiel unter [2].

CSS-Media-Queries

CSS-Media-Queries erlauben es dem Entwickler, CSS-Klassen, einzelne Styles oder gar komplette CSS-Dateien abhängig von Merkmalen des Anzeigegeräts zu laden oder auf definierte HTML-Elemente anzuwenden. So sorgt die Anweisung

@media print, embossed { body{ background-color: #ffffff; } }

dafür, dass im Druckmodus (oder in der Druckansicht) die Hintergrundfarbe des body-Elements (also der aktuellen, sichtbaren Seite) auf die Farbe weiß gesetzt wird. Beim Erstellen von Media-Queries werden so genannte Medienmerkmale als Filterkriterien verwendet. Eine Übersicht sämtlicher verfügbaren Medienmerkmale finden Sie unter [3]. RWD-Frameworks wie Twitter Bootstrap [4] verwenden vornehmlich Medienmerkmale wie width und device-width, um festzulegen, wie die jeweiligen Elemente einer Webseite oder Web-App dargestellt werden sollen. Eine Kombination von Medienmerkmalen mittels and und or ist natürlich auch möglich. Konkret sieht dies im Quellcode von Twitter Bootstrap wie folgt aus:

@media (min-width: 768px) and (max-width: 991px) { .container{ width: 750px; } }

Nachdem Sie die Begriffserklärung von RWD und RL gelesen haben, ist es wichtig, die Abgrenzung und den Unterschied zwischen Responsive Webdesign und Adaptive Webdesign kennenzulernen.

Was ist Adaptive Webdesign?

Der Begriff Adaptive Webdesign oder kurz AWD wurde von Aaron Gustafson in seinem Artikel „Adaptive Web Design“ [5] geschaffen und ist ähnlich wie RWD ein Sammelbegriff für diverse Techniken und Ansätze im Bereich der Gestaltung von Webanwendungen. Ein adaptives Design ist für unterschiedliche (nicht alle) Displaygrößen konzipiert. Hierbei werden mehrere Views für exakte Viewports entwickelt. Bei AWD wird in der Regel jeweils eine feste Größe für Desktop-, Tablet- und Smartphoneansichten erstellt. Ein wesentlicher Unterschied ist, dass bei AWD der Server entscheidet, welche View an den jeweiligen Client ausgeliefert wird.

Responsive vs. Adaptive

Die Unterschiede sollten hier bereits deutlich werden, und sicherlich weisen die Ansätze noch viele weitere Aspekte auf, die sich unterscheiden. Doch für das Erstellen von Web-Apps, die auf vielen unterschiedlichen Plattformen mit einer Codebasis laufen und die vorhandene Rechenkapazität der Clients nutzen sollten, ist es ein enormer Vorteil, lediglich eine View zu implementieren, die dann zur Laufzeit dynamisch die Inhalte an die äußeren Gegebenheiten und den Viewport anpasst. Dadurch kann auch bspw. gewährleistet werden, dass mobile Clients bei schlechter Anbindung nur die notwendigsten Informationen vom Server abfragen müssen.

Sollten Sie ...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang