Responsives Webdesign

Laut Google werden 61% der Nutzer bei Schwirigkeiten des Zugriffs auf mobile Inhalte nicht wiederkehren. Tendenz steigend. Und noch schlimmer: 40% der Nutzer besuchen daraufhin eine Wettbewerberseite.

Immer mehr Menschen sind ständig online. Jeder Fünfte kann sich einen Alltag ohne Smartphone gar nicht vorstellen. Etwa zwei Drittel der Bevölkerung nutzen aktuell ein Smartphon, drei Viertel davon gehen damit auch ins Internet. Auch Tablets werden zunehmend für das mobile Surfen genutzt.

Ende 2016 überholte die weltweite mobile Internetnutzung dann die über stationäre Geräte wie Desktop - PC (siehe Bild 9).

Bereit 2015 gab Google bekannt, dass es mehr mobile Suchanfangen über Ihre Suchmaschine gab über stationäre Endgeräte. Grund dafür sind sowohl günstigere Smartphone - Tarife und größere Brandbreiten für das mobile Internet, als auch die mobilfreundlichen Anwendungen an Smartphonen. [13]

Responsives Webdesign ist ein Entwicklungsanzatz, bei dem die Erscheinung der Website abhängig von der Screengröße und der Ausrichtung des genutzten Endgeräts dynamisch angepasst wird. Responiv bedeutet so viel wie »reagierend«.

Dem responsiven Webdesign liegt die Grundidee der so genannten Breakpoints zugrunde. Mit den Breakpoints werden die Stellen bzw. Werte festgelegt, an denen sich das Design grundsätzlich verändern muss, da es für die jeweilige Screengröße / Auflösung von der Breite des Browserfensters wird ein für diese Screengröße optimiertes Screendesign angezeigt. Gängige Breiten liegen bei 320 px, 480 px, 768 px, 1024 px und 1200 px. Zwischen diesen Umbruchstellen (Breakpoints) ist das Screendesign flexibel ausgelegt, indem es nicht auf festen, pixelgenauen Werten basiert, sondern mit prozentualen Werten skaliert. Damit passt sich die Website dem Nutzungskontext an und reagiert auf das Endgerät des Nutzers (siehe Bild 10).

Tipp: Sofern Ihre Anwendung bereits im laufenden Betrieb ist, nutzen Sie auch das Wissen über die mobile Nutzung. Welche Endgeräte (PC, Laptop, Smartphone, Tablet, Smartwatch ) werden am häufigsten genutzt? Worauf sollen Sie besonders Wert legen? Am Ende ist es die Usability und User Experiense, die stimmen sollte - egal, für welchen Ansatz Sie sich entschieden.

Der Text ist auch im Webdesign sehr wichtig. Ist dieser auf kleinen Bildschirmen wie Smartphones nicht sichtbar, verlieren Sie viele Nutzer, und die Konversionen bleiben aus. Es soll immer eine gute Lesbarkeit der Überschriften und Fließtext auf allen wesentlichen Entgeräten sein.

Tipp: Für eine gute Lesbarkeit im Web soll die Zeilenlänge zwischen 45 und 85 Zeichen  inklusive der Leerzeichen haben.

Neben den Texten sind auch die Bilder ein wesentlicher Bestandteil eines gelungenen responsiven Webdesigns. Bei der Konzeption sollen Sie die folgende wichtigen Anwendungsfälle berücksichtigen:

1) Die Grafiken sollen für Unterschiedliche Pixeldichte der Bildschirme optiert werden.

2) Die  Breite des Anzeigebereichs (Viewport) sollen Bildschirmen ansprechen.

3) Die Bilder sollen unterschiedliche Bildausschnitte haben und sollen in optimierter Dateigröße je nach Endgerät ausspielen. [14]