Responsive WebdesignIm Jahr 2013 ist die mobile Nutzung des Internets laut statistischem Bundesamt um 43% im Vergleich zu 2012 gestiegen. In diesem Zusammenhang fällt immer wieder das Schlagwort responsive Design. Wir erklären Ihnen, was responsive Design bedeutet, was mobile Websites und Apps ausmacht und wie man sie zielführend im E-Commerce einsetzen kann.Auch in diesem Jahr scheint dieser Trend nicht abzubrechen: Laut ARD ZDF Onlinestudie nutzen 50% der deutschen Internetnutzer das Netz vorwiegend über mobile Endgeräte.  Beschäftigt man sich mit aktuellen Themen des Webdesigns kommt man unter anderem um das Schlagwort “responsive Design” oder “adaptives Design” nicht herum. Doch worum handelt es sich genau und ist responsives Design vielleicht nur eine Mode-Erscheinung? 

Amazon nutzt responsive Design seit Jahren.

Amazon gilt als der Platzhirsch im Bereich des Online-Shoppings. Schon seit vielen Jahren setzt auch Amazon zum Teil auf responsive Design – und das bevor man es als solches überhaupt bezeichnet hat. Doch was hat es mit diesem responsive Design überhaupt auf sich?

Im klassischen Webdesign geht man davon aus, dass der Besucher die Website mit einem Desktop-PC oder Laptop betrachtet. Dort kann man recht gut diverse Bildschirmgrößen als Standards definieren. Mit der Zunahme der Nutzung von Netbooks und Internet auf Smartphones ist hier ein deutlicher Trend zu immer mehr, immer unterschiedlicheren Bildschirmgrößen zu erkennen. Genau hier setzt responsive Webdesign an. 

Unter responsive Design versteht man eine Website die sich automatisch dem Bildschirm oder/und dem vorhandenen Eingabegerät anpasst. Entsprechend ändern sich dann häufig automatisch die Größen und Anordnungen unterschiedlicher Bereiche und Elemente auf einer Website. Das kann soweit gehen, dass Websites sogar leicht unterschiedliche Anordnungen und Größen von Elementen für horizontale und vertikale Ausrichtung des Geräts unterstützen.

Adaptive Elemente bei Amazon

Um auf das Beispiel von Amazon zurück zu kommen: Wie geht der Online-Riese mit dem Thema um? Ansätze von responsive Wendesign sind dort unter anderem auf der Startseite zu sehen. Besucht man Amazon.de mit einem sehr breiten Bildschirm, bemerkt man schnell, dass das Navigationsmenü sichtbar ist. Besucht man die Website mit kleineren Bildschirmen, ist das Menu erst auf Klick zu sehen. Dieses recht simple Beispiel verdeutlicht sehr anschaulich das Prinzip von responsive bzw. adaptivem Design und wie unaufdringlich dieses sein kann.

Jedes Element auf Funktion und Wirkung prüfen.

Wie man am Beispiel des Schmuckversands kolkmeyer.de sieht, gibt es zahlreiche Elemente die je nach Endgerät bzw. Browserbreite anders dargestellt werden können. Die Navigation wird für Smartphones völlig anders angezeigt als für Desktop-Browser. Teile der Meta-Navigation wie “Benutzerkonto” oder “Wunschzettel” werden auf Smartphones hinter einem eigenen Navigationsicon am oberen Bildschirmrand versteckt. Per Fingertipp klappt das entsprechende neue Untermenü aus. Das Logo hat unterschiedliche Größen genauso wie die sogenannte “Bühne” je nach Endgerät unterschiedlich dargestellt wird.

Responsive Design im Onlineshop kolkmeyer.de

Als “Buzzword” ist reponsive Design aktuell in aller Munde, im Gegensatz zu manch anderem Internet-Phänomen spricht allerdings vieles dafür, dass responsive Design mehr als nur ein Trend ist. Besonders im Hinblick auf Zukunftsfähigkeit von Websites und Onlineshops kann responsive Design eine nachhaltige Lösung sein. Die Entwicklung hin zu mehr mobilen Endgeräten mit unterschiedlichsten Bildschirmgrößen scheint kaum abzubrechen. Es bietet sich daher an mit einer Website möglichst viele unterschiedliche Geräte abzudecken und eine optimierte Darstellung und Nutzung anzubieten.

Responsive Design nutzt Standardtechniken.

Die Technik hinter responsive Design ist keine andere als bei “normalen” Websites auch: HTML und CSS. Responsive Websites benötigen also keine speziellen Server-Setups oder komplizierte technische Voraussetzungen. Mit HTML und CSS setzt man damit auf Technologien, die auch mittelfristig zu den wichtigsten Techniken der Webentwicklung gehören. 

Responsive Design ist als Universallösung mit einem Design für möglichst viele Auflösungen zu sehen.

image_pdfPDFimage_printDrucken