Responsive Mobile First Templates für den Modified Shop

Templates für den Modified Shop

Kostenlos - Responsive - Mobile First Ready

Responsive Mobile First Templates für den Modified Shop


Responsive Template
SpeedTemplate.de präsentiert die ersten besonderen Responsive Templates ihrer Art für den Modified Shop. Die Ersten ihrer Art nicht nur weil besonders Responsive, sondern zudem die ersten und auch einzigen Responsive Templates ihrer Art für den Modified Shop, die auch die Mobile First Kriterien erfüllen. Besonders auch, weil kostenlos!

  • Responsive Webdesign mit RESS Architektur anstelle Bootstrap
  • Geräte abhängiges De-/ Aktivieren zahlreicher Shop Funktionen (Desktop/Tablet/Smartphone)
  • Automatische Bilder Generierung in unendlich verschiedenen Größen je nach Geräteart und Bildschirmgröße
  • Je nach Gerät bis zu 50% weniger Code


Testergebnisse die überzeugen


Responsive Webdesign versus Responsive Webdesign


Responsive Webdesign ist nicht gleich Responsive Webdesign. Ein Ausdruck, der verwundern mag, wo der Markt rund um responsive Templates für den Modified Shop und darüber hinaus glaubhaft machen will, das es bei der Erstellung eines Responsive Templates nur die Eine responsive Lösung geben würde. Ein leidiger Umstand der aus einem Herdentrieb und dem Hype um das Bootstrap CSS Framework entstanden sein mag. Diesem unberechtigten Hype ist es jedoch verschuldet, dass der unbedarfte Nutzer dieser Art Responsive Template in den Glauben versetzt wird er würde damit die formellen Anforderungen an ein Template erfüllt bekommen, um seinen Besuchern modernste Technik anbieten zu können. Es grenzt aber fast schon an einen Aberglauben, dass man mit dieser Art Responsive Template glaubt man würde die von Google aufgestellten Mobile First Kriterien erfüllen. Dass Alles und noch viel mehr eigentlich ganz anders ist, ist kein Geheimnis, sondern nur die Folge von Unkenntnis. Bei Verbrauchern, aber auch bei Anbietern von Templates.

Wenn von einem Responsive Design oder Responsive Template die Rede ist, dann ist diese Bezeichnung maßgeblich durch das CSS Bootstrap Framework geprägt, jedoch bildet beides nur einen optionalen Zusammenhang. Ein konventionell erstelltes Responsive Template lässt sich gänzlich ohne das CSS Bootstrap Framework erstellen, weil die grundlegende Funktionalität für ein sich variabel veränderbares Design durch die Cascading Stylesheet (CSS) Formatierung und sog. Media Queries ermöglicht wird und eben nicht durch das Bootstrap Framework. Ein mit dem Bootstrap Framework erstelltes Responsive Template ist deswegen weder besser noch schlechter als ein ohne Bootstrap erstelltes Template. Käufer oder Nutzer dieser Art Templates haben deswegen auch keinen Vorteil. Genaugenommen führt das CSS Bootstrap Framework sogar zu Nachteilen, weil damit eine nicht unerhebliche Menge an ungenütztem Ballast anfällt, wodurch besonders mobile Geräte benachteiligt werden. Der Vorteil reduziert sich auf denjenigen, der das Bootstrap Framework nutzt und daraus ein Responsive Template erstellt. Der Grund dafür ergibt sich aus der Zusatzbezeichnung "Framework", das stark vereinfacht dargestellt eine Arbeits- und Aufwandserleichterung ermöglicht. Ein mit dem CSS Bootstrap Framework erstelltes Responsive Template bedarf deswegen weniger Zeit und Aufwand, wird dem Verbraucher gegenüber aber so dargestellt, dass dieser damit etwas besonders wertvolles bekommen würde. Wenngleich dies nicht der Fall ist, werden dennoch höhere Preise dafür aufgerufen.

Es wirkt fast als wäre es dem buchstäblichen Hype um das Bootstrap Framework verschuldet, dass der Markt rund um Responsive Templates für den Modified Shop und darüber hinaus nur die Eine Methode zu kennen scheint, obgleich es eben mehr als nur diese Eine besagte Methode gibt. Beide Methoden sind anerkannt und fast zeitgleich vor fast exakt 10 Jahren vom gleichen Author erstmalig beschrieben. Die "RD" Methode, gleich Responsive Design, steht für die allseits bekannte Methode bei der maßgeblich Media Queries verwendet werden, um ein Responsive Template zu erstellen. Die andere nahezu unbekannte RESS Methode steht für "REsponsive Design With Server Side Includes", welches zwar auch Media Queries nutzen kann, aber nicht zwingend und wenn, dann nur optional. Die RESS Methode steht maßgeblich für das Geräte abhängige Ausliefern von Code und zudem für eine Geräte abhängige Bereitstellung von Funktionen, die z.B. aus Platz- oder anderen Gründen nicht gebraucht werden oder sich aufgrund beengter Platzverhältnisse nicht darstellen lassen. Anders als wie bei der RD Methode ist die verfügbare Bildschirmgröße, bzw. Auflösung zwar nachrangig, kann deswegen aber uneingeschränkt eingesetzt werden.

