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.

Hat Dir der Beitrag gefallen?

Wenn Du Fragen oder Anmerkungen zu diesem Beitrag hast, dann starte einen Kommentar. DANKE für Dein Feedback!