Layoutraster berechnen

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“.

Hovereffekte mit CSS-Sprites

Während ich ja bisher eher die Artikel anderer Autoren übersetzt oder Artikel über einige andere Websites oder auch Buchrezensionen geschrieben habe, ist nun mein erster Artikel mit technischem Inhalt erschienen.

In »Hovereffekte mit CSSSprites«, veröffentlicht bei den Webkrauts, zu deren wachsender Mitgliederliste ich mich mit Stolz zähle, beschreibe ich anhand eines einfach nachzuvollziehenden Beispiels eine Technik, die die Änderung der Optik von Links beim Überfahren mit der Maus ohne Austausch der Hintergrundgrafik ermöglicht.

Viel Spaß beim Lesen.

Webstandards verinnerlichen („How to Grok Web Standards“)

Der Artikel ist im englischen Original bei A List Apart unter dem Titel »How to Grok Web Standards« erschienen und wurde von Stefan David übersetzt.

Viele Webdesigner, mich eingeschlossen, kommen zum Internet mit einem grafischen Hintergrund. Wir denken in Bildern, nicht in Quelltext. Als wir zuerst angefangen haben, für das Internet zu designen, haben wir HTML und CSS in ungehobelter Weise – als Mittel zum Zweck – genutzt, um hübsche Kästen im Raum zu arrangieren, ohne die wahre Natur des Kastens oder seines Inhalts zu erfassen. Diese rein visuelle Mentalität zu verändern, ist die höchste zu überwindende Hürde, wenn ein Grafikdesigner erstmalig in Semantik und Webstandards eintaucht. Webstandards wirklich zu verstehen, heißt für den visuellen Designer, die Art und Weise an Design zu denken, grundlegend zu verändern.

Webstandards verinnerlichen („How to Grok Web Standards“) weiterlesen