Was sich in der Theorie nur technisch Versierten verständlich erweisen mag, ist auch für den Laien sehr einfach reproduzierbar. Die Unterschiede zwischen RD, also der bekannten Responsive Methode, und der RESS Methode sind nicht wirklich gravierend, aber entscheidend. Beide Methoden verwenden CSS und auch die gleichen CSS Formatierungsangaben für die Formatierung. Findet bei der konventionellen RD Methode ein Aufruf einer Webseite statt, sendet der Webserver u.a. den kompletten CSS Code an den Client und das ungeachtet, ob es sich bei dem aufrufenden Gerät um ein z.B. Smartphone oder ein Desktop Gerät handelt. Durch die unterschiedlichen Platzverhältnisse je nach Gerät muss der CSS Code sämtliche Formatierungsangaben für nahezu alle Bildschirmgrößen enthalten. Dadurch ergibt sich unweigerlich ein oftmals exorbitant hoher Overhead. Das Problem beginnt also schon damit, dass viel zu viele (unbenötigte) Daten übertragen werden müssen. Wäre dieses zu viel an Daten nicht schon schlecht genug, besteht die eigentliche Problematik darin, dass diese Daten auch verarbeitet werden müssen, was Rechenzeit auf Seite des Client beansprucht, die in Folge dessen die Ladezeit und die Zeit bis zum Anzeigen aller Inhalte förmlich ausbremst. Dazu muss man wissen, dass die Verarbeitung von Stylesheet Angaben generell zu den Faktoren gehört, welche den Seitenaubau am größten beeinflussen. Je weniger CSS also umso besser. Dieses Problem beschränkt sich aber nicht nur auf CSS, sondern auf alle zu übertragenden Daten von HTMAL, Javascript, Größe der Bilder bis hin zu Funktionen, die ggf. nicht benötigt werden, weil sich diese Funktionen auf z.B. einem Smartphone nicht abbilden lassen. Nachdem die RD Methode, also das Bootstrap Framework, bzw. CSS keine Programmiersprache ist, reduziert sich die Funktionalität der RD Methode auf einfaches Skalieren und im Bedarfsfall auf Ausblenden. Es sollte deswegen auch für den Laien verständlich sein, dass die RD Methode alles andere als eine effiziente und optimierte Methode ist.

Responsive Webdesign ist aber weit mehr als nur Skalieren und Ein-/Ausblenden. Vor dem Hintergrund, dass weniger einmal mehr Mehr ist, kann die bessere Lösung nur darin bestehen nur den Code zu übertragen, der für das jeweilige Gerät benötigt wird. Dazu braucht es aber keine umfangreiche Programmierung oder gar eine Geräte Datenbank, sondern lediglich 6 Zeilen PHP Code, der in Form eines einfachen SMARTY Plugins zur Verfügung gestellt wird. Wird also eine mit der RESS Methode entwickelte Webseite aufgerufen, weiß der Server welche Funktionen für das jeweilige Gerät aufgerufen werden müssen und generiert auch nur den dafür benötigten Code, beginnend von einer angepassten Datenbank Abfrage über die Bereitstellung aller für die Anzeige benötigten HTML, CSS und Javascript Daten bis hin zu in der Größe angepassten Bilder. Daraus ergibt sich nicht nur eine Entlastung des Web- und Datenbank Servers, sondern eine um bis zu 50% geringere Datenmenge. Weniger Daten bedeuten unweigerlich eine deutlich schnellere Ladezeit besonders für Mobile Geräte. Minimaler Aufwand durch 6 Zeilen Code, aber maximale Wirkung! Alles andere bleibt unverändert, sodass keine zusätzliche Programmierungen an der jeweiligen Software notwendig sind!


Geräte abhängiges De-/ Aktivieren von Shop Funktionen


Ein Template nicht nur für den Modified Shop muss mehr sein als schön und Responsive. Entsprechend dem Prinzip der RESS Methoden enthalten alle kostenlos erhältliche Speed Templates deswegen Zusatzfunktionen, die sich in das Backend des Modified Shops integrieren und als System Modul installiert werden.

