Was ist Responsive Webdesign? Wie Smartphones Webdesign verändert haben

Breakpoints, Media Queries, Desktop oder Mobile First? Was hat es mit Responsive Webdesign auf sich?

Das alte Internet

In seiner ursprünglichen Form war das Internet früher doch recht simpel. Websites wurden fast ausschließlich auf Desktop-Computern mit den überwiegend gleichen Formaten abgerufen und auch auf Laptops variierten Bildschirmgrößen nicht allzu sehr. Hinzu kommt, dass der Einsatz von Animationen und aufwendiger Grafik eher dünn gesät war. Eine schlichte Überschrift mit Logo, ein kleines Menü am Rand und in der Mitte der Seite Platz für meist aus Text bestehenden Content. Entsprechend simpel war dabei auch die Vorgehensweise beim Entwurf eben jener Websites, bei denen Designer meist mit starren Rastern und Formaten gearbeitet haben, ähnlich wie man es beim Entwurf einer Seite für Print-Medien kennt.

Smartphones als Trendsetter

Mit der die letzten zehn Jahre anhaltenden Entwicklung hin zu deutlich mehr verschiedenen Formaten und Größen stößt diese Methode allerdings an ihre Grenzen. Gerade das erste iPhone und die damit einsetzende Smartphone-Welle forderten ein Umdenken beim Entwurf von Websites. Der wohl auf den ersten Blick auffälligste Unterschied ist hierbei, dass Smartphones überwiegend Hochformat verwenden, während der klassische Desktop Websites nur im Querformat darstellen muss. Hinzu kommt dann noch die Vielfalt an Auflösungen, die bei Smartphones zur Anwendung kommen.  

Hier lautet das Zauberwort: Responsive Webdesign. [1]

Was bedeutet überhaupt „Responsive“?

Responsives Webdesign bedeutet, dass das Webdesign auf das Endgerät des Nutzers „reagiert“ und das Layout entsprechend an das vorhandene Format anpasst. Von Vorteil ist beim Responsive Webdesign zunächst, dass HTML bereits ein Stück weit „reagierend“ ist und die einzelnen Elemente einer Website automatisch an die Größe des Browserfensters anpassen kann. Dies ist aber nicht die Lösung aller Probleme, denn spätestens bei aufwendigeren Grafiken und komplexeren Animationen werden klare Grenzen erkennbar. Auf einem Smartphone bleibt dann nur noch ein Haufen unübersichtlicher Pixel übrig. Versuchen Sie einmal, eine Website, die aus der Kreidezeit des Internets stammt, auf einem modernen Smartphone abzurufen. Gute Augen sind hierbei von Vorteil! Hier kommt nun gutes „Responsive Webdesign“ ins Spiel.

Adaptive oder Responsive

Media Querries und Breakpoints

Zu Beginn der aufkommenden Welle an mobilen Endgeräten etablierte sich dabei das Vorgehen, von einer Website zwei oder drei fixe Versionen zu entwerfen. Eine Version für die klassische, horizontale Desktopansicht, eine Version mit Fokus auf die vertikale und bedeutend kleinere Darstellung von Smartphones und eventuell eine Version, welche Tablets bedient, die irgendwo zwischen Smartphone und Desktop liegen. Dass dies auch einen Mehraufwand während der Entwicklung des Designs bedeutet, ist wahrscheinlich selbstverständlich, obwohl er noch relativ gering ist. Die Erkennung der einzelnen Endgeräte erfolgt über sogenannte Media Querries; zu Deutsch: Geräteabfragen.

Hierbei werden dem Host einer Website alle technischen Daten eines Endgeräts übermittelt, die zur korrekten Darstellung einer Website benötigt werden. Mithilfe der wohl wichtigsten Variablen, der Bildschirmauflösung, wird dann ermittelt, in welche vorher definierte Gruppe der Bildschirm des Endgeräts fällt. Die vorher definierten Grenzen einer Gruppe nennt man auch Breakpoints. Unterschreitet ein Endgerät die Grenze von beispielsweise 600 Pixeln Bildschirmbreite, zeigt es die Website in der Desktop-Version an. Unterhalb dieser Grenze liegt die mobile Version. Häufig werden hierbei Smartphones und Tablets von Apple als Industriestandard herangezogen.

Vorteile der Adaptivität

Der Vorteil dieser adaptiven Vorgehensweise liegt darin, dass Entwickler damit die Möglichkeit haben, Layouts zu entwerfen, die genau auf einen Bildschirmtyp abgestimmt sind. Aufwendige Animationen können gut implementiert werden, da sich die Darstellung und Anordnung der Inhalte innerhalb der vorher definierten Grenzen nicht ändern müssen. Beispielsweise wird vernachlässigt, ob ein Laptop 13 Zoll oder 17 Zoll misst, da beides noch in die Gruppe der Desktop-Computer fällt. Der Fokus kann somit darauf gelegt werden, dass ein Design auf einem Computer, Smartphone oder Tablet ansprechend und genau auf den jeweiligen Gerätetyp zugeschnitten ist. Das Endgerät steht beim Design im Vordergrund.

Responsive Webdesign für verständliche Inhalte

Bei der responsiven Vorgehensweise steht hingegen der Inhalt im Vordergrund. Zwar kommen hier ebenfalls Media Querries zum Einsatz, allerdings passt sich die Darstellung viel flexibler an das Endgerät an. Es gibt somit nicht, wie bei der adaptiven Methode, zwei oder drei vorher definierte Versionen einer Website. Der Fokus einer responsiven Website liegt im Inhalt, der immer möglichst verständlich und erkennbar dargestellt werden soll. Ein Beispiel hierfür wäre ein Navigationsmenü, das auf einem Desktop und Tablet ausgeklappt dargestellt wird, ab einer gewissen Größe des Displays jedoch nur noch hinter einem Logo versteckt wird, beziehungsweise hinter dem sogenannten Hamburger-Menü. Wichtig ist dabei aber, zu erwähnen, dass dieser Wechsel nicht immer mit einer kompletten Änderung der angezeigten Seite einhergeht, sondern vielmehr losgelöst von anderen Elementen stattfindet.

