Responsive-Shopdesign kontra Subshop-Technologie: Was ist besser?

Die Nutzung von mobilen Endgeräten nimmt weiter zu. Shops müssen daher auf unterschiedlichen Geräten optimal dargestellt werden. Responsive Design ist derzeit ein Trendthema, das vermeintlich die „beste aller Lösungen“ für diese Herausforderung der Ansprache sowohl von stationären PC- als auch mobilen Smartphone-Shoppern darstellen soll.

Das wesentliche Merkmal bei Responsive Design ist, dass die Inhalte einer Shopseite je nach Bildschirmauflösung anders angeordnet sind und Bedienelemente wie beispielsweise ein Menü, aber auch Bilder und Texte in medienangepasster Form bereitgestellt werden.

Wo Licht ist, ist auch Schatten. In diesem Fall die für manche überraschend bittere Erkenntnis, dass Responsive Design eine Reihe Nachteile mit sich bringt. Zwar stehen heute bereits leistungsstärkere neue Technologien für ein schnelleres mobiles Internet zur Verfügung, jedoch ist die tatsächliche Verbreitung und Verfügbarkeit schneller Verbindungen leider immer noch unzureichend und viele Smartphones sind mit langsamen Datenverbindungen ausgestattet. So wird es, realistisch betrachtet, auch noch einige Jahre bleiben. Die mobile Version eines heute erstellten Shops muss sich also an den heute aktuellen Technologien orientieren. Aufgrund der häufig langsamen Übertragungsgeschwindigkeiten mobiler Endgeräte müssen daher in einem Responsive Design einige spezielle Punkte beachtet werden. Beispielsweise gilt es, etliche Inhalte zusätzlich auch in weniger datenintensiven Formaten bereitzustellen.

Weitere Hindernisse sind zudem der höhere Zeit- und Kostenaufwand für den Entwurf und die Erstellung der ineinander überfließenden Designs und für die an die unterschiedlichen Bildschirmauflösungen angepassten Inhalte.

Viel Programmier- und Testaufwand

Wer nicht negatives Ranking bei den Suchmaschinen provozieren oder Käufer durch extreme Wartezeiten aus dem mobilen Shop jagen möchte, benötigt für ein überzeugendes Kauf-Erlebnis eine aufwendig zu erstellende und zu testende Steuerung des Ladeverhaltens einer Shop-Seite. Gerade der Testaufwand für Responsive-Shops darf nicht unterschätzt werden; pauschal lässt sich sagen, dass er um ein Vielfaches höher liegt als bei klassischen Webshops. Hatte man es früher mit einer überschaubaren Zahl von Bildschirmauflösungen und Browserversionen zu tun, ist die Vielfalt mobiler Endgeräte mittlerweile enorm. Der Sammelbegriff „mobiles Endgerät“ täuscht zudem darüber hinweg, dass die User Experience auf dem Tablet anders ausfällt als auf dem Smartphone. Auch die Erwartungshaltung des stöbernden Kunden beim „Couch-Commerce“ via Tablet ist eine andere als beim zielstrebigen Einkauf vom Handy aus: Weil das Tablet eine größere Bilddarstellungen und mehr Textinfos ermöglicht, wird mancher Tablet-Kunde diese auch erwarten. Er muss also eine „Tablet-taugliche“ Darstellung zu sehen bekommen.

Durch diese und noch einige andere Punkte explodieren in Responsive-Designprojekten oftmals die Zeiten für die Erstellung eines Shops. Die Erfahrung hat gezeigt, dass sich die Arbeitszeit im Vergleich zu früher durchaus auf das Zwei- und sogar Dreifache erhöhen kann. Damit bewegt man sich bei komplexen Shops schnell in Regionen, die für mittelständische Händler unwirtschaftlich sein könnten. Denn mit den Kosten für die einmalige Einrichtung des Responsive-Shops ist es nicht getan. Auch spätere Update- und Pflegearbeit am Design und den Inhalten wird  aufwendiger. Für so manche Projekte ist daher eine kreative und intelligente Lösung für einen Ausweg aus diesem Aufwands-Dilemma gefragt.

Nicht alles auf eine Karte setzen

