Ist „mobile first" das bessere „responsive Design"?

Responsives Webdesign: für alle Viewports optimiert

Was bedeutet Responsive Design?

Der Begriff „Responsive Design.' wird verwendet, um die Möglichkeit einer Webseite zu beschreiben, die sich an verschiedene Ausgabegeräte anpassen. Dabei ändern sich und/oder skalieren das Layout, die Schriftarten, die Bildgrößen auf der Website entsprechend der Größe des Browsers. Das Design ermöglicht eine gute Lesbarkeit der Webseite und Benutzerfreundlichkeit auf Desktops, Tablets und Smartphones. Der allgemeine Ansatz arbeitet mit dem Desktop-Browser als Basis und bietet alternative, verkleinerte Versionen für andere Geräte-/ Browsergrößen an. Das responsive Design funktioniert über CSS-Medienanfragen (sog. Media Queries), die automatisch die Browsergröße überprüfen und das Layout und das Styling entsprechend an die jeweilige Display-Größe anpassen. Man erstellt hier ein „Responsive Layout", gibt aber an, wie es sich bei verschiedenen Anzeigegrößen verhalten soll. „Responsive Webdesign" ist seit mindestens dem Jahr 2012 Standard. Seit einiger Zeit kommt zum Responsive Webdesign „Mobile First" dazu.

Der Begriff "Mobile First", der sehr anschaulich ist, gibt einen guten Hinweis darauf, was sich darunter zu verstehen ist: die primäre Konzentration auf die Entwicklung der Webseite für mobile Endgeräte.

Oft werden Begriffe verschieden interpretiert und ausgelegt. Dazu gehört auch das responsive Webdesign. Die Annahme, dass dieser Ansatz einem „Mobile First"-Design gegenübersteht, ist nicht richtig. Wir sprechen bei Responsive Webdesign (engl. responsive = reagierend) über ein visuelles/inhaltliches Verhalten einer Website. Der Begriff „Mobile First" hingegen beschreibt eine konzeptionelle Vorgehensweise. Eine Vorgehensweise lässt sich nicht vs. einem Verhalten gegenüber vergleichen. Man könnte viel eher vom „Mobile First Responsive Design" sprechen. Warum das so ist, werden die Erläuterungen der Begrifflichkeiten deutlich machen.

Responsive Design vs. adaptives Webdesign

Zunächst sollten zwei Begriffe erklärt werden, die oft verwechselt werden: das „responsive" und das „adaptive" Webdesign. Hier eine Auflistung der jeweiligen Eigenschaften:

Dazu gehören unter anderem die wesentlichen Gestaltungsmerkmale wie:

​Responsive Webdesign:

• basiert auf einem flexiblen und rasterbasierten Layout mit dynamischem Spaltenraster

• die Elemente werden über alle Spalten angepasst

• ist flexibel über alle Viewportgrößen

• führt zu einem flüssigen Umbruch (z.B. Zeilenumbruch)

• bindet Medienabfragen (Media Queries) ein

• bindet flexible Bilder und Medien in die Website ein

• nutzt den zur Verfügung stehenden Platz optimal aus

Fokus des Responsive Webdesign:
Design, optimale visuelle Darstellung

Adaptives Webdesign:

• ​wird serverseitig angepasst

• besteht aus einem festen, bzw. starren Gestaltungsraster und fixem Website-Layout (keine Dynamik im Sinne von veränderbaren Spaltenbreiten)

• hat feste Breakpoints

• erzwingt harte Umbrüche (z.B. Zeilenumbruch)

​Fokus des Adaptive Webdesign:
Ausgabe/Device, Ausgabe spezifischer Templates

“Mobile First” bedeutet “Content First”

„Mobile First" steht für Weiterentwicklung des Responsive Design ausgehend von der Darstellung auf den kleinen, mobilen Displays. Die Darstellung wird von klein auf groß skaliert.

Der Begriff „Mobile First" wurde 2010/2011 durch den Webdesign-Experten Luke Wroblewski geprägt.

„Designing for mobile first forces you to embrace these contraints to develop an elegant mobile-appropriate solution. But the benefits go well beyond mobile. Small screen sizes force you to prioritize what really matters to your customers and business."
- Luke Wroblewski, Mobile First

Inhalte und Funktionen fokussieren sich auf das Wesentliche. Wenn es der Webauftritt erfordert, werden je nach Display-Größe für Desktop- und Tablet-Versionen weitere Inhalte und Effekte hinzugefügt - technisch gesehen: nachgeladen. „Mobile First" macht aus der vermeidliche Schwäche (dem Platzmangel auf kleinen Bildschirmen) einen Vorteil. Auf unwesentliche Informationen und Bedienelemente wird verzichtet, zugunsten einer benutzerfreundlichen, übersichtlichen und optisch angenehmen Webdesign-Lösung für alle Bildschirmgrößen.

