Responsives Templates für Gambio GX3 - Die neueste Generation.

Moderne Templates sind responsive, oder auch sensive genannt. Das heißt, dass Sie für alle Endgeräte ein Farbschema haben und sich das Template den Endgeräten anpasst. Ein mobiles Template "Mobile Candy" ist nicht notwendig. Haben Sie dies bereits installiert, so muss es deaktiviert werden. Doch wie funktioniert das? Bei responsiven Templates werden im CSS-Code sogenannte Breakpoint angelegt. Diese haben je eine bestimmte Größe, orientiert an den gängigen Display-Größen der verschiedenen Geräte. Dadurch kann ein Style angelegt werden, der dann farblich auf allen Geräten gleich ist. Die Herausforderung für dem Webdesigner ist es nun, vor allem für mobile Endgeräte so viele Elemente aus der Desktop-Version auch mobil – sinnvoll – zur Verfügung zu stellen. Es gibt viele responsive Layouts, die etwas „unglücklich“ angelegt sind. Dies zu vermeiden, ist die große Aufgabe. So müssen die Abstände zwischen den Buttons groß genug sein, damit der Benutzer mit dem Finger die Elemente einfach anklicken kann. Alle Elemente müssten also für einer Touch-Bedienung optimal ausgelegt sein. Oft wird so zum Beispiel auch das Menü und die Kategorie-Leiste entweder in der linken oberen Ecke als klickbarer Button verschoben, oder oben unter dem Banner als Links ohne Untermenü dargestellt. Responsive Templates müssen vor der Freigabe den mobilen Google-Test bestehen (https://www.google.de/webmasters/tools/mobile-friendly/). Ist zum Beispiel eine Grafik zu breit, meldet der Test, dass ein Fehler vorhanden ist. Hier sollte man dann nachbessern.

Mobile First

Responsives Template für Gambio
Immer mehr Menschen gehen via Smartphone ins Internet. Je nach Branche kann das bis zu jeder zweite Besucher sein. In China haben viele Menschen gar keinen PC mehr, sondern tätigen allen Vom Smartphone. Auch ein Grund, warum die Geräte immer größer werden. Eine Webseite sollte deshalb auch vorrangig für mobile Besucher ausgelegt werden. Auch Tablets ersetzen nach und nach Notebooks und Desktop-Computer. Diese bieten mehr Platz und haben oft eine ähnliche Auflösung die Desktop-PCs. Dennoch muss auf einer einfachen Touch-Bedienung Wert gelegt werden. Die Umsetzung ohne Zoom ist also erstrebenswert.

Besonderheiten  der angebotenen Templates

Die responsiven Templates basieren auf EyeCandy von Gambio immer in der aktuelle Version. Dabei ist zu unterscheiden, dass im Shop je zwei Versionen angebotenen werden. Die letzte stabile Version, im Moment Version 2.4.x.x und die letzte Version (2.5.x.x.). Sie müssen also wenn die das letzte Master-Update installiert haben, nicht extra die letzten Servicepacks bzw. Updates installieren, um das Template nutzen zu können.

Der Warenkorb wird in den angebotenen Templates 1-spaltig dargestellt. Die Lightbox muss deshalb auch deaktiviert werden, sonst funktioniert zum Beispiel der Warenkorb nicht! Dadurch ist der Kunde nicht von anderen Angeboten abgelenkt.
Generell kann die Startseite oder auch Unterseiten 1-Spaltig dargestellt werden, wogegen andere Seiten dann 2- oder 3-Spaltig dargestellt werden können. In kleineren Größen wie für Tablet und Smartphone verschieben sich die Inhalte der linken (und rechten) Spalte (Boxen) in die mittlere Hauptspalte. Damit dort dann nicht zu viele Informationen vorhanden sind und die Seite einfach nur überfüllt und unübersichtlich wirkt, werden im kleineren Modus nur die wichtigsten Boxen aktiviert.

Hinweis: mich erreichen immer wieder Anfragen, ob die Texte erhalten bleiben, wenn ein Template installiert wird. Natürlich - das Template ist nur die optische Hülle, der Rahmen um den Text. Hier brauchen Sie also keine Bedenken zu haben.


Die Breite ist immer 300px bis 1000px was der Gambio-Standard ist, oder bei einzelnen Angeboten bis 1180px oder 1280px responsive. Eine noch breitere Desktop-Version ist nicht zu empfehlen, da man sonst bei einen durchschnittlichen Computer das Bild nach links und rechts scrollen muss. Das ist nicht benutzerfreundlich (Thema Usability).

Besonderheiten in aktuellen, neuen Angeboten:

Im einigen neueren Angeboten ist ein Multi-Slider mit mehr Funktionen enthalten! Dieser ersetzt den Gambio Teaser-Slider. Die Installation ist sehr einfach gehalten, es müssen nur Daten geladen werden und eine kleiner Eingabe in der SQL-Box innerhalb der Admin-Oberfläsche von Gambio ausgeführt werden. Im Header befindet sich je nach Angebot ein freies Feld für Informationen. Diese können über die Index-Datei im Template integriert werden. Unten rechts befindet sich eine Schaltfläche "Top" um schnell nach oben zu navigieren.  Dies macht es Besuchern leichter, ohne Scrollen nach oben zu gelangen. Zudem ist das gerade für Touch-Displays eine echte Erleichterung. In den Artikeln wurde die Gambio-Eigene Navigation „Nächster – Vorheriger“ gegen einer moderne Pfeil-Navigation ersetzt. Diese Funktion muss in der Konfigurationen von Gambio nur aktiviert werden. Das Logo und der Multi-Slider passt sich an die verschiedenen Ansichten, bzw. Displaygrößen automatisch an.

Was geht nicht gegenüber dem Standard-Template von Gambio?
Sie können über den Style-Editor die Boxen verschieben (außer im Footer), Konfigurationen einstellen, aber keine Farben einstellen! Das übernehmt das Template selbst über CSS-Dateien, die Sie auch selbst bearbeiten können, sofern Sie sich in CSS auskennen.  Alle anderen Funktionen bleiben unberührt.

Weitere Fragen?

Gerne stehe ich per Mail zur Verfügung.