Chancen und Tücken des responsive Designs

Bild Mobiles Layout 1

An Responsive Design führt kein Weg vorbei

Laut der Studie „Mobile Internetnutzung 2015“ des Markforschungsinstituts Nordlight Research nutzen etwa 28 Millionen Deutsche das mobile Internet regelmäßig – Tendenz steigend. Google hat bereits auf diesen Trend reagiert und eine Offensive für mobiles Layout gestartet: Seit April 2015 verlieren Webseiten, die kein Responsive Design aufweisen, deutlich an Sichtbarkeit.

An einer mobiloptimierten Webseite führt also kein Weg mehr vorbei, es sei denn, man nimmt schwindende Besucherzahlen (und Umsätze) billigend in Kauf. Der Bäcker um die Ecke mag dies (noch) verschmerzen – für Onlineshops und Unternehmen, die auf das Internet als Vertriebsweg setzen, ist dies keine Option. 

Auf die richtige Umsetzung kommt es an

Die Umsetzung von mobilem Webdesign ist aufwändig; sie erfordert deutlich mehr Know-How als bei einer „statischen“ Seite, über das nicht jeder Anbieter verfügt: Damit sich einzelne Seitenelemente perfekt an das jeweilige Ausgabeformat anpassen, sind vertiefte Programmierkenntnisse und viel Feinarbeit gefragt. Responsive Design ist deshalb Sache von Spezialisten – an der falschen Stelle Geld zu sparen ist in den seltensten Fällen zielführend.

Finger weg von vorgefertigten Templates

Zuhauf finden sich im Internet vorgefertigte und kostenlose „Schablonen“ für Webseiten. Diese „Themes“ oder „Templates“ basieren auf einem Content Management-System wie z.B. WordPress, das auch für Laien vermeintlich intuitiv zu bedienen und zu verwalten ist.

Für private Blogs mögen fertige Templates durchaus ihren Zweck erfüllen – für einen professionellen Firmenauftritt sind sie kaum geeignet, da sie in vielen Details haken: Mal werden Erweiterungen wie z.B. Kontaktformulare oder Buttons nicht richtig skaliert, mal werden die Umbrüche im Menü nicht berücksichtigt – oder die Textspalten passen sich nicht richtig an die Bildschirmbreite an.

Was nach Kleinigkeiten klingt, verursacht viel Aufwand beim Nachprogrammieren; die Fehlersuche gleicht der sprichwörtlichen Suche nach der Nadel im Heuhaufen. Selbst kleinste Änderungen können große Auswirkungen auf die Gesamtdarstellung haben – und so ziehen viele Stunden ins Land, bis jedes Element sauber reagiert.

Von Anfang an Spezialisten engagieren

Eine Website ist keine Broschüre und kein Flyer – ihr Layout lässt sich nicht einfach 1:1 auf ein anderes Format übertragen (wie etwa bei einer Kopie von DIN A4 auf DIN A 5). Das Erscheinungsbild auf Desktop-PC und Smartphone ist nicht dasselbe, da die Geräte im Hinblick auf

  • Darstellung (v.a. von Bildern)
  • Navigation
  • Seitenelemente
  • Eingabemethoden (Maus oder Touchscreen)

ganz unterschiedliche Anforderungen haben. In vielen Fällen wird erst am Ende des Gestaltungsprozesses ein Webdesigner hinzugezogen; dass die Anpassung an Mobilgeräte viel Zeit und Mühe kostet, ist dem Kunden nur schwer zu vermitteln. Und Geld ist damit in der Regel auch nicht gespart, wenn das Ergebnis überzeugen soll. 

Was gutes Responsive Design ausmacht

Sicher kennen Sie es aus eigener Erfahrung: Sie besuchen die Mobilversion einer Seite, ärgern sich über lange Wartezeiten und scrollen anschließend sekundenlang über riesige Bilder nach unten, bevor Sie zum eigentlichen Inhalt gelangen. Oder Sie versuchen verzweifelt, Ihre E-Mailadresse in ein stecknadelkopfgroßes Textfeld einzugeben und geben irgendwann auf.

