Eine moderne Website hat ein ansprechendes Design, kurze Ladezeiten, guten Content und ist auf jeden Fall responsive, sprich sie funktioniert auch auf mobilen Geräten wie Smartphones oder Tablets. Übrigens ist Responsive Design im Web mittlerweile ein Standard und wird von Usern aller Altersklassen vorausgesetzt. Aber Responsive ist nicht gleich Responsive und nicht alle Webseiten die responsive sind, sind auch für mobile Endgeräte optimiert.
Skalierung als Basis
Der Grundgedanke beim Responsive Design ist, dass die Website auf allen Bildschirmgrößen sauber dargestellt wird. Und das passiert im Grunde durch Skalierung der einzelnen Inhalte wie Bilder, Videos oder Texte. Eine Website nach rechts und links scrollen muss heute kaum noch jemand. Aber die Skalierung alleine reicht leider nicht aus. Gerade Texte würden unleserlich verkleinert und auch Tabellen oder Spalten wären ziemlich zusammengequetscht. Texte werden somit beispielsweise nicht in Prozent oder Pixel definiert, sondern in anderen Einheiten wie em oder rem. Dadurch behalten die Texte eine angenehme und lesbare Größe, egal wie klein das Display ist und welche Auflösung es hat.
Raster und Umbrüche
Das Verhalten einer Website im Responsive Design wird im Normalfall von einem Framework (z. B. Bootstrap oder Foundation) geregelt. Diese beinhalten bereits alle wichtigen Definitionen wie sich Elemente einer Website verhalten sollen. Bootstrap arbeitet beispielsweise mit einem 12 Spalten System, dass sich dann auf die jeweiligen Auflösungen und Geräte übertragen lässt. Wenn wir uns jetzt auf einer Website vier Bilder nebeneinander anschauen, sind diese jeweils als 3/12 angeordnet. Diese lassen sich dann auf kleineren Geräten als 6/12, also zwei Bilder nebeneinander, darstellen. Oder wenn man möchte, auch nur ein Bild (12/12) und unsere vier Bilder wären nun alle untereinander.
Technische Möglichkeiten ausnutzen
Jedoch reichen Skalierung und Umbruch nicht immer aus, um eine Website ordentlich auf einem Smartphone darzustellen. Sehr breite Bilder beispielsweise würden entweder sehr klein werden oder rechts und links abgeschnitten. Auch sehr große Menüs würden beim Umbruch schrecklich aussehen. Daher definiert ein Responsive Design auch wie Elemente in bestimmten Situationen verändert werden sollen. Es können beispielsweise unterschiedliche Bilder (hoch und quer) hinterlegt werden, die für das entsprechende Endgerät passend ausgespielt werden. Ein weiteres Beispiel ist das Burger-Menü, welches alle Menüpunkte, die auf dem Desktop angezeigt werden, mobile in einem Icon zusammenfasst. Elemente können auch komplett ersetzt werden, so dass ein mobile User komplett andere Inhalte sieht als jemand der die Website über einen Desktop-Browser besucht. Die technischen Möglichkeiten sind sehr vielfältig und würden auch den Rahmen dieses Blog-Beitrags sprengen.
Das Konzept muss stimmen
Wichtiger noch als die technische und grafische Umsetzung ist das Konzept einer Website. Man muss sich im Vorfeld schon Gedanken darüber machen wie die Inhalte auf den jeweiligen Endgeräten ausgespielt werden sollen. Der Fokus liegt hierbei ganz klar auf mobile User (Mobile First!), da sie den größten Teil der Website-Besucher ausmachen. Besucher wollen auf allen Kanälen und Endgeräten begeistert werden, in einigen Fällen sogar auf dem Smart-TV.
Nicht zu unterschätzen
Ein gutes Responsive Design ist nicht zu unterschätzen. Die Nutzererfahrung einer Website ist entscheidend und User setzen eine gute Website voraus. Wenn diese auf mobilen Endgeräten nicht ordentlich dargestellt wird, zu lange lädt oder den Nutzer nicht begeistern kann, wird dieser sehr schnell wieder abspringen. Das bedeutet ihr habt nicht nur einen Websitebesucher verloren, sondern auch einen potentiellen Kunden und euch zudem noch umsonst die Mühe gemacht gute Inhalte zu erstellen.
Nutzt das Potential einer guten Website! Wir beraten euch gerne. Telefonisch unter 09831 / 879 08 09, per Mail an agentur@korridor.co oder über unser Kontaktformular.