Von Dennis Herzberger | Trends | 44 Reaktionen

3 Säulen für Responsive Webdesign

In der heutigen Zeit der Smartphones und Tablets ist responsives Webdesign oder neudeutsch „Responsive Webdesign“ das A und O der Usability. Die Seite mit den besten Produkten und aktuellsten Inhalten verliert ohne Anpassung auf Mobilgeräte unzählige User – einfach weil es anstrengend ist. Wer hat schon Lust, mit den Fingern beim Lesen von links nach rechts zu scrollen, Texte vergrößern zu müssen und den Button auch nach dem fünften Anlauf zu verfehlen?

Wir sind uns einig: Mobiles Webdesign ist heute unverzichtbar. Welche drei essentielle Basics Du bei der Umstellung von „statisch“ auf „dynamisch“ beachten musst, damit Deine Seite auch auf allen Endgeräten rund läuft und Absprungraten sinken erfährst Du, wenn Du weiterliest.

Statisches Grid-Layout – veraltet und wartungsintensiv

Der Browser ist die leere Leinwand eines Webdesigners. Um diese mit kreativem Inhalt und Leben zu füllen, nutzt er ein Grid-Layout. Basierend auf den gängigen Bildschirmauflösungen und den Zielgruppen wurde die feste Größe von 1.024 x 768 Pixeln für die Gestaltung gewählt. In Ausnahmefällen traut er sich auch an die Auflösung von 1.280 x 1.024 Pixeln heran.

Display ist nicht gleich Display

Bei einem klassischen Screendesign kommt ein 4-Spalten-Layout zum Einsatz. Kleinere Displays können dies schon nicht mehr ansprechend darstellen. Die Folge: Eine Reduzierung und Anpassung des Grids ist notwendig.

Responsive Webdesign Content

klein – kleiner – mobile

Innovationen in den letzten Jahren haben uns die Wunderwerke „Smartphone“ und „Tablet“ geschenkt, welche den Webseitenbetreibern nun ein Potpourri an Pixelgrößen bescheren. Nutzer stellen implizit die Anforderung, dass eine Seite auf jedem Gerät gut aussieht, vollen Funktionsumfang bietet und vor allem nutzbar ist. Sind wir uns da einig? Gut.

Leider müssen wir jedoch feststellen, dass eine gute Umsetzung von mobilen Seiten auf allen Devices in den wenigstens Fällen gelingt. Sie sind meist recht rudimentär und bieten die nötigsten Funktionen auch nur sehr spartanisch an. Die User Experience (UX) bleibt komplett auf der Strecke.

Willkommen im Pflege-Dilemma

Webseiten-Betreiber möchten den Usern alles bieten, was eine gute mobile Webseite ausmacht und erstellen mobile Versionen ihrer Seite. Das fängt erst einmal mit drei Versionen an:

  • iPhone-Screen: ab 320 Pixel Breite
  • iPad-Screen: bis 1.024 Pixel Breite
  • Desktop-Screen: über 1.024 Pixel Breite

Zu den drei Versionen kommt, dass iPad, iPhone & Co. nicht immer in der Portrait-Ansicht (hochkant), sondern gerne auch mal im Querformat genutzt werden. Um den Usern aller Geräte gerecht zu werden, wird häufig für jedes Gerät eine spezifisch optimierte Seite erstellt. Natürlich muss dann auch jede Seite einzeln gepflegt werden. Die Folge sind hohe Wartungskosten und ein endloses Pflege-Dilemma.

UX durch Responsive Webdesign

„Responsive“ bedeutet so viel wie „auf jemanden eingehen“ oder „reaktionsfähig bleiben“. Responsive Webdesign reagiert also auf das Endgerät – egal welche Auflösung es verwendet. Bei dem vorherrschenden Wust an Devices bringt dies Licht ins Webdesign-Nirvana. Aber wie genau?

Das Zauberwort heißt FLEXIBILITÄT. Bilder, Tabellen, Logos, Texte, Videos… – alle Elemente müssen sich flexibel anpassen.

Responsive Webdesign - 3 Säulen

Säule A – Keine festen Layout-Grids

Für viele Designer sind Responsive Webdesigns ein Dorn im Auge. Feste Layout-Grids mit fixen Größen genau platzierter Bilder und Texte gewährleisten ihrer Meinung nach, dass die Seite gut aussieht und alles seine gewollte Position hat.

Beim Responsiven Webdesign müssen wir uns von dem Gedanken der totalen Kontrolle über alle Devices verabschieden: „Give up control, not quality“ (Zitat: Jeremy Keith). Für Seiten und Elemente werden prozentuale statt fester Pixelwerte verwendet. Der Vorteil: die Seite passt sich den Gegebenheiten an, unter denen sie verwendet wird und reagiert so auf das Gerät des Nutzers. Trotzdem bedarf eine responsive Seite einer guten Planung, denn auch bei flexiblen Layouts wird nichts dem Zufall überlassen. In der Planungs- und Konzeptionsphase kostet das Responsive Design zwar mehr Schweiss und Arbeit – dafür wird die anschließende Pflege deutlich reduziert.

