Was ist responsive Webdesign?

Was ist responsive Webdesign?

Das responsive Webdesign beschreibt eine aktuelle Technik, die es ermöglicht, Webseiten so zu entwickeln, dass sie sich flexibel an die visuellen und haptischen Möglichkeiten des verwendeten Endgeräts und dessen Bildschirmgröße anpassen.

Übersetzt bedeutet der Begriff responsive Webdesign so viel wie „reagierendes Webdesign“.

Sinn und Zweck des responsiven Webdesigns

Die Art, wie Menschen das Internet heute nutzen, hat sich seit der Markteinführung von Smartphones und Tablets stark verändert. Bereits über die Hälfte aller Suchanfragen bei Google werden heute über mobile Endgeräte getätigt. Landen Nutzer auf einer nicht mobiloptimierten Website, verlassen sie diese meistens bereits nach wenigen Sekunden wieder. Einfach, weil die Bedienung zu umständlich ist und ähnliche Anbieter nur wenige Mausklicks entfernt sind. Viele Webseitenbetreiber unterschätzen nach wie vor, wie viele potentielle Kunden und damit Geschäftspotential an dieser Stelle verloren gehen.

Mit der Verbreitung mobiler Geräte wie Smartphones und Tablets steigt gleichzeitig der Anspruch der Nutzer an die Zugänglichkeit von Inhalten beziehungsweise an die intuitive Navigation auf Webseiten. Nutzer erwarten, dass sie jede Website von jedem beliebigen Ort und Endgerät aus aufrufen und intuitiv bedienen können. Nur, wenn Webseitenbetreiber in der Lage sind, diesen Anforderungen nachzukommen, können sie weiterhin von zufriedenen Kunden und hohen Kaufabschlussraten profitieren. Dies erzwingt allerdings ein Umdenken bei der Webseitengestaltung. Es reicht nicht mehr, ein Layout für eine einzige Bildschirmgröße anzupassen. Stattdessen muss ein Webdesign in der Lage sein, flexibel auf unterschiedliche Bildschirmgrößen und deren Verhalten zu reagieren:

Smartphones: 320px bis 480px
Tablets: 768px bis 1024px
Desktop-PCs: 1024px+

Unterschied von Smartphone Bildschirmen zu Desktop Bildschirmen:

• Deutlich kleinerer Bildschirm, dadurch weniger Platz für die Darstellung
• Hoch- und querformatig nutzbar (Portrait / Landscape)
• Oft höhere Pixeldichte (Retina)
• Bedienung über Touch, nicht mit einem Mauzeiger
• Eventuell weniger verfügbares Datenvolumen, daher müssen Ladezeiten dringend optimiert werden

Starres Grid Layout vs. flexibles Grid Layout

Was versteht man unter einem Grid Layout?

Jede Website basiert auf einem Gestaltungsraster, dem sogenannten Grid-Layout. Hierbei handelt es sich um ein unsichtbares System an Linien, an dem die verschiedenen Elemente einer Website ausgerichtet werden. Ein Webdesign, das auf einem solchen Layout basiert, wirkt meist aufgeräumter und harmonischer.

Mehrspaltige Inhalte auf einer Website sind beispielsweise ein häufig verwendeter Teil eines Grid Layouts.

Starres Grid Layout

Noch vor einigen Jahren konnte keiner ahnen, dass Webseiten in Zukunft von diversen unterschiedlichen Bildschirmgrößen aufgerufen werden. Es gab einige gängige Bildschirmgrößen, für welche Webseiten angepasst wurden. Schaut man sich eine solche veraltete Webseite heute auf einem Smartphone an, dann erkennt man sehr gut das starre Grid Layout, mit welcher sie entwickelt wurde. Auf dem Smartphone sieht die Webseite genauso aus, wie auf dem Desktop-PC. Allerdings bietet der deutlich kleinere Smartphone Bildschirm nicht genug Platz für das starre Layout, das nun sozusagen über die Bildschirmränder hinausragt.

Wollen wir alle Inhalte der Seite erfassen, müssen wir den Bildschirm hin und her bewegen und zoomen, um gewisse Bereiche lesen zu können. Auch das Menü der Seite ist – vor allem mit „Wurstfingern“ – auf einem kleinen Smartphone Bildschirm nur schwer zu bedienen. Mal eben schnell die Öffnungszeiten eines lokalen Geschäfts zu recherchieren kann hier schnell zur Geduldsprobe werden. Nutzer haben schlichtweg keine Lust, sich an Ihre Website anzupassen. Sie erwarten, dass sich die Website flexibel an ihre Bedürfnisse anpasst und nicht umgekehrt.

Nachteile eines starren Layouts im Überblick:

