Responsive Webdesign

Moderne Anzeigegeräte wie z. B. Smartphones, Tablets, SmartTVs, Wearables oder vielleicht in Zukunft aufkommende Anzeigegeräte stellen neue Ansprüche an die Gestaltung, Programmierung und Bedienung einer Website.

Während bis vor einigen Jahren anzunehmen war, dass die Mehrzahl der Benutzer mit einem Desktop-Computer auf Websites zugreift, sind heute mobile Endgeräte mehr und mehr auf dem Vormarsch. Durch unterschiedlichste Bildschirmgrößen und Auflösungen ist es daher nicht mehr möglich, bestimmte Auflösungen als Standard anzunehmen, um allen Benutzern eine optimale Anzeige von Websites zu bieten.

Andere Eingabesysteme wie z. B. die Touch-Bedienung erfordern neue Navigationskonzepte, da sie z. B. keinen Rollover-Status unterstützen oder über Sprachbefehle navigieren.

Um diesen Anforderungen gewachsen zu sein und für alle Anzeigegeräte eine optimale User Experience zu gewährleisten, werden heute die Prinzipien des responsive/adaptive Webdesign angewendet.

Was genau ist „Responsive Webdesign“  bzw. „Adaptive Webdesign“?

Unter Responsive/Adaptive Webdesign versteht man ein Design und eine Programmierung von Websites, die auf die Eigenschaften des jeweils benutzten Endgerätes reagiert. Dies betrifft insbesondere die Anordnung von Elementen, wie Navigation, Seitenspalten und Texten, sowie die Nutzung von Eingabemethoden wie Maus (klicken, überfahren) oder Touchscreen (wischen, antippen).

Responsive Webdesign orientiert sich dabei prozentual. Z. B. legt es fest, dass immer der gesamte Bildschirmbereich ausgenutzt wird und die Navigation dabei 33% der Breite des Bildschirms einnimmt, während dem Inhaltsbereich die restlichen 67% zugeordnet werden. Das heißt, es spielt keine Rolle mehr, welche Auflösung einem Display eines Gerätes zur Verfügung steht.

Ab einer gewissen Größe (z. B. bei Smartphone-Darstellungen) macht diese prozentuale Einteilung keinen Sinn mehr. Hier würden 33% der Breite des Displays zu wenig Platz bieten, um eine sinnvolle Touch-Bedienung zu ermöglichen.
Hier kommt das adaptive Webdesign ins Spiel. Dies sieht abhängig von der Screengröße eines Endgerätes Anpassungen des Designs vor, die auch bei kleinen Anzeigegeräten (z. B. Smartphones, Wearable, etc.) eine sinnvolle Bedienung und Lesbarkeit ermöglichen.

Dazu gehören z. B. veränderte Navigationsdarstellungen über eine Schaltfläche zum Einblenden der Navigation, eine Anordnung der Inhaltselemente und/oder der Navigationselemente untereinander usw.

Da die Nutzung mobiler Geräte mehr und mehr zunimmt, sollten moderne Websites dem Rechnung tragen, indem sie im „Responsive/Adaptive Webdesign“ gestaltet und programmiert werden.

 
0