Smartphone Web-Apps entwickeln – Den M-Commerce Profis bei MoVendor über die Schulter geschaut
Kommentare

Kaum eine Standard-Shopsoftware bietet von Haus aus die Funktionalität, Besucher mit Smartphones zu erkennen und ein optimiertes Frontend dafür zu verwenden. Christian von Appen von MoVendor beschreibt, wie die mobilen Shopping Web-Apps von MoVendor entstanden sind und was diese Web-Apps im Vergleich zu einfachen mobilen Templates auszeichnet.

Wer eine umfangreiche Web-App für Smartphone-Webbrowser entwickelt, steht oft vor ungeahnten Herausforderungen bei der Darstellung auf verschiedenen Smartphone-Webbrowsern. Auch das gewünschte Look-And-Feel einer App und schnelle Ladezeiten im mobilen Netz sind Aspekte, die bereits bei den Vorüberlegungen beachtet werden sollten. Frei verfügbare Frameworks wie Sencha Touch oder jQuery Mobile können dabei nicht nur eine einheitliche Darstellung gewährleisten, sondern liefern auch zahlreiche Funktionen für die Bedienung oder das Nachladen von dynamischen Daten.

Shopping-Apps stellen Entwickler vor spezifische Herausforderungen.
Entscheidung für jQuery Mobile

Im Fall von MoVendor wurde Wert auf eine agile und flexible Entwicklung gelegt, da neben der Standard SaaS-Lösung mit einheitlichem Shopdesign auch individuelle Projekte für einzelne mobile Shops umgesetzt werden. Dies beeinflusste die Entscheidung bei der Wahl eines geeigneten Frameworks zugunsten von jQuery Mobile. Das auf jQuery aufbauende Framework ließ sich von den Entwicklern bei MoVendor mit minimalem Einarbeitungsaufwand einsetzen und kann dank der großen Community mit einer breiten Kompatibilität und ständiger Weiterentwicklung punkten.

HTML, CSS & JavaScript

Das Frontend für die mobile Shopsoftware wurde einfach in HTML bzw. CSS definiert und lässt sich auch ohne JavaScript Kenntnisse zeitnah an die Wünsche eines Shop-Betreibers anpassen. Einige mobile Frameworks setzen die Konfiguration einer Anwendung in XML oder mit komplexen JavaScript Definitionen voraus, was die Arbeit für reine HTML-Designer erschweren kann. Bei jQuery Mobile wird lediglich ein bestimmter Seitenaufbau mit Header, Content und Footer empfohlen, und gewisse CSS-Klassen sorgen dank JavaScript für die Entstehung des Frontends mit allen UI-Elementen, ansprechenden Menüfunktionen, optimierten Formularen oder Animationseffekten.

Dynamische Inhalte

Dynamische Inhalte werden bei MoVendor zur Server-Laufzeit aus der Datenbank in die HTML-Templates geparsed. Dabei wird Content meist mit Standard jQuery / Ajax Methoden geladen, um das Laden ganzer Seiten möglichst zu vermeiden. Sämtliche jQuery Funktionen stehen auch mit jQuery Mobile zur Verfügung, da letzteres ja auf jQuery aufsetzt. Für das Frontend spielt es prinzipiell keine Rolle, ob im Hintergrund mit Java/JSP-Seiten, PHP, Perl oder anderen CGI Techniken gearbeitet wird.

Ein Framework wie jQuery Mobile bietet zahlreiche Funktionalitäten, die beim Erstellen „mobiler Seiten“ in HTML5 nicht gegeben wären. Trotzdem wurden für die mobilen Shopping Web-Apps von MoVendor einige Erweiterungen selbst entwickelt.

Tipps

