Responsive Webdesign

kommt von dem englischen Wort responsive, was so viel bedeutet wie „beantwortend“ oder „reagierend“.

Im Hinblick auf die Auflösung und das Seitenverhältnis, welche je nach Endgerät sehr stark variieren, waren Webseiten früher immer statisch. Abseits von sehr experimentellen JavaScript-Lösungen  gab es keine Möglichkeit, auf verschiedene Bildschirm- und Gerätetypen  zu reagieren.

Das lag vorallem daran, dass HTML & CSS statische Beschreibungssprachen sind, die früher noch keinerlei konditionelle (bedingte) Logik enthielten – was dazu führte, dass die üblichen Homepages auf Mobilgeräten kaum benutzbar waren. Man musste viel scrollen, der Lesefluß war gestört und viel Content war nicht erreichbar.

Mehr Flexibilität dank Media Queries

Dank der neuen Webstandards von HTML5 und CSS3, speziell der Media Queries, ist es heutzutage möglich, für die unterschiedlichen Auflösungen eine separate Antwort zu erstellen. Das geht dazu noch ziemlich einfach. Der schwierigere Teil liegt im Konzept und der Planung der Webseite, die sowohl für Smartphones, Tablets aber auch klassische Desktop-Systeme mit HD, UltraHD/4k oder Retinadisplay gleichermaßen funktionieren soll.

Deshalb setze ich, je nach Anwendungsfall, auf die Mobile First Strategie. Diese Strategie bedeutet, man gestaltet Webseiten zunächst für die kleinste Auflösung und arbeitet sich von dort nach oben. Das hat einen sehr einfachen Grund: Auspacken ist einfacher als einpacken. Denken Sie zum Beispiel an das Spiel Tetris, oder einen perfekt gefüllten Umzugskarton, in dem kein Platz verschwendet wurde. Der Zustand der Füllung repräsentiert unsere mobile Webseite. Packen wir nun alle Gegenstände aus und legen sie geordnet auf den Boden, haben wir unsere Desktop-Webseite. Verfährt man jedoch umgekehrt, stößt man bei der mobilen Seite sehr schnell an das Problem „wo soll das noch hin passen?“.

Weitere Überlegungen beim Responsive Design

Damit Ihre Internetseite auch im mobilen Segment gut gefunden wird, sind zusätzliche Überlegungen im Designprozess notwendig: Wie groß ist die Webseite, wie schnell läd sie über eine mobile Internetverbindung, wie viele Daten werden dabei verbraucht? Dank der neuen Responsive Images lassen sich bei korrekter Programmierung Bilder von klein bis groß gleichzeitig darstellen. Serverseitige WebP Konverter helfen die Datenmenge weiter zu reduzieren.

Ausserdem: Sind die wichtigsten Inhalte above the fold, also ohne scrollen erreichbar? Das und vieles mehr berücksichtige ich bei der Planung einer responsiven Webseite.

Der Bootstrap-Ansatz

Das Twitter-eigene CSS-Framework Bootstrap hat zum  Teil kreative, neue Lösungsansätze in die responsive HTML-Programmierung eingebracht. So auch die Methode, Elemente auf einer Webseite einfach doppelt im HTML einzubauen, um sie dann je nach Bildschirm zu verstecken (Beispiel: d-xl-none früher hidden-xl). Das ist allerdings semantisch unschön und sorgt für Duplicate Content – läßt sich jedoch nicht immer vermeiden. Natürlich kann man diese und andere Lösungen ohne Bootstrap genauso einsetzen – oder man verwendet gleich CSS Grid, dann wird sowohl Bootstrap als auch doppelte Elemente in den allermeisten Fällen überflüssig.

Mobil richtig gemacht, statt teuer!

50 / 50

Hierauf haben sich Statistiken und Prognosen  seit 2017 eingependelt. Um das Jahr 2014 ging die landläufige Meinung dahin, dass zukünftig ca. 80% des Webseiten-Traffics weltweit von Mobilgeräten verursacht werden. Ganz so ist es nicht gekommen, man hat nun ca. 50% gemessen und auch für die Zukunft keine Steigerung prognostiziert. Verbraucher und vor allem Firmen und Behörden nutzen weiterhin  gerne den PC, mit immer größeren und höher aufgelösten Bildschirmen. Und ebenso gerne nutzen wir unsere Smartphones.

Aber: Ist bei dieser Statistik berücksichtigt, dass Smartphones viel kleinere Datenmengen verursachen, durch verkleinerte Webseiten, Reponsive Images oder Proxy-Kompression (z.B. Opera Mobile)? Ich vermute die Antwort lautet „Nein“ – was bedeuten würde, die ursprünglichen 80% waren nicht schlecht geschätzt. Sie sollten davon ausgehen, dass die meisten Besucher Ihre Webseite mit einem Smartphone besuchen.