Türchen 22: Mobile Themes in Magento

Das Mobiltelefon ist in der heutigen Zeit fast nicht mehr wegzudenken und wurde über die letzten Jahre hinweg zu einem festen Bestandteil des täglichen Lebens vieler Menschen. Im Zuge der rasanten technologischen Entwicklung und der zunehmenden Verbreitung von internetfähigen, mobilen Endgeräten entwickelte sich einhergehend neben dem klassischen Bereich des E-Commerce auch der Bereich des Mobile Commerce. Aktuelle Studien zeigen, dass heutzutage bereits 28% der mobilen Nutzer auch schon mobil einkaufen - Tendenz stark steigend. Dennoch wird das Thema Mobile Commerce von vielen Händlern immer noch sehr stiefmütterlich behandelt. In diesem Artikel wollen wir deshalb die Möglichkeiten mit Magento detaillierter behandeln.

Auch Magento ist das Potential des Mobile Commerce nicht verborgen geblieben, weshalb sie sich schon relativ früh Gedanken und entsprechende Lösungen bereitgestellt haben. Zum einen wurde schon relativ früh ein mobiles Template mit ausgeliefert haben. Leider wurde dieses von Magento anfangs eher etwas stiefmütterlich behandelt und vernachlässigt. Seit Version 1.7 liefert Magento nun jedoch ein komplett überarbeitetes mobiles HTML5 Template aus. Zusätzlich dazu bietet die Magento-Produktpalette seit September 2010 auch die Möglichkeit anhand des eigenen Produktkataloges eine native App für diverse Plattformen zu erstellen und den Kunden in den jeweiligen Marketplaces bereitzustellen. Gestaltet und entwickelt man in einem Kundenprojekt ein Design von Grund auf neu, bietet sich hier auch die Möglichkeit ein Responsive Webdesign zu erstellen. Dies bedeutet, den grafischen Aufbau und die Strukurierung der Seitenelemente unter Berücksichtigung der Anforderungen der zu betrachtenden Endgeräte zu gestalten und umzusetzen.

Native App

Mit Magento ist es möglich, aus dem Administrationsbereich heraus jeweils eine native App für das iPhone, das iPad und/oder das Android-Gerät zu erstellen. Das Modul für das Anlegen und Konfigurieren einer App wird bereits von Haus aus mit Magento mitgeliefert und ist kostenfrei. Es fallen hier jedoch Kosten für die Generierung und Einreichung der App in den jeweiligen Marketplaces an Allerdings übernimmt Magento an dieser Stelle den kompletten Einreichungsprozess und noch viele andere Vorgänge:

rr_bild1-650x288

Alle Informationen rund um das Thema “Magento Mobile” finden Sie unter http://www.magentocommerce.com/product/mobile

Mobiles Template

Wie eingangs schon erwähnt liefert Magento standardmäßig ein optimiertes Template für mobile Endgeräte mit, welches Sie bequem im Administrationsbereich aktivieren und testen können.

Gehen Sie hierzu im Administrationsbereich zu System -> Konfiguration -> Allgemein -> Design und fügen Sie im Abschnitt Themes eine neue Ausnahme hinzu. Um möglichst alle mobilen Webbrowser hiermit abfangen zu können, tragen Sie im Feld Passender Ausdruck bitte folgenden Wert ein:

iPhone|iPod|BlackBerry|Pre|Palm|Googlebot-Mobile|mobi|Safari Mobile|Windows Mobile|Android|Opera Mini|mobile

Im Feld Betrag muss nun noch der Namen des entsprechenden Magento-Templates angegeben werden. Um das Standardmäßig mitgelieferte Design zu verwenden müssen Sie hier nun dei Eingabe “iphone” tätigen. Sollten Sie das mobile Magento-Design anpassen wollen, finden Sie die entsprechenden Layout-Dateien unter app/design/frontend/default/iphone/ sowie die Skin- Dateien unter skin/frontend/default/iphone/.

Magento selbst ist jedoch nicht der einzigste Hersteller von mobilen Templates auf dem Markt. Exemplarisch möchte ich an dieser Stelle noch folgende Lösungen vorstellen:

rEvolution iPhone Theme for Magento” von aheadWorks

Das “rEvolution iPhone Theme vor Magento” erkennt automatisch ob der Kunde mit einem iPhone, iPad oder Android-Gerät auf den Shop zugreift und unterstützt derzeit Apple iOS 6, Windows Mobile, Android sowie Blackberry OS 6. Sollte man auch bereits andere Erweiterungen von aheadWorks nutzen ist hier ein paar davon auch eine entsprechende Unterstützung geben. Das Theme setzt ausschließlich HTML, CSS und JavaScript ein.

Alle weiteren Informationen und Features rund um das Theme finden Sie unter: http://ecommerce.aheadworks.com/magento-extensions/iphone-theme.html

Magento RED Mobile Theme” von RedLightBlinking
Das “Magento RED Mobile Theme” basiert vollständig auf HTML5 und jQuery Mobile und ist derzeit für iPhone, Android, Blackberry, Palm und Windows Mobile optimiert. Das Modul ist so aufgebaut, dass ein Kunde automatisch zu der Mobilen Website umgeleitet wird, sollte er mit einem mobilen Endgerät die Seite betreten.

