//PrestaShop: Responsive Layout für iPhone, iPad und Co …

PrestaShop: Responsive Layout für iPhone, iPad und Co …

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.

By |2018-02-26T11:28:23+00:002017-05-20|Categories: Projekte|Tags: , |0 Comments

About the Author:

Seit 1993 bin ich als freiberuflicher Softwareentwickler mit den Schwerpunkten Programmierung von Internet- und Crossplattform-Applikationen, sowie als Mediendesigner, IT-Consultant und Dozent tätig. Die Übergänge zwischen diesen Themen sind fliessend. Mein Blog fasst all dies zu einem News Stream zusammen. Viel Spass beim Stöbern! -- Harald

Leave A Comment