Konzeptionell bedeutet, dass zuerst nach den wichtigsten Inhalten und Funktionen einer Seite zu fragen. „Mobile First" bedeutet eine konsequente Priorisierung des Inhalts: „Mobile First = Content First".

Vorteile / Nachteile verschiedender Darstellungen der Endgeräte mit Mobile First Strategie

Vorteile

• Die Fokussierung auf wesentliche Inhalte vereinfacht die Orientierung für den User

• Inhalte der mobilen Website werden wichtiger als funktionale Vielseitigkeit: Nützliche Kommunikation statt funktionaler Vielfalt

• Spezielle Inhalte können individuell je nach User ausgespielt werden

• Technik kann den Devices angepasst werden

• Datenmengen und Ladezeiten können angepasst werden

• Komplikationen und Konflikte bei der Umsetzung werden vermieden, wenn die mobile Ansicht zuerst betrachtet wird

• Die Skalierbarkeit der mobilen Webseite wird langfristig sichergestellt, da die Anpassung auf mobile Devices in jedem Schritt enthalten ist

• Konzentration auf das MVP (Minimum Viable Product), das für den einzelnen UseCase am höchsten priorisiert ist

​Nachteile

• Die Wahrnehmung der Seite kann durch die Veränderung in der Darstellung durch neue Elemente variieren

• Bei Anpassungen müssen immer die unterschiedlichen Darstellungen berücksichtigt werden, ebenso mögliche Aufwände für CSS Stile und Seitenprogrammierung

• Kosten durch höheren Aufwand bei Betrachtung mehrerer Layouts

• Höhere Sorgfalt bei der Suchmaschinenoptimierung
  

Content Priorisierung

Content Priorisierung ist durchaus ein Thema, worauf beim Design/ Redesign zu achten ist. Content wird oft unterschätzt und ihm wird nicht die Wertigkeit zuteil, wie zum Beispiel dem Design oder funktionalen Features.

Content sollte immer im Fokus stehen:

• Was nützt das schönste Design, wenn die Inhalte langweilig sind?

• Was nützt das schönste Layout, wenn nur schlechte Bilder vorhanden sind?

• Was nützt dem Mechaniker die Seite, wenn die Tabelle hübsch ist, aber die Inhalte nur scrollbar/ klickbar sind und nicht auf einen Blick erfassbar?

• Was bringt dem Lagerarbeiter die Desktopansicht, wenn der mit dem Tablet unterwegs ist?

• Was bringen dem Stuttgarter die lokalen Angebote von Berlin?

Der Content kann sich für verschiedene Endgeräte anders darstellen, wenn die Konzeption den Mobile First Design-Gedanken aufgreift. Für die Priorisierung sollten immer alle Aspekte der Konzeption, Design, Inhalte und Szenarios betrachtet werden: Was wollen die mobilen User bzw. welche Informationen/Funktionen benötigen die User in ihrem UseCase? Was sollen die End-User aus Sicht des Anbieters im UseCase tun?

Optimaler Einsatz der Techniken und Vorgehensweise

Die Entscheidung für eine Strategie kann verschiedene Ansätze haben:

• Was sind die Ziele der Seite?

• Wer sind die End-User?

• Was ist die Unternehmensstrategie?

• Welche Technik/ Background wird genutzt?

Die systematische Priorisierung der Inhalte und Funktionen forciert die Konzentration auf die Elemente, die voraussichtlich den größten Nutzen für die jeweiligen Zielgruppen bzw. Personas des Unternehmens bringen.

„Think of the user, not the browser."
- Aaron Gustafson

Die Strategie des mobile First Gedanken sollte sich nach den Anforderungen an die mobilen Websites und die End-User richten. Eine Studie vor der konzeptionellen Arbeit kann eine Entscheidungsvorlage für die Wahl der richtigen Vorgehensweise sein.

Fazit

„Responsive Design", „Mobile First" in Verbindung mit „Content First" sind nicht nur Etiketten, die auf konzeptionelle Ansätze geklebt werden. Sie stehen für die Anpassung von Strategien in Hinsicht auf digitale Kommunikation und Vertrieb in Anbetracht der kontinuierlich zunehmenden Vielfalt an Endgeräten -insbesondere der Nutzung kleiner mobiler Devices.

„Mobile First Responsive Design" ist eine strategische Position, die in Konzeption, Gestaltung, Produktion und Betrieb digitaler Anwendungen die effizienteste Grundlage für das Erreichen unternehmerischer Ziele bietet:

• Device-spezifische Konversionssteigerung

• Einfache Skalierbarkeit der Website

• Klare Orientierung an User Stories und MVP

• Höhere Akzeptanz, Ansehen und Zufriedenheit bei den Anwendern

• Höhere Verweildauer, geringere Absprungraten

• Bessere Möglichkeiten der Individualisierung

Dezember 2017, diconium News