Judith's WebWi-Lernblog

Den folgenden Blogbeitrag möchte ich dem Thema „Responsive Webdesign“ (kurz RWD) widmen. Während ich dabei die grundlegenden Fragen in Bezug auf Definition, Nutzung, Entstehung und Notwendigkeit klären möchte, greift meine Kollegin Claudia Ganglberger in ihrem Blogbeitrag etwas tiefer und beschäftigt sich mit der den Vor- und Nachteilen, der möglichen Lösungsansätze und Herangehensweisen, etc. Dieser Beitrag kann hier aufgerufen werden.

Veränderungen erfordern Anpassungen

Mobile Endgeräte wie Smartphones und Tablet gewinnen zunehmend an Bedeutung in Bezug auf die Internetnutzung. Die folgende Grafik veranschaulicht die Entwicklung der weltweiten Internetnutzung in Abhängigkeit vom jeweilg benutzten Endgerät von 2010 bis 2014.

Abbildung 1 - Internetnutzung nach Endgerät (Source: StatCounter, 10/14)^[1]

Hierbei ist ersichtlich, dass global gesehen etwa ein Drittel der Internetzugriffe von mobilen Endgeräten stammt. Wie rasch diese Entwicklung (Grafik seit 2010) voranschreitet, ist ebenfalls zu erkennen.

Was heißt diese Veränderung in Bezug auf Webseiten?

Die Bedürfnisse mobile Internetnutzer in Bezug auf Webseiten stimmen nicht mehr mit jenen der traditionellen Internetnutzer überein. Allein die Tatsache, dass mobile Endgeräte im Hoch- und Querformat gehalten werden können und Touch Screens Finger-Friendly (daher kein Mouse-Over möglich) sein müssen, stellt Webseiten-Entwickler vor große Herausforderungen.^[2] Zudem wollen mobile Internetnutzer meiste kurze, prägnante Informationen, wo hingegen PC-Nutzer nähere Details zur selben Thematik suchen.

Mögliche Anpassungsansätze^[2]

·         Doppeltippen

Um das Problem der verschiedenen Bildschirmgrößen zu lösen (oder zu umgehen) gibt es die Möglichkeit für mobile Internetnutzer doppelt auf die Seite zu tippen, wodurch der Inhalt herangezoomt wird. Da dadurch allerdings sowohl das Navigieren als auch das Erfassen der Inhalte erschwert wird, handelt es sich dabei nicht um die optimalste Lösung.

·         Der kleinste gemeinsame Nenner

Um das eben genannte Problem des Zoomens zu umgehen, können Webseiten-Entwickler auch das Design auf die kleinste Auflösung anpassen (im heutigen Fall wäre es das Smartphone) und dieses für alle Endgeräte ausliefern. Für Nutzer mit hoher Auflösung und großen Screens fällt das Ergebnis danach allerdings ebenfalls suboptimal aus.

Abbildung 2 - Anpassungsansatz: Der kleinste gemeinsame Nenner^[2]

·         Designer-Ansatz

Der Ansatz des „kleinsten gemeinsamen Nenners“ kann auch in die umgekehrte Richtung passieren. Häufig ist dies der Fall, wenn Designer (welche meist auf hochauflösenden Geräten sitzen) die Webseite auf ihren eigenen Screen anpassen. Hier kommt es in der Folge dazu, dass auf kleinen Screens (Smartphones) kaum noch etwas zu erkennen ist.

Abbildung 3 - Anpassungsansatz: "Designer-Ansatz"^[2]

·         Unterschiedliche Webseiten

Eine etwas bessere (und noch immer weit verbreitetete) Lösung ist jene, dass für jedes Endgerät eine eigene Webseite entwickelt wird. Erkennen kann man diese Webseiten auf mobilen Endgeräten durch den Zusatz „m“ statt „www“ (Bsp.: m.facebook.com). Das Problem bei diesem Ansatz ist der enorme Aufwand für die Programmierung, da für jedes Endgerät eine eigene Webseite programmiert werden muss (nicht nur PC und Smartphone, auch Tablet, etc.)

·         Responsive Webdesign

Genau hier kommt Responsive Webdesign als beste Lösung ins Spiel.

Was ist also Responsive Webdesign?

Responsive Webdesign bedeutet so viel wie „reagierendes Webdesign“.Es handelt sich dabei um eine Art der Webseitengestaltung, wobei sich der strukturelle Aufbau der Webseite an die Bildschirmauflösung des jeweilig benutzen Endgeräts anpasst.^[3] Das bedeutet also, dass sich der grafische Aufbau einer „responsiven“ Website anhand der Anforderungen des jeweiligen Gerätes, mit dem die Site betrachtet wird, anpasst.^[4] Dadurch soll jede Webseite auf jedem Endgerät optimal dargestellt werden.

Abbildung 4 - Responsive Webdesign^[2]

Mithilfe von RWD werden Inhalt und Design automatisch an den Nutzer angepasst. Die Inhalte (Bilder, Tabellen, Texte,…) müssen demnach flexibel und skalierbar sein. Wie genau die Umsetzung von RWD funktioniert bzw. wie man am besten an die Sache herangeht, erkärt mein Kollegin Claudia Ganglberger in ihrem Blogbeitrag.

Fazit

In Anbetracht der Entwicklung mobiler Endgeräte als Internetnutzungsplattformen, scheint es als unumgänglich für Webseiten-Entwickler auf die Bedürfnisse von mobilen Nutzern einzugehen. Wie beschrieben, stehen den Entwicklern dabei zwar unterschiedliche Möglichkeiten zur Verfügung, allerdings scheint nur eine tatsächlich praxis-trauglich zu sein. Responsive Webdesign ist meiner Meinung nach kein „Nice-to-Have“-Feature mehr, sondern sollte bereits für jede Webseite umgesetzt oder zumindest geplant sein. Die Entwicklung dahingehend wird sich auch in den Absprungraten der Webseiten bemerkbar machen.