Ein Ansatz für eine effizientere Lösung kann es sein, nicht auf die „eierlegende Wollmilchsau“ eines einzigen, komplett responsiven Shopdesigns zu setzen, sondern die Erstellung von zwei unabhängigen, getrennten Basislayouts vorzunehmen: ein großformatiges Layout mit den heute gewünschten spektakulären Großansichten für die Endgeräte mit größeren Bildschirmauflösungen und stationärer Internetanbindung, also in der Regel Desktop-Geräte und gute Tablets. Und ein zweites, responsives Layout für kleinere, mobile Geräte mit datensparsamer angepassten Bildern und Inhalten. Damit ist die erste Aufwandsersparnis allein durch das intelligente Konzept geschafft. Denn bei keinem der beiden Layouts muss ein Kompromiss eingegangen oder Rücksicht genommen werden, ob der fließende Übergang zwischen den beiden optimalen Designvarianten überhaupt möglich ist oder wie er praktisch umgesetzt werden könnte, denn es gibt gar keinen Übergang.

Im mobilen Layout wird sinnvollerweise, bedingt durch die Fülle unterschiedlich großer Endgeräte, ein Responsive Design erstellt. Allerdings ist dieses dann, hier liegt die zweite Aufwandsersparnis, einfacher umzusetzen, da im Wesentlichen nur noch Inhalte verkleinert oder vergrößert dargestellt werden, jedoch kaum noch echte Layoutanpassungen notwendig sind. Das Layout für Kunden, die von einem Desktop-, Laptop oder modernen Tablet auf den Shop zugreifen, muss dagegen aufgrund der größeren Darstellungsfläche, wenn überhaupt, nur in sehr geringem Umfang responsive programmiert werden, was die Arbeitszeit für die Erstellung deutlich reduziert. Für Händler, die bereits einen Onlineshop betreiben, heißt das „als Sahnehäubchen“: Der bestehende Webshop kann zunächst weitgehend beibehalten werden, der mobile Shop in Responsive-Technologie kommt noch dazu. Anstatt den gesamten Shop umzuprogrammieren, was stets auch das Risiko von Nichterreichbarkeit in Übergangsphasen mit sich bringt, muss er nur erweitert werden – auch hier liegen Zeitersparnis und Qualitätsgewinn auf der Hand.

Damit ein solches Konzept funktioniert, muss der Shopserver erkennen, ob der Besucher von einem stationären oder mobilen Gerät aus zugreift und welche Anzeigegröße vorhanden ist. Diese Erkennungstechnologie klärt der Händler vorab mit seinem Shophoster (oder bei Eigenhosting mit seiner IT-Abteilung) ab. Am einfachsten ist der Ablauf, wenn der Händler ein Software-as-a-Service-Shopsystem nutzt, das solche Erkennungen bereits bietet. Bei einem solchen Shopsystem ist der Hersteller der Software zugleich für den Betrieb der Shopserver verantwortlich. Damit kann er nicht nur die entsprechenden Weichen für Shopbesucher stellen, sondern den Code der Software auch für seine Serverumgebung maßschneidern. Dies trägt zusätzlich zur Verkürzung der Ladezeiten von klassischen und mobilen Shops bei, was auch von Suchmaschinen honoriert wird.

Subshops: benutzer- und SEO-freundlich

Hier gibt es nun eine Technologie, die das oben skizzierte Konzept von zwei parallelen Shop-Layouts auf besondere Weise unterstützt: die Subshop-Technologie. Wird diese eingesetzt, können auch noch die textlichen und sonstigen Inhalte der einzelnen Subshops von vornherein gezielt angepasst und exklusiv für den jeweiligen Subshop bereitgestellt werden, worin ein weiterer massiver Vorteil liegt.

Denn dadurch entfällt die für Suchmaschinen nicht unbedingt optimale Bereitstellung teilweise gleicher Inhalte in mehreren Varianten auf einer einzigen Seite, zum Beispiel eines Langtextes und eines Kurztextes oder eines Bildes sowohl in Groß- als auch Kleinformat. Es entfällt auch das aufwendige dynamische Nachladen unterschiedlicher Inhalte zur Laufzeit im Browser des Käufers und auch noch sämtlicher Testaufwand dafür.