„Mobile First“ – für neu konzipierte Webseiten
Möchtest Du eine Webseite grundlegend neu konzipieren, so empfehlen wir Dir, nach der „Mobile First“-Maxime vorzugehen. Bei diesem „Bottom-Up“-Vorgehen betrachtest Du als erstes die kleinste Konstante – also das Smartphone mit geringer Leistung. Hierfür legst Du die wichtigsten Informationen und deren Darstellung fest, denn es ist deutlich einfacher, Details hinzuzufügen als diese später entfernen zu müssen. Außerdem wird die Entwicklung der Seite ganzheitlich betrachtet und bietet sich bei der Erstellung einer grundlegend neu konzipierten Webseite an.

„Graceful Degradation“ – für bestehende Webseiten
Du besitzt bereits eine bestehende Webseite und möchtest diese für Tablet und Smartphone optimieren? Dann ist die Lösung „Graceful Degradation“. Bei diesem „Top-Down“-Vorgehen konzentrierst Du Dich auf die leistungsstarken Geräte – also Notebook oder Desktop, an dem alles dargestellt werden kann. Mehr Infos hierzu findest Du bei Kulturbanause.

User First – Content vor Design
Bei der Erstellung von mobilen Seiten geht es häufig nur um Technik und Design. Der Blick auf den User wird zu oft vergessen. Sei schlau, dreh Deine Denkweise um und folge der „User First“-Maxime! Vergiss für einen Moment das Design und stell Dir die Frage: „Welche Inhalte kann ich einem Mobilen Nutzer zumuten und welche sind absolut wichtig für ihn?“. Denn wenn Du weißt, welche Inhalte der Nutzer auf welchem Gerät benötigt, kannst Du Deinen Content auch besser für ihn planen.

User, die über Smartphones auf Deine Seite kommen, sind meistens gerade unterwegs, vielleicht in Eile und haben ein häufig ein konkretes Anliegen. Sie haben daher keine Zeit, sich durch endlos lange Texte und Produktbeschreibungen zu wühlen. Unterwegs ist die Internetverbindung auch nicht immer die beste, also mache Deine Seite schneller, indem Du auf unnötige (Hintergrund-) Bilder und Elemente verzichtest. Arbeite also im ersten Schritt die Inhalte aus und wende Dich erst im zweiten dem Design zu.

Responsive Webdesign - colly.com

Säule B – Keine festen Schriftgrößen

Passe Headlines und Fließtexte so an, dass sie auch auf Smartphones gut lesbar sind. So vermeidest Du einen echten Konversionskiller. Infos sollen auch auf kleinstem Raum ohne Aufwand zu entschlüsseln sein. Eine 14pt-Schrift kann vielleicht am PC gut gelesen werden. Auf dem Smartphone hingegen bedeutet das Lesen Augenschmerzen und Quälerei. Prüfe die Lesbarkeit der Schriftarten daher immer direkt auf dem Gerät.

Responsive Webdesign - Forefather

Eine feste Schriftgröße ist also tabu. Es kann mit prozentualen Werten gearbeitet oder auf alternative Maße wie em zurück gegriffen werden. Tipp: JavaScript-Plugins wie FitText skalieren dabei eigenständig die Größe von Headlines.

Responsive Webdesign - FitText

Säule C: Keine festen Bildgrößen

Die Darstellung von Bildern bei responsiven Seiten führt uns schnell in eine Zwickmühle. Bilder müssen auf kleinen Devices entsprechend skaliert werden, sollen aber gleichzeitig auf hochauflösenden Displays scharf dargestellt werden. Große Bilder werden auf stationären PCs mit großem Bildschirm und schnellem Internet flott geladen und gestochen scharf dargestellt. Auf dem Smartphone mit mobilem Internet ärgert sich der User dafür aber mit langen Wartezeiten herum.

Als schöne Lösung, um auch hier flexibel zu agieren, empfehlen wir Dir zum Beispiel das JavaScript Plugin der Filament Group, welches die gewünschte Grafik abhängig von der Bildschirmauflösung lädt. Die Ladezeit wird reduziert und die Nerven des Nutzers geschont. Auch mit Adaptive Images kannst Du Dir über HTML die korrekte Bildgröße ausliefern lassen.

Update: Es geht auch ohne JavaScript-Plugin
Inzwischen hat sich in der Bildverarbeitung für responsive Seiten einiges getan. Seit 2014 gibt es das -Element mit erweiterten Attributen, welches erlaubt, mehrere Bilder für unterschiedliche Größen einfach zu deklarieren. Einfacher gesagt: Das Bild wird in verschiedenen Größen auf den Server geladen und die passende Größe automatisch für das jeweilige Gerät angezeigt. Das spart Traffic und schont die Nerven des Betrachters durch kürzere Ladezeiten.

Der Quellcode könnte wie folgt aussehen:

<img src="bild.jpg"
srcset="bild_klein.jpg 667w,
bild_mittel.jpg 1024w,
bild_gross.jpg 1280w">

