Branche: Nahrungsergänzungen.
Realisiert mit HTML5, CSS. 

Die Standard-Layoutvorlage (Template) von PrestaShop passt sich zwar automatisch an Mobilgeräte an, bringt jedoch einige Nachteile mit sich:

  • Auf der Startseite von PrestaShop angeordnete Banner unterschiedlicher Grösse, führen zu einem verrutschten Layout auf kleineren Bildschirmen.
  • Auf der Startseite von PrestaShop in einer „Gitteransicht“ dargestellte Produkte werden auf dem Handy untereinander angezeigt, was zu unangenehm langen Scroll-Aktionen führt.
  • Die Seitenleiste von PrestaShop wird nicht komplett ausgeblendet und so auf kleinen Bildschirmen in der Hauptansicht angezeigt.
  • Elemente vieler zusätzlich in PrestaShop installierter Plugins machen auf kleineren Handy-Bildschirmen keinen Sinn oder erschweren die Bedienung.
  • Der Kopfbereich von PrestaShop, bestehend aus Menü, Logo und Suchfeld ist auf Mobilgeräten zu lang und Anlass für unnötiges Scrollen.
  • Im Produkt-Text eingefügte Bilder skalieren nicht richtig und werden auf Mobilgeräten abgeschnitten.

Die PrestaShop-Optimierungen auf Tablet und Handy im Detail

Durch Anpassungen an den CSS-Stylesheets von PrestaShop wurden alle o.g. Nachteile beseitigt und die Ladezeit von PrestaShop auf Mobilgeräten zusätzlich erhöht:

  • Das Format und die Auflösung der Banner auf der Startseite der Desktop-Version von PrestaShop wurde so gewählt, dass sich die Bilder auf Tablets automatisch an die Grösse des Bildschirms anpassen. ein verrutschtes Layout gehört somit der Vergangenheit an.
  • Aus der Gitteransicht der Produkte auf der Startseite von PrestaShop wird auf Handy und Tablet ein kompakter, per Touch bedienbarer Slider.
  • Die Seitenleiste von PrestaShop wurde auf die gleiche Weise angepasst: Automatische Skalierung der Inhalte auf dem Tablet und Ausblenden der PrestaShop-Sidebar auf Handys.
  • Die Inhalte der Startseite von PrestaShop wurden auf dem Handy durch kleinere Grafiken und kurzen Texten ersetzt, was ein deutliches Plus an Lesbarkeit und Geschwindigkeit bringt.
  • Der Kopfbereich von PrestaShop wurde auf dem Handy kompakter aufgebaut: Ohne Logo, Menü und Suchfeld sind näher zusammengerückt.
  • Alle unnötigen Elemente von zusätzlichen PrestaShop Plugins wurden ausgeblendet.
  • In den Produkttexten von PrestaShop enthaltene Bilder wurden wurden global über entsprechende CSS-Codes skalierbar gemacht. Ein erneutes Einfügen war somit nicht nötig.
  • Desktop, Tablet und Mobil-Versionen erhalten ein Elevator-Bedienelement, das am Seitenende schnelles Scrollen an den Anfang der Seite erlaubt. So wird die Bedienung von PrestaShop auf dem Handy wesentlich komfortabler.
  • Alle Optimierungen wurde so umgesetzt, dass sich das Layout von PretsaShop an iOS- und Android-Geräte sämtlicher Bildschimgrössen automatisch anpasst.

Zur Live Page geht es hier.