Responsive Webdesign

Möchten Sie, dass Ihr Shop auch bei kleinen Browserauflösungen und mobilen Endgeräten gut aussieht? Dann folgen Sie dieser Anleitung.

Zunächst ein Hinweis: Ich übernehme den Einbau der Dateien nicht. Eine Nachfrage ist garantiert zwecklos.

1. Einfügen einer CSS-Datei und eines Meta-Tags für responsives Webdesign

Die Datei "CSS-Datei für Responsive Webdesign, für alle Themes außer Business" funktioniert mit allen Original-Smartstore-Themes, außer mit dem Theme Business. Sie sollte auch mit eigenen Themes funktionieren, sofern darin nicht die Div-Container im Layout umbenannt worden sind.
Verwenden Sie für das Theme Business die Datei "CSS-Datei für Responsive Webdesign, Theme Business".

Laden Sie die gewünschte Zip-Datei herunter (Rechts >) und speichern Sie sie auf Ihrer Festplatte. Entpacken Sie die Zip-Datei.

Importieren Sie die css-Datei darin in den Medienmanager Ihres Projekts. Dabei erhält die Datei eine ID, diese sehen Sie unten rechts. Merken Sie sich diese ID.
Gehen Sie zu Setup > Webservices. Legen Sie mit dem Button "Neu" einen neuen Service an. Machen Sie oben einen Punkt bei "Dokumentkopf" und schreiben Sie dies in das Textfeld (ohne die Leerzeichen beim @):

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="@ media:X @" type="text/css"//>

Ersetzen Sie das X mit der ID Ihrer Datei. Schließen Sie das Fenster mit OK.

ODER

Fügen Sie den Inhalt der Datei in die Datei smartstore.theme.css Ihres eigenen Themes ein, einfach unten dran hängen.
Fügen Sie außerdem den obengenannten Meta-Tag in einen neuen Webservice ein, Punkt bei "Dokumentkopf".

Selbstverständlich können Sie Ihre eigenen Änderungen hinzufügen.
Sie können den Effekt schon in der Vorschau testen, indem Sie das Vorschaufenster kleiner ziehen.


2. Aktivierung des GZip-Staging

Aktivieren Sie die gzip-Funktion in Optionen > Veröffentlichung > GZip-Staging aktivieren. Hiermit werden komprimierte gz-Dateien erstellt. Diese Einstellung wirkt sich nur in der Edition Ultimate aus.


3. Einfügen von Code in einer .htaccess-Datei

Laden Sie die Zip-Datei mit der htaccess-Datei (Rechts >) herunter und entpacken Sie diese. Laden Sie die Datei darin mit einem FTP-Programm auf Ihren Server in das oberste Shopverzeichnis und benennen Sie die Datei dann zu .htaccess um, indem Sie die Endung .txt entfernen.
Falls schon eine .htaccess-Datei vorhanden ist, laden Sie diese herunter und fügen Sie den Code aus der txt-Datei unten in der .htaccess-Datei ein. Dann laden Sie die Datei wieder hoch.

Diese Datei prüft, ob die Funktion gzip und/oder deflate auf Ihrem Server vorhanden ist, und aktiviert das Browser-Caching.
Mehr dazu bei Google:
Komprimierung aktivieren
Browser-Caching nutzen

Hier können Sie testen, ob die Komprimierung aktiv ist: http://www.gidnetwork.com/tools/gzip-test.php


Haben Sie alle Änderungen durchgeführt und den Shop erstellt und hochgeladen, können Sie das Ergebnis mit diesen Google-Tools testen:
PageSpeed Insights
Test auf Optimierung für Mobilgeräte

Responsive-Datei einfügen

Responsive-Datei einfügen
Importieren Sie die css-Datei in Ihren Medienmanager und merken Sie sich die ID unten rechts.

Webservice anlegen

Webservice anlegen
Legen Sie unter Setup > Webservices einen neuen Webservice an und fügen Sie den Metatag und den Link zur css-Datei ein, indem Sie die gemerkte ID einsetzen.

GZip Staging aktivieren

GZip Staging aktivieren
Die Einstellungen für das Aktivieren des GZip Staging finden Sie oben links bei den Werkzeugen.



Klicken Sie hier, um den Google-Button zu sehen und zu benutzen
Facebook

Klicken Sie hier, um das Facebook-Plugin zu sehen und benutzen zu können.