Von Vorteil ist ein solcher Lösungsansatz sowohl für einsprachige Shops als auch für Shop-Plattformen in einer Internationalisierungsstrategie. Denn in der Subshop-Architektur sind der Zahl der Subshops keine Grenzen gesetzt. Für jede Sprache muss lediglich noch vom deutschen Desktop- und Mobil-Shop eine Sprachvariante abgeleitet werden. Workflows werden dadurch einfacher und transparenter, der gesamte Prozess von Erstellung und Test schneller und wirtschaftlicher. Auch die Einbindung weiterer Vertriebskanäle, etwa Filialen, im Rahmen eines Multichannel-Konzepts ist mit der Subshop-Technologie und Anbindung der Warenwirtschaft möglich.

 Fazit

Eine weitere Zunahme der zum Shoppen genutzten mobilen Geräte ist sicher. Die Datenübertragungsraten für mobile Geräte bleiben auf absehbare Zeit bei vielen Käufern immer noch relativ langsam. Vorwiegend stationär genutzte Geräte wie PCs und Tablets weisen immer noch den höchsten Online-Käuferanteil auf. Fasst man diese Fakten zusammen, ist der Schluss zu ziehen, dass es heute für gute Umsätze im Online-Vertrieb unerlässlich ist, sowohl stationäre als auch mobile Geräte mediengerecht optimiert zu bedienen. Die Umsetzung eines Shops für sämtliche Zielgeräte allein mit Responsive Design ist ein möglicher Weg für dasjenige Unternehmen, das bereit ist, die Aufwände in Bezug auf Konzeption, Designentwurf, Umsetzung, Test und spätere Pflege zu tragen und insbesondere auch einen Spezialisten an der Hand hat, der die Ladezeitoptimierungen sehr gut beherrscht. Ein effizienterer Weg bei der Erstellung einer modernen Online-Vertriebsplattform kann in etlichen Projekten aber die intelligente Synthese des Subshop-Konzepts mit Responsive Design sein. Solche Subshop-Konzepte verbinden dabei Vorteile auf mehreren Ebenen. 1. Sie bieten sowohl stationär als auch mobil mindestens dieselbe oder sogar mehr Usability in Sachen Oberfläche wie ein Ein-Shop-Responsive-Design. 2. Sie ermöglichen, insbesondere im Rahmen eines geeigneten Software-as-a-Service-Konzepts, die spürbare Verkürzung von Shop-Ladezeiten. 3. Sie unterstützen nicht nur Mobile-, sondern auch Internationalisierungs- und Multichannel-Strategien. 4. Man kann mit ihnen die Inhalte eines Shops in besonders suchmaschinenfreundlicher und mediengerechter Weise strukturieren.

Autor: Johannes W. Klinger ist Gründer und Vorstandsvorsitzender von Websale. Das Unternehmen ist seit 1996 am Markt und bietet  Shopsoftware as a Service.

Kommentar: Mobil optimierte Shops – Erfahrungen von Dienstleistern

Wir als Löwenstark empfehlen grundsätzlich ein responsive Design. Im Gegensatz etwa zu einer App ist das responsive mit modernen Shopsystemen wie Magento relativ einfach, schnell und kostengünstig umzusetzen. Der Hauptvorteil ist, dass es keine Barrieren für die verschiedenen Mobilgeräte gibt, die sich im Betriebssystem und der Bildschirmauflösung zum Teil deutlich unterscheiden. Jede Änderung ist sofort auf allen responsiven Varianten verfügbar. Autor: Marian Wurm ist Geschäftsführer bei Löwenstark, einer Fullservice-Agentur für Online-Marketing und Internetlösungen.

Je nach Nutzergruppe und angebotenen Produkten gibt es mehrere Möglichkeiten, den mobilen Kanal zu bedienen. Hier unterscheiden sich oft B2C- und B2B-Anwendungen. Das hängt nicht nur mit den dort angebotenen Produkten zusammen. Die Frage, ob Responsive Design für Shops gegenüber spezialisierter Untershops verwendet werden sollen, ist sowohl eine strategische als auch eine technische. Deswegen sollten sich Unternehmen zunächst überlegen, wer die Benutzer sind, welche Funktionen mit welchen Browsern verwendet werden und welche Geräteklassen von diesen am meisten genutzt werden. Erst in zweiter Linie sollten Händler schauen, ob es effektiver ist das Responsive Design bei einem geplanten mobile first-Relaunch mitumzusetzen oder ein eigener für die mobile Nutzung optimierter Shop eine Zwischenlösung sein kann. Autor: Frank Pientka ist Senior Software-Architekt bei Materna. 