Bis inklusive 667px: image_klein.jpg (z.B. iPhone 6)
Bis inklusive 1.024px: image_mittel.jpg (z.B. iPad)
Ab 1.280px wählt der Browser image_gross.jpg (z.B. Desktop)

Es kommt allerdings nicht nur auf den Viewport an, denn Bilder in einer Auflösung von 72dpi werden auf einem hochauflösenden Display (Retina) auf iPhones und MacBooks nur in der doppelten Auflösung von 144dpi knackig scharf angezeigt. Die einfache Code Variante dazu lautet:

<img src="bild.jpg"
srcset="bild.jpg 1x,
bild@2x.jpg 2x">

Die Beispiele sollen zeigen, dass es weitreichende einfache Möglichkeiten gibt, um Bilder perfekt darzustellen.

Responsive Webdesign - cacaotour.com
Das Headerbild verschwindet bei kleineren Auflösungen. Sehr Ressourcenschonend!

Ausführliche Infos findest Du hier:
http://pmueller.de/blog/responsive-bilder-ein-ueberblick.html
https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element

Wie wird die richtige Seite ausgeliefert?

Möchtest Du den Inhalt einer Seite zum Drucken formatieren, so muss die entsprechende CSS-Datei mitgeliefert werden. Der Browser fragt dann ab, wie er die Seite darzustellen hat. Bei mobilen Seiten liefert der „viewport“ die Info, dass es sich zum Beispiel um ein iPad handelt. Nach Auswertung dieser Info lassen sich die Inhalte über CSS3 Media Queries bequem anpassen. So wird der Content auf dem iPad nicht mehr auf 100% angezeigt, sondern auf 65% skaliert. Auch Schriftgröße, Header und Footer lassen sich auf diese Weise komfortabel steuern. Navigationsleisten können neu positioniert oder komplett ausgeblendet werden.

Tipp: Es ist möglich, den Inhalte entsprechend des Gerätes anzupassen, also „Responsive Content“ einzusetzen. Fließtexte kannst Du zum Beispiel für Smartphones verkürzt in Listenform aufbereiten.

Mehr Infos findest Du im Keywordmonitor.

Responsive Content
Auch komfortabel – den Nutzer einfach fragen, welche Textversion er lesen möchte
Quelle: http://nextlevelseo.de/seo-responsive-content-3352/

Du siehst, der Inhalt wird nicht automatisch korrekt in Position gerückt. Eine flexible Darstellung erfordert eine flexible und durchdachte Planung. Nur so kann eine perfekte Seite entstehen, die sich auf jede beliebige Größe anpasst.

Vorsicht Stolperfallen:

Diese Punkte solltest Du beachten, wenn Du eine responsive Webseite planst:

  • Der Browser muss CSS3 Media Queries beherrschen und mit diesen umgehen können.
  • Ladezeiten im Auge behalten und mediale Inhalte entsprechend anpassen.
  • JavaScript hilft bei der Entwicklung, kann aber auch zu langen Ladezeiten führen.
  • Navigation ist nicht gleich Navigation! Ein Touchscreen reagiert nicht auf Mouseover-Menüs.
  • Der Content der Seite muss gut bemessen sein. Andernfalls können Seiten lang werden und weit unter Fold führen.

Mehr Inspirationen für Responsive Webdesigns:

Best Practice - Responsive Webdesign
50 Best Practices auf Design Modo

Inspiration für Responsive Webdesign

Sehr gute Beispiele auf MediaQueries

Fazit

Wer heutzutage mitspielen möchte, der muss seine Angebote auf allen Geräten für seine Kunden zugänglich machen. Eine Lösung ist Responsive Webdesign. Du brauchst zwar anfangs einen langen Atem, aber ersparst Dir langfristig das Pflege-Dilemma.

Ob Responsive Design wirklich die Lösung aller Probleme ist, kannst Du gerne mit uns in den Kommentaren diskutieren. In der Infografik: Mobile Commerce Deutschland – die TOP 100 Shops im Benchmark findest Du eine interessante Gegenüberstellung von Responsive und Adaptive Design.

Egal welche Lösung Du für Deine mobile Seite verwendest: Stelle den User in den Fokus! Er muss die Seite bedienen können und dabei schnell und einfach zum Ziel kommen.

Schnell, einfach, effizient! Was mobile Nutzer wirklich wollen verrate ich Dir in meinem Artikel Mobile Commerce Patterns: Der Bauplan für Conversion im mobilen Webshop.

Wir freuen uns auf Feedback, Erfahrungen und Prognosen zur Zukunft des mobilen Designs.

Dennis Herzberger

Als Senior Optimization Representative bei konversionsKRAFT widmet sich Dennis Herzberger der Entwicklung von strategischen Planungen für mehr Unternehmens-Wachstum. Sein leidenschaftlicher Fokus liegt auf der Konzeption und Optimierung von mobilen Webseiten und Onlineshops. Folgen Sie ihm auf Twitter.
Frage zum Artikel? Frag den Autor

Schreibe einen Kommentar

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