3. April 2012 | 1 Comment Diese Woche möchte ich einen kleinen Eintrag über einige verschiedene CSS Rastersysteme (CSS Grid System) schreiben. Und zwar über diejenigen, die uns Web-Entwicklern dabei helfen den Inhalt unserer Webseiten bei verschiedensten Bildschirmauflösungen immer optimal darzustellen (funktioniert bis hin zu Smartphones). Viele Entwickler setzen bei diesen Systemen auf ein 12 spaltiges Layout – Denn aus diesen 12 Spalten lassen sich problemlos die folgenden gängigen Layouts erstellen: Einspaltig (12) Zweispaltig (6 + 6) Dreispaltig (4 + 4 + 4) Vierspaltig (3 + 3 + 3 + 3) Es sind auch Mischformen wie „8 + 4 Spalten“ möglich – Hauptsache die Summe der Spalten ergibt 12! Einige Rastersysteme setzen sogar auf 16 Spalten. CSS Rastersysteme Diese reaktionsfähigen („responsive„) Rastersysteme passen die Spalten unserer Seite genau so an, das keine horizontalen Scrollbalken auftauchen – Vor allem das surfen auf Smartphones macht dadurch mehr Laune! Man könnte sogar behaupten durch ein solches Rastersystem braucht ihr nicht länger eine extra Mobile Version eurer Webseite bereitzustellen. Doch folgende Punkte sprechen dagegen: Mobile Webseiten sollten möglichst klein (kilobyte) gehalten werden Es sollte auf große Grafiken und HTML Konstrukte im Content verzichtet werden Auch wenn aktuelle Smartphones sehr gut mit Javascript umgehen können: Übertreibt es nicht und nutzt statt großen Frameworks lieber etwas schlankes (evtl. Zepto ?) Damit möchte ich sagen das eine Webseite, die für Desktop-Rechner konzipiert wurde, nicht unbedingt für Smartphones geeignet ist – Eben aus den genannten Gründen (Hohes Datenaufkommen durch Bilder, große Javascript Bibliotheken, große HTML Konstrukte, …). Außerdem lässt sich bei separaten mobilen Webseiten viel besser auf die Geräte eingehen – z.B. funktionieren auf mobilen Geräten (mit Touchscreen) keine „hover“-Effekte. Doch kommen wir zurück zu den Rastersystemen! Worin besteht nun der Trick, ein einziges Raster für alle Bildschirmauflösungen zu erstellen? Ganz einfach – CSS Media Queries… Und für die älteren Browser: Javascript 😉 Wenn ihr mehr über CSS Media Queries erfahren möchtet kann ich euch nur den folgenden Blog-Eintrag empfehlen: CSS Media Queries & Using Available Space (von Chris Coyier). Hier wird sehr ausführlich beschrieben was mit Media Queries alles möglich ist! Ich möchte Heute die folgenden beiden bekannten Rastersysteme vorstellen: 1140 CSS Grid und Bootstrap. Zusätzlich möchte ich euch aber auch Adapt.js präsentieren um zu zeigen wie diese Situation (komplett) mit Javascript gelöst werden kann. Kommen wir zum 1140 CSS Grid. Das 1140 CSS Grid basiert fast ausschließlich auf CSS – Es wird zwar eine „CSS3 mediaqueries JS“ Javascript Datei eingebunden, doch diese richtet sich an ältere Browser wie IE 5+, Firefox 1+ und Safari2 die noch keine Media-Queries kennen. Bilder, innerhalb einer Spalte, werden in ihrer Größe übrigens automatisch angepasst. Das 1140 CSS Grid kümmert sich um die folgenden Auflösungen: Volle Auflösung: Bildschirme über 1024px in der Breite Mittlere Auflösung: Bildschirme zwischen 768px und 1023px Niedrige Auflösung: „Handheld“ und Bildschirme bis 767px Das CSS ist sehr schlank und beschränkt sich (bis auf kleinere Kommentare) auf das wesentliche. Mir persönlich gefällt diese Lösung am besten! Es gibt zwar ein paar Nachteile, doch darüber schreibe ich weiter unten etwas… Sehr viel mehr gibt es hier eigentlich nicht zu sagen. Sicherlich handelt es sich hier um das kleinste Framework, welches aber absolut ausreichend ist und durch eine saubere Syntax überzeugt! Kommen wir anschließend zu Bootstrap. Bootstrap setzt, wie das 1140 CSS Grid, zwar auf Mediaqueries, bringt aber sehr viel Javascript und zusätzliche Styles mit. Am einfachsten sieht man das, wenn man auf der offiziellen Bootstrap Webseite mal die Fenstergröße ändert. Ab einem bestimmten Punkt wird Beispielsweise das Menü ausgeblendet und ist nur noch über einen Javascript-Slider verfügbar. Außerdem verfügt Bootstrap über mehr „Stufen“ beim skalieren der Webseite: Volle Auflösung: Bildschirme ab 1200px in der Breite Hohe Auflösung: Bildschirme ab 980px Mittlere Auflösung: Bildschirme zwischen 768px und 979px Niedrige Auflösung: Bildschirme bis 767px Niedrigste Auflösung: Bildschirme bis 480px Bootstrap baut mit seinem eigenen Javascript auf jQuery auf, verfügt zudem über eine sehr ausführliche Dokumentation und benutzt LESS (Ein Javascript Framework zum compilieren von CSS). Laut der Bootstrap Webseite werden alte Browser unterstützt („even IE7!“) – genaue Angaben konnte ich allerdings leider nicht finden. Es gibt aber noch sehr viele Spielereien, die ihr euch bei Interesse mal genauer anschauen solltet – Ihr könnt z.B. verschiedene Layouts ineinander verschachteln oder durch LESS z.B. eigene CSS Dateien kompilieren lassen. Zudem bietet Bootstrap eine große Reihe an vorgefertigten Elementen wie Beispielsweise Buttons, Formulare und verschiedene Menü-Designs. Einfach mal durchstöbern! Abschließend: Die reine Javascript lösung Adapt.js Adapt.js lässt euch selbst bestimmen welche CSS Datei bei welcher Fenstergröße geladen werden soll. Damit ist zwar nicht direkt sichergestellt das eure Webseite bei allen Fenstergrößen perfekt passt – Dafür wird euch aber auch kein HTML Struktur oder sonstiges Skript vorgegeben. Man kann sagen, das euch bei dieser Lösung komplett freie Hand gelassen wird, was das Styling angeht (da freuen sich die Webdesigner :D). Adapt.js funktioniert folgenderweise: // Beispielcode für Adapt.js var ADAPT_CONFIG = { // Der Pfad zu eurer CSS-Datei. path: 'assets/css/', /* * false = Das Skript wird nur beim laden der Seite ausgeführt (einmalig). * true = Skript wird ausgeführt sobald sich die Fenstergröße oder * die Orientierung (Smartphone/Tables) ändert. */ dynamic: true, // Ein optionaler callback: function(i, width). callback: myCallback, /* * Die erste Zahl entspricht dem minimum. * Die zweite Zahl entspricht dem maximum. * Die Pixelbereiche werden durch "to" getrennt. * Die "px" Einheit ist optional und kann weggelassen werden. */ range: [ '0px to 760px = mobile.css', '760px to 1280px = 960.css', '1280px = 1280.css' ] }; Das Skript lädt also, je nach Auflösung, eine von euch definierte CSS Datei. Damit seid ihr (im Gegensatz zum 1140 CSS Grid und Bootstrap) euer eigener Herr! Die Angabe einer CSS Datei könnt ihr übrigens auch wegfallen lassen und stattdessen mit dem Callback arbeiten: // Beispielcode für Adapt.js var ADAPT_CONFIG = { path: 'assets/css/', dynamic: true, callback: function(i, width) { // Callback! }, range: [ '0 to 760', '760 to 1280', '1280 to 1650', '1650' ] }; Abschließend möchte ich zu den Vor- und Nachteilen der einzelnen Systeme kommen! Das 1140 CSS Grid ist zwar mein klarer Favorit, doch Systeme wie dieses erschweren eigene Animationen innerhalb der Seite! Das liegt daran, das wir nicht länger mit absoluten Positionen arbeiten können sondern immer prüfen müssen wo sich die Ausgangs-Elemente befinden von denen aus wir animieren möchten (z.B. ein Popup-Menü oder Tooltip). Auch ein sogenanntes Javascript Carousel wird schwierig einzubauen, da wir von keiner „festen“ breite mehr ausgehen können an der wir uns orientieren. Bootstrap bringt natürlich die gleichen Probleme mit sich – Allerdings gibt es eine große Community und viele vorgefertigte Plugins die uns Entwicklern solche Stolpersteine aus dem Weg räumen. Das ganze geht dann allerdings zu Lasten der Dateigrößen – Wo das 1140 CSS Grid noch wahnsinnig schlank ist, beansprucht Bootstrap ein vielfaches des Speichers… Der Leidtragende ist letztendlich der Smartphone oder Tablet-Nutzer der nicht mit WLAN surft. Adapt.js kennt solche Probleme nicht und braucht sich auch nicht weiter drum kümmern – Es lässt uns alle Freiheiten die wir uns nur wünschen können. Dafür müssen wir leider auf den Luxus eines Rastersystems verzichten das sich selbstständig dem entsprechenden Bildschirm anpasst… Übrigens können wir uns auch bei Adapt.js nicht auf absolute Positionen verlassen – Denn je nach dem was wir in unserer CSS Datei stehen haben werden sich die Maße und Abstände verändern. Was habt ihr für Erfahrungen mit solchen Systemen? Lasst es mich wissen! Mit diesen Worten möchte ich mich auch schon für Heute verabschieden – Euch da draußen eine angenehme kurze Woche und ein schönes Oster-Wochenende 🙂