Responsive Webdesign – unumgänglich in der modernen, mobilen Welt - Robin Vieregge

Responsive Webdesign – unumgänglich in der modernen, mobilen Welt

 

In der heutigen Welt wird Mobilität und Erreichbarkeit immer wichtiger. Schon lange ist ein Internetzugang nicht mehr nur über Computer und Laptops möglich: Das World Wide Web ist von etlichen Endgeräten erreichbar, die alle eine andere Bedienung erfordern. Dem müssen sich auch Websites anpassen können.

Damit die Nutzer eine Website auf verschiedenen Endgeräten möglichst problemlos nutzen und auch alle Funktionen wiedererkennen können, ist eine gewisse Konsistenz wichtig. Logos, Farbwelten und auch der Content sollten stets gleichbleiben.

Konsistenz in der Navigation erweist sich als komplizierter. Ein Mouse-Over funktioniert an einem Computer oder Laptop, muss aber bei Geräten wie Tablets und Smartphones ganz durch Taps ersetzt werden. Dabei ist aber wichtig, dass die Benennung der Navigation dennoch gleichbleibt.

Alle auf die Maus zugeschnittenen Doppelfunktionen müssen für Geräte mit Touchfunktion in einzelne Aktionen aufgelöst werden, wobei am besten auch intuitive Basisgesten genutzt werden. Sehr gut eignen sich hierfür Akkordeons oder Reiter. Im Allgemeinen sollten Verschachtelungen der einzelnen Seiten so weit wie möglich auf mehrere Seiten aufgelöst werden. Funktionen, die durch das Schütteln des Smartphones oder das Zeichnen eines Musters zugänglich sind, wirken zwar sehr Abwechslungsreich und Interessant, doch muss dies vom Nutzer erst neu erlernt werden und kann in den meisten Fällen nicht sofort angewendet werden.

Eine weitere Herausforderung des responsive Webdesigns sind die vielen verschiedenen möglichen Größen der Endgeräte. Auch der Abstand zwischen Gerät und Nutzer spielt eine entscheidende Rolle beim Erkennen einzelner Strukturen und deren Bedienung. Die Größen einzelner Elemente können nicht mehr durch Pixelzahl festgelegt werden, sondern müssen in relativen Größeneinheiten geschrieben werden. Sehr bewährt haben sich dabei die Prozent-Angaben. Wenn für ein Objekt 10% festgelegt wurde, nimmt es auf jedem Endgerät ein Zehntel des Bildschirms ein. Dabei ist es vollkommen egal, ob es sich um einen 40 Zoll-Smart-TV handelt oder ein vergleichsweise kleines Smartphone. Auf dem Smart-TV sollten alle Elemente groß genug dargestellt werden, sodass der User sie auch vom Sofa aus gut erkennen kann. Auf einem Smartphone ist es wichtig, dass die Interaktionselemente voneinander und auch zu nicht interaktiven Elementen einen gewissen Abstand haben, damit der Nutzer nicht versehentlich mehrere Elemente gleichzeitig bedient. Ein sicheres Treffen von Buttons und Links muss gewährleistet sein.

Responsive Webdesign auf Tablet

Sollte auch auf dem Tablet gut aussehen: Responsive Webdesign

Durch die Größenänderung auf den verschiedenen Endgeräten, verändert sich auch stets das Layout einer Website. Um die Übersichtlichkeit für den Nutzer zu wahren, können unter anderem in Fließtexten Hierarchieebenen in den Headlines genutzt werden. Auch Trennlinien zwischen verschiedenen Themenblöcken vereinfachen die Orientierung.

Aber nicht nur die Größe der Endgeräte, sondern auch deren mobile Bandbreite stellt ein weiteres Problem dar. Nicht immer und überall ist dem Nutzer eine gute Internetverbindung gegeben, sodass bei zu langsamer Ladegeschwindigkeit schnell Ungeduld und Frust aufkommt. Wenn Elemente wie zum Beispiel Akkordeons zu langsam laden, könnten sie auch als defekt empfunden werden.

Da die immer hochauflösenderen Bildschirme auch größere Bilder verlangen, verlangsamt dies ebenfalls die Ladezeiten. Dem kann entgegengewirkt werden, indem zum einem die Anzahl der Bilder und deren Größe so gering wie möglich gehalten wird. Zum anderen gibt es schlanke und semantisch gut strukturierte Quellcodes, die, zusammen mit einer serverseitigen Optimierung der Auslieferung, die Ladezeiten minimieren können.

Weiteres Frustpotential für den User steckt oftmals in der Texteingabe. Virtuelle Tastaturen sind bei weitem weniger Komfortabel, als reale Tastaturen. Zwar gibt es für Smartphones mittlerweile Wischtechniken und ähnliches, doch ist dies nicht bei jedem Endgerät der Fall. Demnach sollte immer von der einfachsten Weise der Texteingabe ausgegangen werden.

Längere Texte sollten dem Nutzer daher möglichst erspart bleiben. Bei Smartphones nimmt die virtuelle Tastatur oft so viel Platz auf dem Bildschirm ein, dass der Nutzer gar nicht alles, was er geschrieben hat, sehen kann. Bei Smartwatches gibt es gar einen Medienbruch in der Bedienung, da eine Texteingabe hier nur mit einem gekoppelten Smartphone möglich ist. Am aufwändigsten ist bisher die Texteingabe bei TV-Geräten, die meist auf der Fernbedienung lediglich vier Pfeil- und eine Bestätigungstaste zur Verfügung haben, was sich als äußerst Zeitintensiv darstellt.

Zusammenfassend lässt sich sagen, dass beim Responsive Webdesign stets jede Art von Endgerät und deren Nutzungsweise beachtet werden sollte. Dabei ist es nicht leicht, auch die allgemeine Konsistenz immer aufrecht zu erhalten. Die Entwicklung immer neuer Endgeräte stellt eine immer neue Herausforderung dar, doch werden auch parallel immer bessere Hilfsmittel in Form von Quellcodes und Programmen entwickelt, die das Design der jeweiligen Website vereinfachen.

Grafiken: Serge Kij