Es gibt also deutliche Unterschiede zwischen mobilem Layout und mobilem Layout: Leichte Bedienbarkeit und Übersichtlichkeit sollten dabei stets im Vordergrund stehen. „Schönes“ Design ist ein klarer Pluspunkt – mehr aber auch nicht.

Verschiedene Geräteklassen berücksichtigen

Bild Mobiles Layout 2

Unterschiedliche Geräte nutzen unterschiedliche Eingabemethoden – der Desktop-Computer in erster Linie den Mausklick, Touchscreens hingegen das Tippen oder Wischen. Die Bedienung von Menüs muss deshalb der Geräteklasse folgen; um diese automatisch zu erkennen, hinterlegt der Programmierer verschiedene Geräteklassen, z.B. Tablet, Smartphone (iOS-, Android- oder Windows-basiert).

Mobilfreundliches Design achtet außerdem auf angemessene Dateigrößen bei Bildern und Multimedia-Inhalten. Die Herausforderung für den Programmierer liegt deshalb darin, einen guten Kompromiss zwischen Bildqualität und möglichst geringer Ladezeit zu finden. Hochauflösende Bilder erfordern zudem ein hohes Datenvolumen – für Mobilbenutzer ohne Flatrate äußerst ärgerlich. Idealerweise nutzt Ihre Seite deshalb für verschiedene Geräteauflösungen unterschiedliche Bilder; dadurch verhindern Sie auch, dass sie bei Smartphones unschön abgeschnitten werden. 

Bedienbarkeit von Eingabefeldern und Buttons

Damit eine Anfrage zustande kommt, müssen sämtliche Buttons und Eingabefelder leicht zu bedienen sein. Sind sie für den Seitenbesucher schwer zu treffen, springt er vor der Auftragsbestätigung ab – ein echtes Desaster für Onlineshops und auch(!) Websites.

Buttons und Formulare müssen deshalb in der Regel händisch angepasst werden, damit sie ordentlich skalieren und auf dem Endgerät nicht unsauber dargestellt werden. Und auch das ist – Sie ahnen es bereits – äußerst komplex und arbeitsintensiv. Die einzige Möglichkeit ist daher, die Produktion Ihres mobilen Layouts einem Webdesigner bzw. einer darauf spezialisierten Internetagentur zu übergeben. 

Richtiger Einsatz von Media Queries ist Teil der Lösung

Damit Ihre Seite auch bei einer schmalen Bildschirmbreite übersichtlich bleibt, müssen sich die einzelnen Elemente (vor allem Navigations- und Blockelemente) automatisch an die Bildschirmbreite anpassen. Hierzu muss der Programmierer bestimmte Auflösungspunkte (sogenannte „Breakpoints“) definieren, ab denen beispielsweise

  • Navigationselemente umbrechen
  • vertikale Menüleisten eingeklappt oder als Liste dargestellt werden
  • sich die Darstellung beispielsweise von drei zu zwei Spalten ändert.

Andernfalls wird die Seite schwer lesbar und der Benutzer verlässt sie frustriert. Das Zauberwort heißt in diesem Zusammenhang „CSS3 Media Queries“: Dabei handelt es sich um Medienabfragen, die unterschiedliche Designs erlauben – abhängig von den jeweiligen Eigenschaften des Ausgabemediums. Die einzelnen Sprungpunkte richtig zu definieren kostet viel Zeit; doch nur so stellen Sie sicher, dass jedes Element bestmöglich dargestellt wird.

Tipp: Durch die Tastenkombination „strg“ + „shift“ + „m“ können Sie im Firefox-Browser selbst überprüfen, wie Ihr Seitenlayout bei unterschiedlichen Bildschirmgrößen wirkt.

Optimale Nutzererfahrung auf jedem Gerät als Ziel

Das Ziel einer „funktionierenden“ Webseite lässt sich ganz einfach auf den Punkt bringen: Sie soll nicht nur dem Seitenbetreiber gefallen (mitunter ist dies sogar kontraproduktiv), sondern eine positive Nutzererfahrung erzeugen – denn nur wer sich auf der Seite sofort zurecht findet, kauft auch im Online-Shop ein oder gibt seine Daten ein, um eine Anfrage zu starten.

Urheber des Bildes:
nach oben
Menü