Hier ein paar Anregungen für Funktionen, die in den Web-Apps von MoVendor eigens entwickelt wurden, um die Darstellung und Bedienung noch etwas zu verbessern:

  • Viele Shopping Web-Apps zeigen in einer gekachelten Produktübersicht einen breiten rechten Rand, weil die Breite der Elemente fix ist und sich nicht für die genaue Bildschirmbreite anpasst. Hier wurde von MoVendor dafür gesorgt, dass sich solche Elemente mit einer optimalen Breite auf die Seiten verteilen.
  • Bei Produktfotos verwenden einzelne Onlineshops je nach Art des Sortiments entweder Hochformat- oder Querformat-Bilder. MoVendor berechnet zur Laufzeit anhand der Breite dieser Bilder, wie viele Artikel idealerweise pro Zeile dargestellt werden, anstatt die Breite pro Artikel vorher festzulegen.
  • Für Produktbilder und Teaser werden unterschiedliche Größen vorgehalten, damit eine gute Darstellung je nach Displaygröße ermöglicht wird. Teaser können bei MoVendor auch in ganz unterschiedlichen Formaten einzeln hinterlegt werden, damit je nach Displayformat eine wirklich optimierte Version zur Verfügung steht.
  • Eine weitere interessante Erweiterung sorgt für gefühlte Lichtgeschwindgkeit beim Laden der Seiten in der Web-App: Die wichtigsten Seiten werden von den MoVendor Web-Apps im Voraus geladen und bereits im HTML-DOM angelegt, so dass der Wechsel auf diese Seite ohne irgend eine Verzögerung möglich ist.
  • Daraus ergibt sich, das eine Web-App nach dem ersten Ladevorgang theoretisch auch offline funktioniert. Praktisch jedoch haben viele Smartphones nicht viel Speicher zur Verfügung, so dass die Webbrowser bereits bei kleineren Shopping-Sortimenten überfordert wären. Zudem soll das mobile Datenvolumen der Besucher nicht unnötig belastet werden.
  • Nach dem ersten Aufruf werden wichtige Seiten im DOM gecached, um schnell zurück springen zu können. Da die dynamischen Seiten meist via Ajax als POST-Request vom Server geladen werden und somit nicht im normalen Browser-Cache landen, wirkt sich auch diese Optimierung stark auf die gefühlte Ladezeit aus. Auch hierbei sollte man etwas selektiv vorgehen, um den Speicher kleinerer Smartphones nicht mit allen besuchten Seiten zu füllen.
  • Das User-Tracking aller Seiten und Interaktionen spielt für MoVendor eine große Rolle für die Optimierung der E-Commerce Conversion Rate. Werden viele Seiten via Ajax nachgeladen, dann ergibt sich auch eine neue Anforderung für das Tracken dieser Aufrufe. Standardmäßig wurde Google Analytics in MoVendor integriert, wobei selbst die Benutzung einzelner Buttons (z.B. ein Sprung zur PayPal-Express Zahlung oder der Sprung zur Desktop-Version) mit eigenen JavaScript Funktionen registriert wird. Um den Ansichten einiger Datenschützer gerecht zu werden, wurde nebenbei eigens ein schriftlicher Vertrag mit Google zur Auftragsdatenverarbeitung eingeholt.
Fazit

Mit Responsive Design (Stichwort: Mobile First) oder auch mit einfachen mobilen Templates lässt sich bereits eine Menge für die mobilen Besucher optimieren. Geht es jedoch um größere Anwendungen in Form einer Web-App, ist der Einsatz passender Frameworks unbedingt zu empfehlen. Soll je nach Anwendungsfall die User Experience noch weiter optimiert werden, ist noch etwas Einfallsreichtum und Kreativität der Softwareentwickler gefragt.

Christian von Appen ist CTO bei MoVendor. Die Hamburger stellten bereits 2011 eine SaaS-Lösung für mobile Shopping Web-Apps vor, mit der Onlinehändler einen leistungsfähigen mobilen Shop einfach selbst aufsetzen können. Individuelle M-Commerce Lösungen und Beratungsdienstleistungen ergänzen das Angebot von MoVendor.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -