Für jeden, der sich für unser Rastersystem interessiert, haben wir ein kleines Update: Wir haben mittlerweile einen Weg gefunden, wie man ein Rastersystem entwickelt, dass sich an die Breite des Fensters anpasst, und wir haben dieses Raster vorläufig verwendet, um ein einfaches Blog-Layout zu entwickeln. Jetzt gibt es eine erste echte Demo unseres Rastersystems.
Was ist das?
Wenn du das Rastersystem im Hintergrund einblenden möchtest, verwende einfach die Tastenkombination [Alt]+[Shift]+G.
Wir arbeiten seit einigen Wochen an einem flexiblen Rastersystem, mit dem man einfach Webseiten im Browser gestalten kann. Die Idee hinter diesem Rastersystem ist, dass man ohne viel Aufwand, Layouts in HTML und CSS entwickelt, um somit z.B. schnelle Prototypen für Usability-Tests anzufertigen.
Die aktuelle Demo-Version unseres Rastersystems zeigt eine Artikelansicht unseres Blogs, wie diese aussehen könnte. Wir haben mit LESS gearbeitet (Danke an Lukas) und in der Demo-Version nicht nur auf das Rastersystem geachtet, sondern besonderes Augenmerk auf den vertikalen Rhythmus der Seite gelegt. Wir haben also zusätzlich zu den Spalten auch ein Grundlinienraster verwendet, nur um zu demonstrieren, was sich mit Web-Typografie mittlerweile alles machen lässt.
Unser neues Buch: Wir erklären dir in klarer und verständlicher Weise, wie User Testing in der Praxis wirklich funktioniert » Zum Buch
Wie könnt ihr uns helfen?
Wir sind im Moment an einem Punkt angelangt, an dem wir unser Rastersystem ausgiebig testen möchten. Deshalb unsere Bitte an euch: Öffnet die Demo-Version, verwendet die Tastenkombination [Alt]+[Shift]+G und ändert die Fensterbreite eures Browsers und vergrößert bzw. verkleinert die Schriftgröße. Spielt so lange mit der Demo-Version herum, bis ihr das Gefühl habt, dass ihr alles Mögliche damit gemacht habt.
Wenn ihr fertig seid, schaut euch die Demo bitte auch auf euren Mobil-Telefonen, euren Kindles und euren Tablets an. Für diese Geräte gibt es zwar keinen Raster im Hintergrund – weil dieser nur für die Entwicklung gedacht ist – ihr könnt aber trotzdem überprüfen, ob das Layout auf eurem Gerät gut aussieht. Solltet ihr irgendein Gerät finden, auf dem die Demo-Version scheiße aussieht, dann schreibt uns bitte ein Kommentar und wir können uns ansehen, was wir falsch gemacht haben.
Was wir schon wissen
Wir verwenden für unser Rastersystem box-sizing, welches in IE 6 bis 8 nicht funktioniert. Für die alten Internet Explorer bieten wir deshalb keinen Raster im Hintergrund an. Ab Version 9 könnt ihr mit [Alt]+[Shift]+[G] wie gehabt das Raster einblenden.
Für die Spaltenbreite des Rasters verwenden wir Prozentangaben. Da Opera Prozente an der Kommazahl abschneidet und aus 8.33% einfach 8% macht, haben wir das Rastersystem auch für Opera ausgeschaltet. Also nicht wundern, wenn die Tastenkombination keine Wirkung zeigt.
Was kommt als Nächstes?
Wie gesagt, wir wollen ein Rastersystem entwickeln, mit dem jede und jeder einfache Layouts in HTML und CSS selbst bauen kann. Sobald wir/ihr unser Rastersystem getestet haben/habt, werden wir gemeinsam mit Lukas an einem Framework arbeiten, welches wir vermutlich auf GitHub veröffentlichen werden und für euch zum Download bereitstellen.
Bis dahin schon einmal Danke für’s fleißige Fenstergröße ändern und rein- und rauszoomen.
Nächster Artikel: Wie man Text im Web auf ein Grundlinienraster setzt
Christoph — 19. Januar 2012
Hallo Stefan, bei mir funktioniert die Tastenkombination Alt+Shift+G in keinem Browser (Windows 7 64-bit, Firefox 9.0.1, Google Chrome 16, Safari 5.1.1).
Matthias — 20. Januar 2012
schaut gut aus :)
wenn ihr nach einer Lösung für eventuelle Navigationspunkte sucht, schaut mal hier http://tinynav.viljamis.com/
Stefan — 21. Januar 2012
Hallo Christoph, da siehst du was passiert, wenn keiner mit Windows im Büro sitzt ;). Danke für den Hinweis – werden wir ausbessern.
Danke Matthias. Wir sind zwar eher Selbermacher, aber den Code werden wir uns auf jeden Fall durchsehen :)
simon — 22. Januar 2012
Das horizontale Rastersystem macht mich jetzt nicht soooo fertig, aber der Grundlinienraster is verdammt geil. Werdi mir merken :)
oliver — 17. Februar 2012
Hi,
ich beschäftige mich gerade selber mit einem horizontalen Rastersystem und habe jetzt eure Seite entdeckt. Mein Ausgangspunkt ist das 1140px CSS Grid Systen. Überzeugt mich aber nicht in jedem Punkt, ein variablen Gutter finde ich zb. eher verwirrend.
Box-Sizing habe ich mich wegen IE7 nicht getraut - persönlich ist mir die Unterstützung für IE7 auch egal, aber das Layout sollte darin natürlich nicht zerfallen :=).
Aber jeder Rand, jede Linie in Prozentwerten umrechnen? Kam mir nicht so prickelnd vor …
Lange Rede kurzer Sinn: Finde interessant was ihr macht und ich bin auf euer Rastersystem gespannt.
Gruß
P.S.: box-sizing funktioniert mit Vendor-Prefix ms übrigens auch im Internet Explorer 8.
Siegi — 20. Oktober 2012
Hallo, kennt wer ein Windows Pendant zur Mac Tatenkombination Alt+Shift+G ?? Bei mir (unter Windows 7 32-bit) funzzt die Anzeiger des Grids leider auch nicht.
Euer Grid-System find ich gut und es ist wohl-überdacht, mehr als viele andere, auf die man auf fast jeder 2-ten Website über Webdesign hingewiesen wird.