Diese Zusatzfunktionen sind eine Fortsetzung der im Shop bereits bekannten Funktion zu den "Maximum Werten", allerdings deutlich erweitert und ergänzt um die Maximum Werte für die jeweilige Geräteart. Diese Ergänzung halten wir für essentiell wichtig, weil es nur damit möglich ist die Kriterien für das Mobile First erfüllen zu können. Diese Zusatzfunktionen steuern nicht nur Geräte abhängig die Maximum Werte, sondern zusätzlich das ebenso Geräte abhängige De-/Aktivieren von Funktionen, die sich z.B. auf Grund von beschränkten Platzverhältnissen besonders bei Mobilen Geräten nicht abbilden lassen. Das CSS Bootstrap Framework ermöglicht für diese Anforderung nur ein optisches Ausblenden. Bei der verwendeten RESS Methode geht dies spielend einfach nur das besagte SMARTY Plugin.

Ein weiterer Bestandteil und ebenso Fortsetzung des RESS Prinzips der Zusatzfunktion ist eine Organisationsverwaltung zur Komprimierung und Kombinierung von CSS, Javascript und HTML Code. Der Modified Shop besitzt zwar eine ähnlich geartete Funktion, allerdings ist diese in hohem Maße ineffizient. Die zusätzliche Alternativlösung ist nicht nur effektiver und besser, sondern ermöglicht auch ein Kombinieren von CSS und Javascript Dateien, so dass egal wieviele CSS und JS Dateien verwendet werden daraus immer nur 1 Datei für CSS und JS generiert wird. Weniger Requests bedeuten ein schnelleres Abarbeiten des Codes und weniger Blockierungen. Diese Zusatzfunktion ersetzt die vorhandene, bzw. macht diese unwirksam. Bestandteil dieser Zusatzfunktion ist eine an die Mobile First Kriterien angepasstes Ladeverhalten, was auch als Lazy Load bekannt ist.

Geräte abhängige Bildgrößen in unbegrenzter Menge


Der Modified Shop stellt für die Bildergenerierung Bilder in 3 verschiedenen Größen zur Verfügung, was vor dem Hintergrund der Anforderungen für ein Responsives Design schon seit mehreren Jahren alles andere als zeitgemaß ist. Allerdings könnte der Modified Shop auch mit einem herkömmlich erstellten Responsive Template keinen Nutzen daraus ziehen, wenn es mehr als 3 verschiedene Bildgrößen gäbe. Das CSS Bootsrap Framework besitzt nun mal keine Funktion, um mehrere unterschiedliche Bilder in verschiedenen Größen zu erstellen. Von daher müssen alle Bilder im Browser klein oder groß skaliert werden. Ärgerlich und hinderlich besonders für Mobile Geräte, welche die viel zu großen Bilder für Desktop Geräte laden und dann auch klein skaliert werden müssen. Dieses leidige Phänomen wirkt sich spürbar auf die Ladezeiten aus und entspricht keineswegs den Mobile First Kriterien.

Die Lösung für dieses bekannte Problem ist ein in allen Speed Templates enthaltenes SMARTY Plugin, welches in Kombination mit der RESS Methode nicht nur Geräte abhängige Bilder in jeder erdenklichen Größe generiert und das in unbegrenzter Menge, sondern Bilder in unterschiedlichen Hoch- und Querformaten harmonisiert, also in einheitlich gleiches Hoch- und Querformat bringt ohne die Bilder dabei zu verzerren. Diese automatische Funktion erspart den oftmals sehr hohen Zeitaufwand für das vorherige manuelle Anpassen von Produktbildern.

Alle Bilder werden, sofern nicht schon generiert, on-the-fly, also beim Aufruf einer Seite automatisch erstellt. Zusätzlich ist noch ein Cron Script enthalten, das sich auch manuell über den Browser aufrufen lässt und alle Bilder in den jeweiligen Größen erstellt.


Kostenloser Bestandteil von LiteCache


Alle Speed Templates für den Modified Shop werden kostenfrei UND in unbegrenzter Menge zur Verfügung, sodass in den nächsten Monaten bis zu 10 kostenlose Templates gleichzeitig genutzt werden können.

Bei den Speed Templates handelt es sich ungeachtet der geschilderten Features um besondere Templates, die nur zusammen mit LiteSpeed und LiteCache funktionieren und nur damit genutzt werden, weil diese Templates Funktionen enthalten, die bei Verwendung auf einem Apache, nginx oder jedem anderen Webser zu Fehlfunktionen und Datenverlusten führen.


Demos


Demo Coming Soon
Demo Coming Soon
Demo Coming Soon
Demo Coming Soon
Demo Coming Soon
Demo Coming Soon
Demo Coming Soon
Demo Coming Soon
Demo Coming Soon


SpeedTemplate.de benutzt Cookies, um seinen Besuchern das beste Webseiten-Erlebnis zu ermöglichen. Weiterführende Informationen erhältst Du in der Datenschutzerklärung, wo Du Einstellungen zu diesen Cookies vornehmen kannst.
Habe ich verstanden