Layoutraster berechnen


Parse error: syntax error, unexpected ')' in /www/htdocs/w00a8623/weblog.ononlinework/htdocs/wp-content/plugins/ozh-who-sees-ads/wp_ozh_whoseesads.php(282) : eval()'d code on line 1

Ich habe heute ein kleines Tool in Form einer Excel-Datei veröffentlicht, das mir bei zwei aktuellen Projekten sehr geholfen hat. Es handelt sich dabei um einen Grid Calculator, also ein Werkzeug zur Berechnung von Layoutrastern.

Nahezu jeder, der vor der Aufgabe eines komplexen Layouts gestanden hat, konnte schon feststellen, dass es eine ziemliche Fummelarbeit ist, die Spaltenbreite, die Breite der Spaltenabstände und die zur Verfügung stehende Gesamtbreite auf einen Nenner zu bringen und so ein ansprechendes Raster zu berechnen. Insbesondere bei einem Frontend-Projekt, in dem ich unterschiedlichste Breiten für Eingabefelder brauchte, war für mich ein möglichst vielspaltiges Layout wichtig, um bei den Eingabefeldern sehr flexibel arbeiten zu können.

Hat man dann endlich ein passendes Layoutraster berechnet, steht man vor dem nächsten Problem: Beim Anlegen der Stylesheets oder Festlegen der Vorgaben für Bildgrößen berechnet man immer wieder die Breite von Elementen, die mehrere Spalten und die entsprechenden Zwischenräume umfassen.

Screenshot des Rasterrechners in der Excel-VersionUm die Suche nach einem passenden Raster zu erleichtern und vor allem die nervige Berechnung der mehrspaltigen Elemente zu automatisieren, habe ich eine Excel-Datei gebaut, die einem die Arbeit abnimmt.

Eine Erläuterung der Datei und die Möglichkeit, den Layoutraster-Rechner als Excel- und Open-Document-Datei herunterzuladen gibt es auf der Seite »Grid Calculator – Layoutraster berechnen«.

7 Kommentare

  1. Gutenbyte sagt:

    Layoutraster berechnen » CSS, Webdesign, Webstandards » ononlinework: Ich habe heute ein kleines Tool in For… http://tinyurl.com/y9fralz

  2. Stefan David sagt:

    Kleines Tool zum Berechnen von Layout-Rastern: http://ononlinework.de/x/15 #webdesign

  3. RT @derstefan: Kleines Tool zum Berechnen von Layout-Rastern: http://ononlinework.de/x/15 #webdesign

  4. Leonid Lezner sagt:

    Da habe ich etwas besseres mal geschrieben: http://goodies.shopdienst.com/grid/?page-width=980&doc-width=1280&page-margin=0&col-num=12&gutter=28

    Raster kann damit gleich im Photoshop benutzt werden.

    • Stefan David sagt:

      Das ist wirklich nett, ich kann in deinem Tool aber nicht sehen, ob z. B. mit den gegebenen Werten gleichzeitig ein 3- und ein 5-spaltiges Layout möglich wäre. Genau das habe ich aber in meinem aktuellen Frontend-Projekt gebraucht. Das ist aber vielleicht auch eine etwas spezielle Anforderung.

  5. ich glaube kaum ein tool ist komfortabler als Boks http://toki-woki.net/p/Boks/

    • Stefan David sagt:

      Auch hier gilt: Ich muss erst eine Spaltenzahl vorgeben, zumindest entnehme ich das den Screenshots. Das ist nicht das, was ich bei meinem letzten Projekt brauchte. Ansonsten sieht das aber tatsächlich sehr komfortabel aus.

Kommentiere