Responsive Webdesign richtig umsetzen
Die mobile Internet- Nutzung hat in den letzten Jahren besonders stark zugenommen, weshalb Webseiten- Betreiber und Webentwickler darauf ihren Schwerpunkt legen sollten. Statistiken zufolge sind ungefähr 70% der Web-Nutzer mit einem mobilen Endgerät im Internet unterwegs. Daher ist es umso wichtiger, Webseiten speziell diesen Anforderungen anzupassen.
Optimiert werden dafür Webdesign sowie Ladezeiten der verschiedenen Arten von Dateien, die bei jedem Aufruf einer Seite sowohl geladen als auch verarbeitet werden müssen.
Zum zentralen Begriff der Optimierung / Darstellung für alle Arten von Endgeräten wurde das Reponsive Webdesign. Dieses Konzept könnte man mit „reagierendem Webdesign“ übersetzen. Ein solches Design ist dynamisch und passt sich jeder Screen-Größe an. Dabei wird auf jede Veränderung der Bildschirm-Größe direkt „reagiert“, Komponenten verschoben oder in ihrer Größe angepasst, sodass die Seite auch in veränderter Größe eine bestmögliche Darstellung garantiert.
Wie kann ein Reponsive Design umgesetzt werden?
Das Responsive Design findet sich in CSS-Anweisungen wieder, die dem jeweiligen Browser auf dem Endgeräte vorgeben, ab welcher Größe des Screens bestimmte Teile der Webseite wie dargestellt werden müssen. Hierfür werden sogenannte Breakpoints definiert, die sich auf die Maße des Endgerätes beziehen. Der Breakpoint legt dabei eine Mindestanzahl an Pixeln der Auflösung des jeweiligen Gerätes fest, ab der eine Komponente mit bestimmten Werten für CSS-Attribute versehen wird. Diese werden schließlich mit den HTML-Elementen über bestimmte CSS-Selektoren verbunden und sorgen dafür, dass die Elemente immer die richtige Größe und Strukturierung vorweisen.
Hierzu ein einfaches Beispiel: Auf einer Webseite sollen verschiedene Bilder in einer Galerie dargestellt werden. Ziel ist es, die Bilder per CSS- Grid in Reihen und Spalten so anzuordnen, dass immer vier Bilder pro Reihe nebeneinander dargestellt werden. Hierbei kommt es nun zu dem Problem, dass diese Bilder auf einem mobilen Gerät mit niedriger Auflösung kaum erkennbar sind. Die Grafiken werden automatisch verkleinert, wodurch die feste Anordnung von vier Bildern pro Reihe weiterhin beibehalten werden kann.
Eine Lösung zu diesem Problem, das vielen Entwicklern in der Praxis begegnet, sind sinnvoll gewählte Breakpoints. So gibt man vor, dass auf Geräten mit einer mittelgroßen Auflösung (mehr als 768px aber weniger als 992px Breite) lediglich zwei Bilder pro Reihe nebeneinander angezeigt werden sollen, für kleinere Auflösungen nur ein Bild.
Neben der Strukturierung und Anordnung von bestimmten HTML-Elementen müssen auch Bilder und Grafiken an die unterschiedlichen Bildschirmgrößen angepasst werden. Eine Grafik, die in einer Full-HD Auflösung in die Webseite eingebunden wird und dann später auf einem Smartphone auf einen Bruchteil der eigentlichen Größe verkleinert werden muss, ist wenig sinnvoll. Zielführender ist es, für alle denkbaren Bildschirmgrößen unterschiedliche Auflösungen des Bildes hochzuladen, und diese flexibel anzuzeigen. Für diese Thematik liefert uns CSS eine einfache Lösung: Über das Attribut „srcset“ können für ein Bild verschiedene Varianten bzw. Größen angegeben werden, die dann ebenfalls per Breakpoints für das aktuelle Endgerät ausgewählt werden. Hierzu dient das Attribut „sizes“, über das gesteuert wird, bei welcher Screen-Größe welche Variante ausgegeben wird. So kann sichergestellt werden, dass auf jedem beliebigen Gerät immer die optimale Bildgröße zur Verfügung gestellt wird, d.h. dass das bestmögliche Verhältnis zwischen Ladezeit und Auflösung besteht.
Mobile First- Entwicklung: Theorie und Praxis
Bei der Webentwicklung und dem Webdesign war es lange Zeit üblich, zuerst die Webseite für die Desktop-Darstellung zu designen bzw. zu optimieren und danach in einem zweiten Schritt die alternativen Darstellungen bzw. Bildschirmauflösungen zu bearbeiten.
Heute hat sich ein Trend etabliert, der diesen Ansatz umkehrt und die Darstellung auf mobilen Geräten in den Fokus setzt. Der Ansatz heißt „Mobile First“. Dieser bedeutet ein Umdenken in der Konzeptionierung von Webseiten, bei welchem die Entwicklung für mobile Bildschirmgrößen den ersten Schritt darstellt. Die Seite wird erst danach für die Darstellung auf größeren Bildschirmen erweitert.
In der Praxis werden dazu Content und Layout aus der Sicht des Nutzers eines mobilen Endgerätes betrachtet und angepasst. Alle Content-Elemente einer Seite wie Textabschnitte, Infografiken und Videos werden so angeordnet und skaliert, dass sie speziell in einer mobilen Ansicht im gesamten Layout optimal dargestellt werden.
Des Weiteren müssen wichtige Komponenten des Layouts an kleine Bildschirmgrößen und Touchscreens angepasst werden. Ein Beispiel ist die Navigation: Auf mobilen Versionen von Webseiten werden meist Sidebars eingesetzt, die über einen sogenannten „Hamburger Button“ angesteuert werden. Diese Art der Navigation nimmt nach dem Aufrufen per Button den gesamten Screen ein, damit einzelne Menüpunkte optimal lesbar und bedienbar sind.
Vorteile von Mobile First und Responsive Design
- SEO: Google hat seit 2018 die Indexierung von Webseiten verändert und den Mobile-First-Index eingeführt. Mit dieser neuen Methode sollen mobile Versionen von Webseiten verstärkt gecrawlt und das Ranking von neuen Seiten ausschließlich anhand der Informationen über die mobile Version durchgeführt werden.
- Performance und Usability: Zur Mobile First- Strategie gehört der Ansatz, nur die wichtigsten Elemente und Informationen in die Seite einzubauen, damit eine übersichtliche und einfache Bedienung auf kleinen Bildschirmen per Touchscreen möglich ist. Damit realisiert man bessere Ladezeiten, höhere Schnelligkeit, sowie eine optimale Nutzer-Erfahrung.
- Erweiterbarkeit bzw. Skalierbarkeit: Mobile First bedeutet schlanker Code. Dieser bringt den Vorteil mit sich, dass spätere Erweiterungen des Codes schneller und unkompliziert umgesetzt werden können.