Beim Responsive Webdesign passen sich einzelnen Elemente der Website unabhängig voneinander an die Gegebenheiten unterschiedlichster Endgeräte an. Was sich wann ändert, ist im Vorfeld bei der Programmierung festzulegen. Zu bedenken ist aber auch, dass der Zeitaufwand beim responsiven Vorgehen gegenüber dem adaptiven gerade auf der Ebene der Programmierung deutlich höher sein kann. Die wichtigste Frage, die man sich somit stellen muss, ist, ob bei der Konzeption der Website die Inhalte (Responsive) oder die Endgeräte (Adaptive) im Fokus stehen sollen.

Mobile First oder Desktop First

Ein weiterer wichtiger Punkt, der bei responsiven Websites zu beachten ist, ist der Standpunkt, an dem die Entwicklung starten soll. Wie bereits erwähnt, gibt es ja keine verschiedenen fixen Versionen, sondern eine Version der Website, die sich stetig anpassen muss. Man unterscheidet dabei grundsätzlich die zwei Ansätze: Desktop First und Mobile Frist.

Leitgedanke Desktop-PC

Desktop First stellt die Darstellung der Inhalte in einem klassischen Desktop-Format in den Vordergrund. Für den relativ großen und viel Platz für aufwendige Designs bietenden Desktop-Monitor wird zunächst eine Website entwickelt, welche dann nach und nach an kleiner werdende Bildschirme angepasst wird. Dabei kann es durchaus vorkommen, dass größere Designs nicht ohne Kompromisse auf kleinere Endgeräte übertragen werden können und folglich Abstriche gemacht werden müssen. Aus diesem Grund spricht man auch von einer Gracefull Degregation bzw. würdevollen Herabstufung, da man sozusagen versucht, den Prozess der Anpassung möglichst würdevoll für den Inhalt der Website zu gestalten.

Dies ist auch dann immer der Fall, wenn eine klassische und relativ starre Desktop-Website im Nachhinein für mobile Endgeräte zugänglich gemacht werden soll. Zwar können bei diesem Vorgehen die modernsten Techniken zum Einsatz kommen, allerdings kann es auch sehr schnell zu Problemen bei der Kompatibilität und der Barrierefreiheit kommen, da sich manche Entwürfe nicht problemlos auf kleinere Endgeräte skalieren lassen.

Das Smartphone im Vordergrund

Beim Mobile-First-Ansatz stehen nun zunächst Geräte im Fokus, die weniger aufwendigere Möglichkeiten für Webdesigns bieten, sei es nun aufgrund eines eingeschränkten Platzangebotes durch kleinere Bildschirme oder anderweitige technische Einschränkungen. Ziel ist es, sicherzustellen, dass die Website möglichst verschiedenen Nutzern problemlos angezeigt werden kann. Durch eine sukzessive Erweiterung des Umfangs können im Nachgang noch weitere Features und aufwendigere Layouts realisiert werden. Dabei wird jedoch immer sichergestellt, dass die Website auf jedem noch so kleinen Endgerät problemlos dargestellt wird. Dieses Vorgehen ist zwar zeitintensiver, hat aber gerade in Sachen Kompatibilität klare Vorteile und stellt den Inhalt in den Fokus. Es fordert dazu auf, zunächst nur wesentliche Elemente einer Website zu berücksichtigen und kann dadurch gerade für mobile Nutzer eine höhere Usability sicherstellen.

Wer sich anpasst, der gewinnt!

Da heutzutage mobile Endgeräte einen immer höheren Anteil am Internetverkehr haben, sollte folglich bei der Entwicklung einer Website auch der Fokus auf eben jene Geräte gelegt werden, um User nicht durch zu kleine Texte, schwierig zu handhabende Menüs und unschöne Formatierungsfehler von der eigenen Website zu vergraulen. Nicht zuletzt führt eine responsive Website auch deshalb zu mehr Traffic, da Google bei Suchanfragen von mobilen Endgeräten bevorzugt Ergebnisse anzeigt, die für mobile Endgeräte optimiert sind. Generell ist es im Rahmen der Search Engine Optimization wichtig, eine Website zu bauen, die über verschieden Geräte hinweg benutzerfreundlich bleibt. Denn beim Bewertungsschema der komplexen Algorithmen kommt anpassungsfähiges Webdesign gut an.

Aber auch abgesehene von Googles Bewertungsschema sollte eine Website immer möglichst attraktiv dargestellt werde, ist sie für viele Firmen doch das Aushängeschild. Wenn Kunden bereits von Ihrem starken Webauftritt begeistert sind, dann sind sie sicherlich auch von Ihren Produkten begeistert.


[1] Quelle: http://www.topowiki.de/wiki/RWD

Quellen:

This Is Not the Web von Self Html

https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign/Vor%C3%BCberlegungen

https://die-netzialisten.de/neue-ideen-zu-breakpoints-im-responsive-web-design/

https://www.onlinemarketing-praxis.de/webdesign-webentwicklung/was-ist-responsive-webdesign

http://www.scoyo.de/eltern/  als Beispiel für gute Responsivness

https://www.webdesign-journal.de/anleitung-responsive-webdesign/

Fotos:

Adobe Stock/T. L. Furrer – stock.adobe.com
Adobe Stock/maicasaa – stock.adobe.com

Scroll to Top