Viele Shopbetreiber stehen vor der Frage, ob sie weiterhin eine getrennte Website für mobiles Einkaufen betreiben wollen oder auf Responsive Web Design setzen sollen. Die Argumente für beide Lösungen sind schnell aufgezählt. Mobile Shops haben den Vorteil, dass sie kompakt und schnell zu programmieren sind. Allerdings führt dies zu einem erhöhten Aufwand, denn sie müssen parallel zu der bereits vorhandenen Website gepflegt werden. Daher schwenken viele Betreiber von Onlineshops auf Responsive Web Design um. Das Ergebnis ist jedoch ein größerer Overhead der Seiten, der von ca. 600 KB durchaus auf 1,2 MB, und damit das Doppelte, anwachsen kann. Im mobilen Umfeld ist das natürlich kontraproduktiv, da sich als Folge die Ladezeiten erhöhen. Durch Front-End-Optimierung (FEO) und eine Adaptive Image Compression lässt sich der Nachteil ausgleichen. FEO und Bildkomprimierung stehen heute auch als Cloud-Service zur Verfügung. Unternehmen sind damit in der Lage, Anwendern eine maximale Performance bieten zu können – unabhängig davon, mit welchem Endgerät sie die auf den Onlineshop zugreifen. Autor: Michael Heuer, Vice President & Country Manager Central Europe (DACH) bei Akamai 

Kommentar: Mobil optimierte Shops – Erfahrungen von Händlern

Wir sind ein absoluter Verfechter von Responsive Web-Design. So haben wir unsere Flash-Sale-Reise-Site tripjoker.de komplett responsive angelegt. Ausschlaggebend für diese Entscheidung waren neben strategischen auch wirtschaftliche Erwägungen. Unschlagbar charmant an Responsive Design ist, dass ich nur eine Version meiner Website für alle Endgeräte brauche. Im immens schnell wachsenden Markt der mobilen Endgeräte ist das ein Konkurrenzvorteil und damit zukunftsorientiert. Es fällt kein aufwendiges Anpassen an verschiedene Plattformen an, das spart uns Zeit und Geld. Und außerdem: Google liebt es! Autor: Roland Fricke ist Geschäftsführer bei beauty24, nach eigenen Angaben „Deutschlands Nr. 1 für Wellness im Netz“

Responsive Design hat den großen Vorteil, dass es zum einen geräteunabhängig funktioniert und man es zum anderen mit nur einer Codebasis zu tun hat. Egal ob Desktop, Smartphone, Tablet, Smart TV oder auch Geräte, von denen wir uns aktuell noch gar nicht vorstellen können, dass auf ihnen mal Webseiten angezeigt werden – überall wird automatisch eine optimierte Version ausgespielt. Zudem müssen Anpassungen und Weiterentwicklungen nur an einer Stelle im Code gemacht werden. Also ein klares Plus in Sachen Flexibilität, Zukunftssicherheit und Wartung. Der initiale Aufwand ist dafür aber relativ groß. Ein eigener Template-Satz („Subshoplösung“) ist dagegen schneller und einfacher zu realisieren. Entsprechend sind auch die Kosten dafür geringer. Oft werden als weiteres Plus die schnelleren Ladezeiten bei einer solchen Lösung angeführt. Diesen Punkt würde ich jedoch in Frage stellen, sofern man beim Entwickeln einer responsiven Lösung den Aspekt Performance von Anfang an im Fokus hat. Nachteile einer Subshoplösung sind, dass man jede Änderung am Frontend-Code an mindestens zwei Stellen machen muss und man immer neuen Geräten, Bildschirmgrößen, Auflösungen „hinterherhechelt“. Fazit: Responsive Design entspricht eher der flexiblen Natur des Web, mittel- bis langfristig ist das meines Erachtens der richtige Weg. Ein eigener Template-Satz ist aber sicher für viele Shopbetreiber die pragmatischere, schnellere Lösung. Autor: Dirk Weimar ist IT-und Webdesign-Leiter bei Design 3000, einem Onlineshop für Design und ausgefallene Geschenkideen.