Was ist Responsive Design?

Die weite Verbreitung von Smartphones und das erschwingliche Internet für unterwegs haben die Surfgewohnheiten stark verändert. Genauso der Einsatz von Tablets oder die Einführung ganz neuer Produkte wie Smartwatches. Die mobile Nutzung wächst rasant, laut ARD/ZDF-Onlinestudie 2015 ist die Anzahl derer, die in Deutschland das Internet unterwegs nutzen erneut um über 3 Mio. gestiegen. Notwendig und logisch also, dass das Surfen für User auch oder vor allem unterwegs übersichtlich und nutzerfreundlich sein soll. Damit die Inhalte einer Webseite auf allen Geräten bestmöglich konsumiert werden können, kommt das sogenannte Responsive Webdesign zum Einsatz. Hierbei erkennen Internetseiten von selbst mit welchem Gerätetyp gesurft wird, wie die Bildschirmauflösung ist und auch in welcher Umgebung das Gerät genutzt wird (also z.B. wie die Geschwindigkeit der Internetverbindung ist). Die besuchte Webseite wird dann entsprechend dieser Kriterien optimiert angezeigt. Nichts ist abgeschnitten, verrutscht, zu groß oder zu klein. Man könnte das Ganze also auch „anpassungsfähiges Design“ nennen.

Darstellung und Technik

Konkret bedeutet das, dass alle Elemente einer Webseite wie Bilder, Navigation oder Überschriften automatisch angepasst werden, sodass alles gut zu sehen ist. Es gibt keine fest definierten Bildgrößen mehr, stattdessen werden die Bausteine einer Seite prozentual skaliert. Ein Foto wird auf einem Tablet also z.B. in 70 Prozent der Ursprungsgröße angezeigt und ist somit auch auf diesem Bildschirm komplett zu sehen. Das Foto, das auf dem Monitor des Computers über die gesamte Breite dargestellt wird, wird dann auf dem schmalen Screen eines Smartphones nicht am Rand abgeschnitten, sondern automatisch verkleinert, sodass es auch hier vollständig zu sehen ist. Genauso wird Text durch Größe und Zeilenumbrüche auf eine schmalere Ansicht angepasst und läuft nicht mehr einfach aus dem Bildschirmrand heraus. Nerviges Scrollen nach links und rechts entfällt. Ein Menü mit vielen Unterpunkten schiebt sich in eine vereinfachte Darstellung zusammen, ins sogenannte „Burger“-Menü. Diese drei untereinander abgebildeten Linien haben Sie sicher schon häufig gesehen.
Elemente, die auf Webseiten in der Breite nebeneinander dargestellt werden, rutschen bei Responsive Design auf schmaleren Bildschirmgrößen ebenfalls untereinander, was „Flow“ genannt wird. Dies kann man in der folgenden Grafik erkennen:

Vorteile für Ihr Unternehmen

Auch wenn eine Webseitenentwicklung oder Veränderung einer bestehenden Seite in Responsive Design aufwendig und manchmal auch etwas teurer ist, so liegen für Unternehmen doch viele Vorteile auf der Hand:

• Der erste Eindruck ist bekanntlich entscheidend und dieser sollte bei Nutzern Ihrer Webpräsenz – potentiellen Kunden – gut ausfallen. Responsive Design sorgt für eine ansprechende Darstellung der Inhalte und vermittelt zudem den Eindruck von Modernität.
• Besucher einer Website sind beim Surfen durch die bessere Usability und die ansprechendere Darstellung zufriedener mit der Seite. Das heißt sie surfen länger und kommen wieder.
• Viele Anbieter betreiben eine zweite, mobile Variante ihrer Webseite. Diese ist dann nicht mehr nötig und somit entfällt das aufwendige Pflegen von zwei Auftritten.
• Werbemittel wie Banner, Rectangle Ads, usw. erscheinen in einem optimal dargestellten Umfeld
• Außerdem wichtig: Responsive Seiten werden im Ranking von Google besser bewertet.

Testen Sie Ihre Seite

Auf verschiedenen Internetseiten können Sie sich Ihre eigene Webseite so anzeigen lassen, wie sie auf den unterschiedlichen Gerätetypen ausgeliefert wird. So z.B. auf www.responsinator.com, hier können Sie schauen, wie die Darstellung auf Smartphones oder Tablets ist. Sie werden schnell erkennen, welche Inhalte nicht gut zu erkennen sind, wo es Verbesserungspotential gibt und warum Responsive Design Sinn macht.