Webdesign Daily – zwei Responsive Design Grids, ein Bootstrap Theme
Kommentare

Wie immer stellen wir Euch an dieser Stelle nützliche Tipps, Tricks und Fundstücke für Webdesigner und -entwickler vor.

Responsive Full Width Grid

Die meisten CSS Grid Systems unterstützen lediglich eine maximale Breite von 960 x 1140 Pixel – die am häufigsten ausgelieferte Breite, da bei den meisten Nutzern eine Auflösung von 1.280 x 1.024 Pixeln eingestellt ist. Wer aber ein responsives Grid sucht, dass beispielsweise in der Lage ist bei einer Full-HD-Auflösung von 1.920 x 1.080 Pixeln den gesamten Viewport des Bildschirms zu befüllen, muss sich erst einmal umschauen. Eine Alternative ist das „Responsive Full Width Grid“, das wir auf dem Blog Codrops gefunden haben. Dabei handelt es sich um ein flexibles Grid Layout für Bilder und ähnlichen Content. Je nach Viewport-Breite vergrößert bzw. verkleinert sich die  Anzahl der einzelnen Elemente in den Grid-Reihen, aber die Reihe selbst füllt stets die zur Verfügung stehende Breite. Die einzelnen Elemente besitzen eine prozentuale Breite und unter der obigen URL zeigen einige beispielhafte Media Queries, wie man die angezeigten Elemente anpasst.

Im folgenden Screenshot seht Ihr das Grid bei Full-HD-Auflösung. In diesem Fall werden sechs Elemente pro Reihe angezeigt, jedes 320 Pixel breit, was 16,6666 Prozent der verfügbaren Bildbreite entspricht:

Responsive Full Width Grid

Geo for Bootstrap

Achtung: Das Betrachten der nächsten Website geschieht auf eigene Gefahr. Für eventuelle Augenschäden übernimmt die Redaktion keine Haftung. Denn was man unter http://divshot.github.io/geo-bootstrap/ zu sehen bekommt, mag manchem unter Euch Tränen des Schmerzes in die Augen treiben. „Geo for Bootstrap“ ist ein Theme für Twitter Bootstrap. Es ist Open Source, auf GitHub erhältlich und wurde laut den Machern „von zeitlosen Design-Elementen aus der Geschichte des Webs“ inspiriert. Nicht fehlen dürfen hüpfende Smilies, die sich auf- und zuklappende Mailbox, blinkende Pfeile, grellbunte Buttons, ein animiertes „under construction“ GIF, Laufschriften und – die Krönung – ein tanzender MC Hammer! Auch die Auflistung der Features spricht für sich selbst:

  • A stunning, high-contrast color palette that will immediately draw your users into the interface
  • Playful typography designed by luminary Vincent Connare
  • Call attention to your content with the brand-new blink tag

Und wer jetzt immer noch nicht glaubt, dass die Leute vom Blog Divshot es ernst meinen können mit diesem Bootstrap-Ungetüm hat recht! Es handelte sich um einen Aprilscherz, auf den wir leider etwas zu spät gestoßen sind. Dennoch wollten wir Euch diese Sternstunde des Webdesings nicht vorenthalten:

Geo for Bootstrap 
„A thing of beauty“ – das Geo for Bootstrap Theme. Ein überaus gelungener, wenn auch Augenschmerzen verursachender Aprilscherz (Quelle: http://divshot.github.io/geo-bootstrap/). 

Geo for Bootstrap 2
Go Hammer! Da tanzz er, der MC! (Quelle: http://divshot.github.io/geo-bootstrap/).

Golden Grid System

Beim Golden Grid System handelt es sich um ‚klappbares’ Grid-System für Responsive Design. Es teilt den Bildschirm in 18 Spalten auf. Die Spalten ganz links und ganz rechts außen dienen als äußere Begrenzung des Grids, quasi als Saum. Somit bleiben 16 Spalten für das Seitendesign übrig. Diese können für Bildschirme mit Tablet-Größe zu acht Spalten kombiniert oder zusammengeklappt werden oder, für Smartphone-Displays, zu vier Spalten. Damit ist das Golden Grid System in der Lage Bildschirmgrößen von 240 bis 2.560 Pixel abzudecken. Die Abmessungen des Grids werden in jeder Konfiguration innerhalb der CSS Comments festgelegt und von passenden Media Queries wie diesem begleitet:

Golden Grid System Media Queries

Ein weiteres Feature sind die sogenannten Elastic Gutters: Während die Spaltenbreiten proportional zur Bildschirmbreite sind, ist die Breite der Spaltenzwischenräume, der sogenannten Gutters, proportional zur Fontgröße der Seite, die in em spezifiziert ist. Der Vorteil: Bei anderen responsive Grids, wo Gutters eingesetzt werden, die proportional zum Bildschirm sind, sieht es bei einer Änderung der Screen-Breite oft so aus, als ob die Inhalte entweder zusammengedrückt oder auseinander gezogen werden. Mit den Elastic Gutters sind die Spaltenzwischenräume elastisch und verhalten sich immer proportional zu den angezeigten Inhalten.

Golden Grid System 1920
Bei einer Browserfensterbreite von knapp 1.920 Pixeln stehen 16 Spalten im GGS für das Design zur Verfügung (Quelle: http://goldengridsystem.com).

Golden Grid System
Verkleinert man den Browser auf eine Breit von knapp 600 Pixeln, bleiben vier Spalten übrig (Quelle: http://goldengridsystem.com).

Darüber hinaus verfügt das GGS über ein zoombares Baseline Grid. Legt man all Fontgrößen, Linienhöhen sowie die vertikalen Paddings, Ränder und Grenzen in em fest, wird alles proportional skaliert: die Fontgröße wird mithilfe von Media Queries verändert und das Baseline Grid bleibt immer intakt.

Beim Golden Gridlet handelt es sich darüber hinaus um ein kleines Script, das einen Button in die obere rechte Bildschirmecke setzt. Klickt man darauf, legt sich das GGS Grid und ein Basline Grid (1,5em) über die Seite (siehe Screenshot unten). Das soll eine visuelle Überprüfung der Anordnung der Designelemente erleichtern.

Baseline Grid(Quelle: http://goldengridsystem.com)

Inspiriert wurde das GGS laut den Machern von der DIN-Norm für Papier und dem Unigrid System von Massimo Vignelli, einem modularen grid System, dass für den amerikanischen National Park Service erstellt wurde.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -