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:
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:
- http://themeforest.net/item/shopper-magento-theme-responsive-retina-ready/full_screen_preview/3139960 (Dank an @nickweisser für den Tweet)
- http://themeforest.net/item/megashop-responsive-magento-theme-/full_screen_preview/3055544