Dieter Petereit 5. März 2013

The Heads-Up Grid und SpryMedia Grid – Gitternetzoverlays für das Webdesign im Browser

Es ist ja schön und gut, dass gängige Grid-Frameworks, wie etwa das 960.gs, die Definition und Verwendung gridbasierter Layouts vereinfachen. Eine optische Prüfmöglichkeit, um auch an den Details arbeiten zu können, bringen diese Frameworks jedoch nicht mit. So muss man sich auf die eigenen Augen verlassen und natürlich auf die Codequalität des Gridsystemlieferanten. Wer sein Grid frei baut, also ohne Toolunterstützung, weiß womöglich noch eher, wovon ich rede. Die beiden Tools aus dem folgenden Beitrag versprechen, bei der Positionierung der Designdetails behilflich zu sein…

grid-artikelbild

Grid-Framework: The Heads-Up Grid muss in die Website eingebaut werden

The Heads-Up Grid ist interessanter, als es der Name vermuten lässt. Baut man die Javascripte und Stylesheets, die das Heads-Up Grid ausmachen, in eine Website während der Designphase ein, so erzeugt man ein Gitternetzoverlay, welches das Design erheblich vereinfacht, live auf der Website. Dabei ist die Verwendung völlig unkompliziert.

The Heads-Up Grid – Overlay frei konfigurierbar

Eine Lösung, die so einfach und unkompliziert ist wie das Heads-Up Grid kommt daher jedenfalls mir wie gerufen. Ein kleines Script wird in den Head-Bereich der zu erstellenden Website gepackt, die Dateien des Grid-Tools in ein anpassbares Unterverzeichnis, fertig. Beim nächsten Aufruf der Website erscheint ein sichtbares Gitternetzoverlay. Bestes Beispiel dafür ist die Produktseite zum Heads-Up Grid selber:

theheadsupgrid-homepage
The Heads-Up Grid in Aktion: Sichtbares Gitternetzoverlay auf der Website

Ohne weitere Anpassungen zeigt The Heads-Up Grid ein Grid mit 6 Spalten und einer Breite von 960 Pixeln an. Alle relevanten Werte lassen sich jedoch sehr einfach innerhalb der kurzen Scriptpassage, die in den Head kopiert wurde, ändern. Sogar die Maßeinheit kann angepasst werden, so dass auch mit Prozentwerten gearbeitet werden kann. Per Default verwendet das Tool Pixel. Über den Wert Zeilenhöhe lässt sich ein Baseline Grid definieren, wichtig für Typografiefreunde.

Sogar responsive Layouts können mit dem Heads-Up Grid unterstützt werden. Der hierzu erforderliche Code ist allerdings etwas komplexer, da er verschiedene Screengrößen abfragen und bedienen muss.

Um die im Designprozess befindliche Website zwischendurch auch ohne Gridoverlay prüfen zu können, spendierte der Entwickler dem Tool einen am rechten oberen Rand des Browserfensters platzierten On-/Off-Button. The Heads-Up Grid liegt aktuell in der Version 1.7 vor und kann frei auf der Website des Entwicklers Jason Simanek heruntergeladen werden.

Grid-Framework: SpryMedia Grid – Bookmarklet legt Grid auf beliebige Websites

Der Schotte Allan Jardine liefert ein Grid-Framework, das per JavaScript-Bookmarklet auf beliebige Websites angewendet werden kann. Das ist bequem, aber ist es auch gut?

SpryMedia Grid legt ein Standard-Grid über die Website, auf der es aufgerufen wird. Das funktioniert unterschiedlich zufriedenstellend. In meinen Tests endete das Grid sehr häufig am Ende des sichtbaren Bereichs, wurde also nur auf den aktuellen Viewport angewendet. Vielfach wurde überhaupt kein Grid generiert. Getestet habe ich im aktuellsten Chrome Stable auf dem Mac.

sprymedia-grid

Dafür ist das SpryMedia Grid über das modale Fenster, das nach Klick auf das Bookmarklet erscheint, extrem flexibel zu konfigurieren. Neben den grundlegenden Optionen, wie der Gesamtbreite und Höhe des Grids, der Zahl der Spalten und Zeilen mit ihren jeweiligen Weiten und Höhen, sowie etwaigen Abständen, sieht SpryMedia Grid zusätzlich die farbliche Anpassung der einzelnen Teile des Grid vor. Im Prinzip ist das also eine ganz nützliche Angelegenheit.

Nur die einwandfreie Funktionalität, die kann halt nicht garantiert werden. Im Chrome unter Windows 7 konnte ich beispielsweise nicht einmal die Einheiten wechseln, war somit auf die Standard-Units festgelegt. Grundsätzlich ist der freie Wechsel zwischen em, ex,pxund % ausdrücklich vorgesehen. Übrigens: Ausblenden lässt sich das Grid, indem man schlicht erneut auf das Bookmarklet klickt. Die zuvor getätigten Einstellungen bleiben erhalten.

Wer bereit ist, sich mit den vielfältigen Konfigurationsmöglichkeiten auseinander zu setzen, ohne die Garantie zu haben, dass das Ergebnis den Aufwand rechtfertigt, kann SpryMedia Grid gern mal ausprobieren. Ich habe mich für The Heads-Up Grid entschieden und empfehle Ihnen das auch.

Links zum Beitrag:

Quellennachweis Artikelbild: striatic via photopin cc

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Ein Kommentar

  1. hmm.. ich bevorzuge weiterhin die Browser Plugins dafür oder wenn es schnell gehen muss das gute alte Stück Papier :D
    Nur für Grids extra ein Plugin in eine Webseite zu installieren halte ich für Zeitverschwendung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.