Alle weiteren Informationen und Features rund um das Theme finden Sie unter: http://www.redlightblinking.com/store/magento-mobile-themes.html

Responsive Webdesign

Responsive Webdesign, zu deutsch “reaktionsfähiges Webdesign” stellt Webentwickler und Webdesigner vor neue Herausforderungen, da man sich vom klassischen Design mit fixen Breiten lösen muss und sich mehr auf die Flexibilität des Webs rückbesinnen muss. Denn die Geräte, mit denen wir Websites und Online-Shops besuchen, werden immer vielfältiger und unterschiedlicher, z.B. in Bezug auf die Bildschirmgröße.

Ziel des Responsive Webdesign ist, dass ein Kunde jedes Mal wenn er den Online-Shop besucht eine für sein Gerät passende Version der Website angezeigt bekommt und dabei je nach Bildschirmgröße die Inhalte auch passender strukturiert, hinzufügt oder auch weggelassen werden. Während man bei großen Bildschirmauflösungen, z.B. Notebook, mehr Inhalte auf der Website unterbringen kann, muss man bei kleineren Bildschirmauflösungen, z.B. iPhone, das Design sinnvoll entschlacken und reduzieren, damit die Seite nicht überladen wirkt und der Kunde die Seite wieder verlässt.

Auch im Bereich Magento gibt es bereits mehrere Ansätze zu dem Responsive Webdesign. So wurde beispielsweise auf einem “Magento Hackathon” (bitte Verlinken auf http://www.magento-hackathon.de/) von einem Team ein Responsive Webdesign Theme für Magento erstellt. Sie finden es auf Github unter folgender URL: https://github.com/magento-hackathon/magento-responsive-theme

Den Herstellern von kommerziellen Magento Themes ist das Potential des Responsive Webdesigns ebenfalls nicht verborgen blieben. Ich möchte deshalb exemplarisch einmal zwei kommerzielle Magento Themes vorstellen, welche bereits von Haus aus “responsive” sind:

Fazit

Sie sehen, dass Sie gerade mit einem mobilen Template oder einem responsive Design relativ schnell vielversprechende Ergebnisse erzielen können und Kunden auch im mobilen Webbrowser ein besonderes Einkaufserlebnis in Ihrem Online-Shop bieten können. Letztendlich nutzt aber auch das beste mobile Template nichts, wenn Ihre Kunden primär über einen Webbrowser an einem PC/Notebook einkaufen. Es sollte deshalb unabdingbar sein, entsprechende Webanalyse-Tools im Einsatz zu haben um das Kundenverhalten und die technischen Gegenbenheiten bei Ihren Kunden zu analysieren um sich anschließend Rückschlüsse ziehen zu können und ggf. die eigene, mobile Strategie entsprechend anzupassen.


Ein Beitrag von Rieker Rouven
Rieker's avatar

Rouven Alexander Rieker (@therouv) beschäftigt sich seit vielen Jahren professionell mit PHP, MySQL, Magento und dem Zend Framework. Magento setzt er schon seit einer der ersten Versionen ein. Er hat diverse Module für das Shop-System entwickelt und ist Autor mehrerer Bücher und Artikel zum Thema Magento. Rouven ist Gründer und Geschäftsführer der ITABS GmbH.

Alle Beiträge von Rieker

Kommentare
Alex Song am

Ich habe in meinem Blog auch einen ausführlichen Vergleich der Lösungsansätze veröffentlicht. Hier sind auch Web-Apps inbegriffen: http://cmsideas.net/magento-mobile-theme.html

Gruß, AlexSong

RWD vs. Web-Apps: Gibt es einen Königsweg für Mobile Commerce? | Shop->Tech->Blog am

[…] und Tablets direkt an dieses Theme weitergeleitet werden. Näheres dazu findet sich im Beitrag Mobile Themes in Magento von Rouven […]

Uwe am

Schöne Übersicht um einen ersten Eindruck zu gewinnen. Unzählige Agenturen rennen mir nämlich zur Zeit die Bude ein, um unseren Shop "mobilfähig" zu machen.

Alexander am

Hallo Rouven,

schöner Beitrag zum Thema Mobile & Magento. In der Auflistung fehlen jedoch noch moderne mobile Lösungen auf Basis von Web-App Technologie. Wir bieten in der Richtung ja z.B. mit http://www.couchcommerce.com eine SaaS Lösung für Magento Shops an.

Ich habe in meinem Blog auch einen ausführlichen Vergleich der Lösungsansätze veröffentlicht. Hier sind auch Web-Apps inbegriffen: http://ringsdorff.net/2012/08/26/online-shop-wissen-mobile-template-vs-native-app-vs-web-app/

Gruß, Alexander

Alexander am

Guter Bericht. Ich verwende bei Magento Zurb Foundation 3 Responsive Framework http://foundation.zurb.com/ ... ist sehr einfach zu verstehen, gibt ausführliche Docs und viele andere schöne Dinge.

Dein Kommentar