• Nutzer müssen zoomen oder den Bildschirm hin und her schieben um alle Inhalte zu erfassen
• Schaltflächen sind besonders bei dicken bzw. großen Fingern nicht immer leicht zu treffen
• Schrift und Bilder haben oft nicht die optimale Größe und sind daher nicht immer gut zu erkennen
• Anklickbare Elemente liegen möglicherweise zu dicht beieinander
• Die umständliche Bedienung sorgt für eine schlechte User Experience und dadurch für stärkere Abbruchraten

Flexibles Grid Layout

Auch auf kleinen Bildschirmen eine gleichbleibende Nutzerfreundlichkeit zu gewährleisten, erfordert ein Umdenken bei der Webseitengestaltung insbesondere hinsichtlich des Gestaltungsrasters. Das Layout der Website muss sich flexibel an die Bildschirmgröße anpassen, statt wie bisher seine starre Form über alle Bildschirme hinweg zu behalten.

Bei einem flexiblen Layout wird auf feste Pixelangaben weitgehend verzichtet. Stattdessen werden heute eher relative Werte wie Prozentangaben verwendet. Denn wenn man bspw. die Breite eines Bildes mit 1920px fest definiert, wird es zwar auf einem großen Bildschirm optimal dargestellt. Auf einem kleinen Bildschirm mit einer Gesamtbreite von 480px würde das Bild jedoch um 1440px überstehen. Mit Prozentangaben kann man dieses Problem beim responsive Webdesign umgehen, da sich dann das Bild relativ entlang der Bildschirmgröße bzw. entlang der zur Verfügung stehenden Fläche ausrichtet.

Auch die Darstellung von Spalten muss sich flexibel an die Bildschirmgröße anpassen können. Auf einem großen Desktop-PC sehen vier Spalten nebeneinander noch gut aus. Auf einem kleineren Bildschirm werden die Spalten jedoch extrem schmal, sodass vor allem lange Wörter schnell überstehen.

Stattdessen sollten Breakpoints gesetzt werden, sodass die Spalten auf kleinen Bildschirmen untereinander dargestellt werden, statt nebeneinander. So sind die Inhalte innerhalb der Spalten für den Anwender deutlich einfacher zu erfassen. Hier arbeitet man ebenfalls mit relativen Prozentangaben statt mit festen Pixelwerten:

Weitere Gestaltungsregeln um aus einem starren Layout ein flexibles Layout zu machen:

• Das Hauptmenü sollte auf kleinen Bildschirmen als sogenanntes Hamburgermenü dargestellt werden.
• Im responsive Webdesign sollten Schriftgrößen, Zeilenhöhen etc. auf der Basis von Prozentangaben (%) oder anderen relativen Werten (z.B. em) definiert werden. So entspricht eine Schriftgröße von 16 Pixeln 100% oder 1em.
• Bildgrößen sollten ebenfalls mit relativen Werten definiert werden.
• Mehrspaltige Inhalte sollten auf kleinen Bildschirmen untereinander, statt nebeneinander dargestellt werden.

Wie funktioniert Responsive Webdesign? – Technische Umsetzung

Mithilfe von sogenannten Media Queries werden beim Aufruf einer Website zunächst verschiedene Daten abgefragt, wie:

• Breite und Höhe des Bildschirms (Viewport)
• Breite und Höhe des Geräts
• Geräte-Orientierung (Landscape / Portrait)
• Auflösung
• usw.

Abhängig vom Ergebnis der Abfrage werden zuvor die mittels Media Queries festgelegten Gestaltungsregeln abgerufen und angewendet. Innerhalb dieser Gestaltungsregeln werden sogenannte Breakpoints gesetzt. Überschreitet die Geräteauflösung einen solchen Breakpoint, wird das Layout der Website dynamisch angepasst.

Simples Beispiel:

Wir wollen die Schriftgröße abhängig von der verwendeten Bildschirmgröße anpassen. Auf dem Smartphone soll sie etwas kleiner (18px) sein als auf einem Tablet (20px).

Mittels Media Queries lässt sich diese Anforderung problemlos lösen. Da Media Queries ein Teilgebiet der Stylesprache CSS sind, müssen wir die Gestaltungsregeln innerhalb einer Datei mit der Endung .css (z.B. style.css) eingeben. Üblicherweise werden Media Queries ganz am Ende der Datei definiert. Natürlich kann man Media Queries aber auch in einer separaten CSS-Datei auslagern, welche dann noch im Hauptdokument eingebunden werden muss.

In der Praxis sieht der zugehörige “Responsive Webdesign Code” so aus:

/* „Normale“ Style-Angaben ohne Media Queries, z.B. für die normale Desktop-Version */
p {
font-size: 22px;
}
/* Anpassung für Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
p {
font-size: 20px;
}
}
/* Anpassung für Smartphones */
@media screen and (min-width: 320px) and (max-width: 480px) {
p {
font-size: 18px;
}
}

Die Vorteile von responsive Webdesign

