share

mobile Commerce: responsive Webdesign versus mobile Template

Auf dem Weg zur OXID Commons ist es Zeit, sich Gedanken zu den unterschiedlichen Themen der letzten Wochen zu machen. Einen Auszug möchte ich hier gerne näher ausführen. Was unser Team in letzter Zeit sehr beschäftigt hat, war das Release der neuen Version unseres mobile Templates für den OXID eShop – OXMOB 2.0 steht zum Download bereit.

Wer im Forum hin und wieder mitliest und die Diskussionen der letzten Wochen verfolgt hat, dem ist sicher nicht entgangen, dass das Thema „responsive Webdesign (RWD)“ in Communitys heiß diskutiert wird. Soweit ich das überblicke, stehen derzeit drei entsprechende Templates zur Verfügung, die diesen Ansatz für OXID verfolgen. Auf der anderen Seite gibt es zwei mobile Templates – sowohl das bereits erwähnte OXMOB als auch das von der Agentur DigiDesk entwickelte mo4free.

Die Fragen, die sich aufdrängen:

  • Wann nehme ich was?
  • Wo sind die Unterschiede?

Responsive Webdesign – ein Template für alle Fälle

Wer seinen Shop heute neu gestaltet oder überarbeitet, sollte einige Aspekte beachten. Die unterschiedlichen Größen und Auflösungen der Monitore und Endgeräte nehmen stetig zu. Der Markt wird kleinteiliger. Die Retina Displays von Apple bringen einen weiteren Aspekt ins Spiel, der sich hier mit einsortieren lässt.

Bei der Umsetzung einer responsiven Variante entstehen zu Beginn zusätzliche Aufwände: In der Designphase müssen alle unterschiedlichen Versionen durchdacht und gestaltet werden. Bei der Umsetzung müssen die Breakingpoints (die Stelle, an der die Elemente neu angeordnet werden) korrekt gesetzt und die unterschiedlichen CSS-Eigenschaften gecodet werden. Diese lassen sich zum Teil durch die Verwendung der Responsive Frameworks wie Foundation, Twitter Bootstrap oder andere mindern. Ein fertiges Template, auf dem man aufsetzen kann, kann den Entwicklungsaufwand nochmals reduzieren.

Belohnt wird man dadurch, dass nur ein Template gepflegt werden muss und dem User quasi ohne Zusatzaufwände alle Funktionen zur Verfügung stehen.

Der Nachteil: Wer heute schon einen Shop hat und das Desktop-Template so belassen möchte, ist gezwungen, dieses dennoch komplett zu überarbeiten.

mobile Template – Spezialist für mobile Endgeräte

Im Gegensatz zum Allrounder wird beim mobile Template eine speziell für die mobilen Endgeräte optimierte Seite ausgeliefert. Auch hierbei entstehen zusätzliche Aufwände bei der Gestaltung und Umsetzung. Diese können jedoch unabhängig von der Hauptseite vorgenommen und auch nachträglich implementiert oder angepasst werden, ohne die Desktop-Version zu beeinflussen.

Im mobile Template werden nur die mobil benötigten Elemente übertragen, wodurch das zu übertragende Datenvolumen deutlich sinkt. Im Vergleich zu einem Standard Azure mit 9,8 KB auf der Startseite kommt zum Beispiel OXMOB 2.0 mit 4,6 KB Daten aus. Etwas, das auf einem Desktop mit schneller DSL-Verbindung keine Rolle spielt, gerade aber bei langsameren Verbindungen unterwegs wesentlich zum Tragen kommt.

Weiterer Aspekt: Gezieltes Einschränken ist nicht nur beim Datenvolumen wichtig, sondern auch, wenn man die Conversion verbessern möchte. Betrachtet man die Anforderung an einen mobilen Checkout, so ist es noch viel schwieriger, die User hier zum Kaufabschluss zu bringen. Eine Möglichkeit bietet die Einschränkung der Pflichtfelder im Checkout oder die gezielte Angabe des Input-Types (trifft natürlich auch auf die responsive Lösung zu), dies erleichtert dem User die Eingabe der Daten durch das automatisch angepasste Tastaturlayout.

Des Weiteren lassen sich zum Beispiel einige Zahlarten ausschließen, die sich auf mobilen Endgeräten keiner großen Akzeptanz erfreuen. Denn was nützt die beste mobil optimierte Seite, wenn sich die Seite zum Abschluss des Payments nicht vernünftig bedienen lässt.

Doch nicht nur durch Reduktion der Funktionen lässt sich die Seite verbessern. Gestensteuerungen zum Bedienen der Slider, zum Browsen zwischen den Bildern und Artikeln einer Kategorie ermöglichen den Usern ein einfaches Navigieren durch die Seite.

Die Conversion Optimierungen lassen sich hier viel gezielter angehen und umsetzen – auch wenn dies unter Umständen mit dem Aufwand eines zusätzlichen Templates verbunden ist.

Fazit

Ich rate allen, die einen Relaunch ihres Shops angehen, sich mit ihrer Agentur über das Thema Responsive-Lösung zu unterhalten. Die unterschiedlichen Bildschirmgrößen lassen sich so am besten angehen und die Frage „auf welche Bildschirmgröße sollen wir optimieren“ ist nicht mehr zeitgemäß.

Unabhängig davon kommt der, der ernsthaft Verkäufe auf Smartphones erzielen möchte, nicht an einer separaten mobilen Lösung vorbei. Touch-optimierte Steuerung, reduziertes Datenvolumen und eine vereinfachte Bedienung sind wesentliche Merkmale für den mobilen E-Commerce. Im Idealfall besteht das mobile Template wiederum aus einer responsive Lösung, die Smartphone und Tablet individuell bedient.

Joscha Krug ist Gründer und Geschäftsführer der marmalade GmbH aus Magdeburg. Mit seinem stetig wachsenden Team realisiert er schon seit 2009 E-Commerce Projekte mit OXID eShop und Shopware. Er ist Autor der beiden OXID Bücher, erschienen bei o'Reilly.

2 Kommentare zu:

mobile Commerce: responsive Webdesign versus mobile Template

  • Olivia

    Hallo

    Vielen Dank für den interessanten Beitrag.
    Nun frag ich mich, ist es auch möglich das Datenvolumen bei einer responsive-Website zu reduzieren?
    Wenn ja, gäbe es da Websites bei denen dies bereits umgesetzt wurde?

    Vielen Dank für die Rückmeldung.

  • Joscha Krug Artikelautor

    Hallo,
    Frontend-Performance ist ein großes Feld, dass sich so pauschal nicht beantworten lässt. Welchen Shop betrieben Sie den? Dann können wir gerne darauf schauen und Tipps geben.

  • Kommentare geschlossen.