21. Januar 2015 von & gespeichert unter User Experience, Webdesign.

Wer hat nicht schon einmal geflucht, wenn er eine Website auf dem Smartphone geöffnet hat, die einfach unlesbar war?  Mehr als die Hälfte der Mobiltelefonbesitzer haben ein Smartphone und auch  Tablets werden immer beliebter, und doch gibt es immer noch viel zu viele Webseiten, die sich auf mobilen Endgeräten einfach nicht richtig darstellen lassen. Responsive Design heißt das Zauberwort, mit dem sich der Web-Auftritt optimieren lässt.

Landläufig wird darunter die Anpassung von Webinhalten an verschiedene Bildschirmgrößen verstanden. Meist werden in diesem Zusammenhang Breakpoints genannt, an denen die Inhalte für Desktops, Tablets und Smartphones umbrechen, um sie auf allen Bildschirmgrößen sichtbar zu machen. Auf kleinen Bildschirmen werden sie gestapelt, auf großen z.B. in Spalten sortiert.

Neue Interaktionsmuster

Responsive Webdesign betrifft mehr als die Darstellung einer Website. Neue mobile Interaktionsmuster müssen in Konzeption, Gestaltung und Programmierung berücksichtigt werden. Dazu zählen Tapping (Tippen), Swipen (Wischen) oder Pinchen (Skalieren von Inhalten mit zwei Fingern).

Auch die Datenverbindung spielt auf mobilen Geräten eine entscheidende Rolle. Inhalte können z.B. geräteabhängig geladen werden – dann werden Slider mit HD-Bildern nur auf Desktop-PCs angezeigt. Auch der Trend zu einem schlichten Design (Flat Design) oder Interaktionsflächen, die mit dem User über Bewegung und mehr kommunizieren, verbessern die User Experience.

Entworfen durch Freepik

Wofür braucht man Responsive Design?

Responsive Design ist kein Trend, sondern eine Notwendigkeit. Denn das „Internet der Dinge“ bringt uns mit vernetzten (Haushalts-)Geräten oder den wearable Gadgets vielfältige Displaygrößen und -Auflösungen. Dank Smart Watch, Smart Glasses, iWallet, T-Shirts mit Display und Ähnlichem wird diese Fragmentierung der Viewports im Jahr 2015 wesentlich voranschreiten.

Vorzüge von Responsive Design

Oftmals ist das Nutzerinteresse auf mobilen Geräten nicht dasselbe wie am heimischen Rechner. Dann werden Inhalte – wie bereits angesprochen – je nach Gerät unterschiedlich angeordnet, dies wird auch „Content Choreography“ genannt. Dank unterschiedlicher Bild- und Dateigrößen und wählbaren Bildausschnitten sorgen z. B. „Responsive Images“ für eine optimale Platzausnutzung auf allen Displaygrößen.

Usability ist ein fortlaufender Prozess – und „Progressive Reduction“ hilft, diesen konstant zu verbessern. Die Idee hinter dieser Methode ist, dass der Nutzer erst mit der Zeit lernt, mit der Website oder App umzugehen. Die Benutzeroberfläche ist daher nie wirklich „fertig“, sondern muss sich dem User Schritt für Schritt anpassen.

Herausforderungen

Mit zunehmender Fragmentierung und kleineren Bildschirmen ist es heute wichtiger denn je, sich auf das Wesentliche zu konzentrieren. Welche Werbung passt schließlich noch auf eine Smartwatch? Nötig ist ein einfaches Design (z. B. Flat Design), da die Kosten für Design und Testing sonst schnell steigen.

Auch das Nutzerverhalten ändert sich: Die User scrollen lieber über einen One-Pager, als einen oder gar mehrere Links zu öffnen.

Mehr als nur ein Trend

Webseiten und Applikationen müssen auf die Bedürfnisse und Gewohnheiten der Nutzer angepasst werden, nicht andersherum. Smartphones und Tablets gehören für viele Nutzer zum Alltag – Responsive Design ist daher längst unverzichtbar. Und Entwicklungen wie das Internet der Dinge oder Trends wie wearable Gadgets sorgen nur dafür, dass reaktionsfähige Webseiten in Zukunft noch wichtiger werden.

 

Bildquellen:

Beitragsbild Entworfen durch Freepik

Bild „Touch“ Entworfen durch Freepik




Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.