Online-Shop mit Responsive Webdesign – Das sollte man beachten

Responsive Webdesign ist eine noch relativ neue Technologie mit der Webseiten sich dynamisch den jeweiligen Bildschirmgrößen der verschiedenen Endgeräte wie Smartphones, Tablets, E-Readern sowie Desktop-Browsern anpassen.

Responsive Webdesign ist eine innovative Technik mit großem Potenzial. Mit einem Template können, plattform-unabhängig, fast alle Gerätetypen unterstützt werden. Das klingt viel versprechend und verheißungsvoll und das ist es auch, da somit die größtmögliche Anzahl von Besuchern und Kunden erreicht werden kann.
Damit das auch alles reibungslos funktioniert, sollte ein Shopbetreiber ein klares Konzept haben was Struktur und Inhalte des Shops betrifft.

Performance eines Online-Shop

Performance, d.h. die Ladezeit einer Webseite, ist mittlerweile ein Ranking-Kriterium für Suchmaschinen und daher auch für reine Desktop-Versionen eines Shop relevant.
Nicht nur Suchmaschinen mögen schnell ladende Seiten – auch ungeduldige Zeitgenossen verlassen schon mal vorzeitig eine Webseite wenn die Ladezeiten zu lang sind.
Bei Responsive Webdesign tritt Performance  besonders in den Fokus. Der Grund dafür liegt in den momentan noch relativ langsamen Internet-Verbindungen bei den meisten Smartphone-Tarifen. Außerdem haben Smartphones schwächere CPUs und geringere Kapazitäten für Arbeitspeicher und Cache.

Responsive Webdesign erfordert ein Umdenken was die Content-Strategie eines Shop betrifft. Überladene Shops mit einer Unmenge an Elementen sollten vermieden werden zugunsten einer ressourcensparenden, schnell ladenden Webseite. Ziel sollte es sein so wenig wie möglich HTTP Requests  zu machen, da Browser nur eine begrenzte Zahl gleichzeitig vom Server laden können.
Daher sollte zuerst überlegt werden welche Inhalte und Elemente wirklich relevant sind und welche verzichtbar.

Produktbilder

Für einen Online-Shop sind gute Produktbilder sehr wichtig. Gleichzeitig bilden diese Bilder den Großteil der herunter zu ladenden Daten. Um diese Last zu minimieren, sollten die Bilder gut komprimiert werden. Oftmals ist eine JPG-Kompression von 60-70% ausreichend für eine gute Bildqualität. Dadurch kann schon eine Menge an Daten eingespart werden.
Bei der Auflistung der Produkte in einer Übersicht sollten nicht zu viele Bilder pro Seite gleichzeitig geladen werden (~ 10-15) sondern auf mehrere Einzelseiten verteilt werden. Dies kann man in der Regel über die Admin eines Shop einstellen.
Auch bei Produktlisten wie Empfehlungen, Bestseller und Kundentipps etc. sollten nicht zu viele Produkte angezeigt werden.
Slideshows, die man auf der Startseite vieler Shops sehen kann, haben oft sehr große Bilder. Um die Last für Smartphones zu reduzieren sollte man diese Bilder mit einer „Responsive-Image-Technik “ für diese Geräte in kleinerer Auflösung übertragen lassen.

Grafiken / Buttons

Grafiken und Icons können einen Shop aufwerten und dem Benutzer Orientierung und Hilfestellung geben. Auch wenn diese Grafiken relativ klein sind, wird für jede einzelne Grafik ein  HTTP request benötigt. Dies kann man vermeiden indem man die Grafiken in einer sogenannten Sprite-Map zusammenfasst, so dass nur eine Grafik geladen werden muss. Eine weitere Möglichkeit sind Icon-Fonts. Damit werden alle Icons als Schriftart in die Webseite eingebettet, was wiederum nur einen  HTTP Request benötigt.

Image-Buttons sollten vermieden werden. Diese Buttons wirken leblos und geben dem Benutzer keinerlei Feedback über seine Aktionen z.B. über Hover-Effekte. Außerdem wird für jeden Button wiederum ein HTTP Request benötigt.

CSS-Buttons sind die bessere Alternative, da hier keine Grafiken benötigt werden. Außerdem lassen sich CSS-Buttons flexibel anpassen an die gegebenen Anforderungen des jeweiligen Gerätes. So kann z.B. ein Button auf dem Desktop eine normale Größe haben und auf einem Smartphone dann größer sein.

Social-Widgets, Bewertungen etc.

Seiteninhalte die von externen Servern geladen werden, wie Kundenbewertungen, Facebook/Google Plus-Widgets etc. verlangsamen den Seitenaufbau und führen zu längeren Ladezeiten. Man sollte überlegen ob nicht auch ein einfacher Link z.B. zu Facebook ausreicht anstatt ein externes Widget zu laden (Facebook-Like).
Wenn man diese Komponenten für unverzichtbar hält, sollten diese nur für Desktop-Browser geladen werden z.B. mit einem Ajax-Call.

Es gibt noch andere Schrauben an denen man drehen kann um die Performance zu verbessern. Die wichtigsten sind:

  • Javascript/CSS-Dateien zusammenfassen/minifizieren
  • Daten per Gzip-Kompression übertragen lassen
  • Expires setzen für die verschiedenen Medientypen

Wenn man einen Online-Shop mit Responsive Webdesign umsetzen möchte, sollte Performance eine hohe Priorität haben. Das man sich in Zeiten von DSL und schnellen Desktop-Rechnern noch um so was kümmern sollte scheint verwunderlich. Da fühlt man sich ein bisschen an die Zeit der Modems erinnert, wo man versucht hat aus jeder Grafik noch ein paar KB herauszuquetschen. Diese Situation ist jedoch, bezogen auf Smartphones mit langsamer Internetverbindung, vergleichbar.

Hier noch einmal die Vorteile von Responsive Webdesign:

  • Bedient alle mobilen Endgeräte (Smartphones, Tablets, Netbooks, E-Reader) sowie Desktop-Browser
  • Eine gemeinsame URL und Code-Basis
  • Seiten können verlinkt oder als Lesezeichen gespeichert werden
  • Seiten können über die mobile Suche gefunden werden
  • Durchgängiges Erscheinungsbild über die gesamte Webseite
  • Geringerer Wartungsaufwand
  • keine Abfrage des User-Agent
  • keine Weiterleitung notwendig
  • keine Gefahr von doppelten Content

 

Ein Gedanke zu „Online-Shop mit Responsive Webdesign – Das sollte man beachten

  1. Jeder Online Shop Designer, weiss dass es nicht einfach ist, einen Online Shop mit Responsive Webdesign aufzubauen. Besonders die Navigation und die Produkdarstellung können hier Probleme bereiten. Daher finde ich diese Tipps nützlich und sinnvoll um als Webshop Designer erfolgreich zu sein.

Kommentare sind geschlossen.