Wer sich eine Website erstellen lassen möchte, sollte stets beachten, dass ein responsive Webdesign kein “Nice to have”, sondern vielmehr ein “Must have” ist. Wer über seine Website neue Kunden generieren möchte, muss dementsprechend für eine einfache Bedienung über alle Endgeräte hinweg sorgen.

Vorteile des responsive Webdesign im Überblick:

• Die Internutzung wird zunehmend mobil. Im Jahr 2018 nutzen XX% aller Menschen in Deutschland das Smartphone.
• Seit April 2014 zählt ein responsive Webdesign bei Google als entscheidender Rankingfaktor. Nicht-mobiloptimierte Webseiten rutschen in den Suchergebnissen immer weiter nach hinten. Ein mobiloptimiertes Layout kann also einen deutlichen Vorsprung bei Google bedeuten.
• Die Usability der Website wird ganzheitlich verbessert, was unabhängig vom verwendeten Endgerät für eine bessere Nutzererfahrung sorgt. So werden Absprungraten deutlich reduziert. Dadurch erhöht sich die Conversion Rate und damit auch der Unternehmensumsatz.
• Mit responsive Webdesign bleiben Sie zukunftsfähig, egal, welche neuen Bildschirmgrößen den Markt erobern.
• Nach Veröffentlichung der Website werden nachträglich veränderte Inhalte automatisch an alle Bildschirmgrößen angepasst und müssen nicht einzeln bearbeitet werden.

Was ist “Mobile First” und lohnt sich das?

Mit Mobile First ist ein Ansatz gemeint, bei dem durch responsives Webdesign die Website zuerst für den mobilen Zugriff konzipiert und optimiert wird. Um auch größere Displays zu berücksichtigen, wird die Website für diese anschließend entsprechend angepasst.

Dieses Konzept liegt der Annahme zugrunde, dass es wesentlich leichter ist, ein mobiles Layout auf einen Desktop-PC zu übertragen als umgekehrt. Das Mobile First Prinzip sorgt außerdem dafür, dass Inhalt und Struktur der Seite stärker bedacht werden. Beispielsweise wird vielen Unternehmen klar, dass gewisse Informationen überflüssig sind und weggelassen werden können. Mobile First unterstützt also auch dabei, wichtige Informationen von unwichtigen zu trennen und die Website nicht mit unnötigen Informationen zu überladen. Die Logik von “Mobile First”, dass man mit der Konzeption einer mobilen Website eine perfekte Desktop-Version sozusagen “gratis” dazu erhält, hat in den vergangenen Jahren einen enormen Hype auf den Mobile First Ansatz ausgelöst.

Auch wenn viele Webdesigner auf dieses Prinzip schwören, sind wir der Meinung, dass man “Mobile First” nicht bei jedem Kunden und jedem Projekt anwenden muss bzw. sollte. Es kann zwar durchaus Sinn machen, die mobile Version einer Seite nur auf die wichtigsten Elemente und Informationen herunterzubrechen. Dies genauso auf die Desktop-Version zu übertragen ist jedoch nicht zwingend die optimale Lösung. Denn während häufig die User Experience auf mobilen Endgeräten verbessert wird, kann die Nutzererfahrung auf Desktop PCs darunter leiden.

Bei jedem Projekt sollte man individuell entscheiden, ob “Mobile First” ein richtiger Ansatz sein kann und falls ja, welche konkreten Vorteile es mit sich bringt. Sinnvoller ist es, die unterschiedlichen Endgeräte und Nutzungssituationen einzeln und unabhängig voneinander zu betrachten. Es ist also nicht verkehrt, zuerst die Desktop-Version zu kreieren und anschließend um eher unnötige Informationen auf der mobilen Version zu reduzieren. Ein User, der zu Hause gemütlich vor dem PC sitzt, hat eventuell mehr Zeit sich Ihre Inhalte durchzulesen, als jemand, der von unterwegs nur schnell die wichtigsten Informationen nachlesen möchte.

Wie kann ich testen, ob mein Webdesign responsive ist?

Es gibt verschiedene kostenlose Online-Tools, mit welchen man testen kann, ob die eigene Website responsive ist. Am besten gefallen hat uns das Tool ami.responsivedesign.is

Online-Tools funktionieren aber nicht immer zuverlässig. Verschiedene Plugins beispielsweise bei WordPress definieren ihre responsiven Eigenschaften nicht unbedingt an der Pixelgröße des Bildschirms, sondern am verwendeten Endgerät selbst. Die Eigenschaften werden also nur übernommen, wenn das Gerät auch tatsächlich ein Smartphone ist.

Da Online-Tools aber meistens von einem Desktop-PC aufgerufen werden, greifen die speziell für das Smartphone definierten Eigenschaften hier nicht.

Deswegen empfehlen wir, Webseiten immer direkt von einem Smartphone oder Tablet aus zu überprüfen, um wirklich 100% sicher sein zu können.