8.3    Raster – Grundlagen 

Ein Raster hilft Ihnen, Dinge zu strukturieren, wenn es etwas zu gliedern gibt. Bei der ersten Ideenfindung, auch bei den (ersten) Wireframes kann ein Raster hinderlich und noch zu früh sein. Zuerst sollte eine Grundvorstellung des Layouts vorhanden sein, dann folgt das Raster.

 

8.3.1    Bedeutung 

Ein Raster stellt in gewisser Weise den Übergang vom Entwurf in die Umsetzung dar. Aus groben Skizzen wird ein Layout entwickelt, die vorgegebenen Elemente werden in eine klare Struktur gebracht.

Abbildung 8.22    Rasterkonstruktion im Printdesign

Raster gibt es in der Architektur und Kunst, um die zu gestaltenden Elemente sinnvoll zueinander anzuordnen. Prinzipien wie der Goldene Schnitt (siehe Abschnitt 6.3.4, »Goldener Schnitt«) helfen dabei, Unterteilungen zu finden. Im Printbereich ist die Entwicklung eines Gestaltungsrasters eine Wissenschaft für sich. Mit verschiedenen Systemen und Berechnungsweisen lassen sich hier Raster entwickeln. Im Zusammenspiel mit dem Papierformat wird so ein Raster geschaffen, mit dem sich die Elemente (harmonisch) anordnen lassen. Gerade bei mehrseitigen Printprodukten sorgt ein Raster für eine bessere Handhabung und für eine einheitliche Erscheinung über die einzelnen Seiten hinweg. Selbst wenn sich die Gestaltungselemente verändern, die gleichbleibende Struktur bzw. Anordnung sorgt für Konsistenz.

Im Screendesign ist es sehr ähnlich. Ein Raster bietet über die einzelnen Unterseiten hinweg einerseits eine Hilfestellung bei der Platzierung der Elemente und gibt dem Betrachter andererseits das gute Gefühl der Orientierung und Wiedererkennung. In Abbildung 8.23 sehen Sie zwei Webseiten, bei denen das dahinter liegende Raster offensichtlich ist.

Abbildung 8.23    Auf underconsideration.com/quipsologies (oben) und handsomefrank.com (unten) ist das Gestaltungsraster deutlich zu erkennen.

Gestaltungsraster helfen dem Designer, klar und nützlich zu arbeiten. Schriften, Farben und Bilder erwecken Aufmerksamkeit und lenken den Blickverlauf. Ein durchdachtes Layout hält die Dinge zusammen, macht sie sozusagen zu einem »großen Ganzen«. Selbst bei Webseiten, die nur aus einer einzigen Seite bestehen, wie die modernen One-Pager, sorgen Rastersysteme für Ordnung. Grundsätzlich muss nicht jede Webseite zwangsläufig ein Raster bekommen, aber es erleichtert die Arbeit des Webdesigners durchaus enorm. Ein Raster kann bei der Anordnung vieler Inhaltselemente und/oder vieler Einzelseiten eine großartige Hilfestellung sein und Inhalte in eine Hierarchie bringen und Überblick schaffen. Bei eher freien künstlerischen Layouts kann ein Gestaltungsraster aber auch einengen und die Kreativität einschränken.

Ein Raster ist dem Betrachter nicht immer offensichtlich. Eigentlich könnte man fast sagen, dass es eher unsichtbar sein soll und dass der Betrachter höchstens die harmonische, ausgeglichene Anordnung der Elemente wahrnehmen soll. Abbildung 8.24 zeigt ein gelungenes Beispiel für ein sehr dezentes Raster, das auf den ersten Blick kaum sichtbar ist, aber die Inhalte der Website loyselstoy.com harmonisch ordnet.

Abbildung 8.24    Ein dezentes Raster, das auf den ersten Blick kaum sichtbar ist: loyselstoy.com

 

8.3.2    Layoutgrundlagen 

Raster ist nicht gleich Raster. Bevor Sie ein Raster für eine Webseite entwickeln, sollten Sie sich mit gängigen Auflösungen und unterschiedlichen Möglichkeiten der Rasterdarstellung vertraut machen.

Bildschirmauflösungen | Bei Printpublikationen wird das Raster in Bezug zum Papierformat erstellt. Dieses gibt eine Art »Rahmen« vor, innerhalb dessen das Raster erstellt werden kann. Im Screendesign gibt es kein festes Format, denn das Format ist hier die Bildschirmauflösung, und diese ist bei jedem Anwender anders. Um die breite Masse der Anwender anzusprechen, wurde lange Zeit für den kleinsten gemeinsamen Nenner entwickelt. Der kleinste gemeinsame Nenner ist hier eine Bildschirmauflösung, bei der die Webseiten bei den meisten (fast allen) Betrachtern gut aussehen. Und gut aussehen heißt, dass keine horizontalen Scrollbalken erscheinen, also alle Inhalte in der Breite sichtbar sind. 1.024 mal 768 Pixel hieß lange Zeit dieser kleinste gemeinsame Nenner. In den Anfangsjahren des Internets lag dieser noch bei 800 × 600 Pixeln. Inzwischen bieten die meisten Monitore eine viel höhere Auflösung an, aber parallel hat in den letzten Jahren die Verbreitung von Geräten wie Smartphones, Tablets, Net- und Notebooks zugenommen, die wiederum größtenteils eine geringere Auflösung haben. Die Bandbreite an Bildschirmauflösungen ist also wesentlich unübersichtlicher und heterogener geworden.

Abbildung 8.25    Nur ein kleiner Überblick über gängige Auflösungen. resizemybrowser.com zeigt verschiedene Viewports und passt bei Auswahl das Browserfenster an.

Es ist damit schwieriger geworden, eine Auflösung zu wählen, mit der sich der Großteil der Nutzer bedienen lässt. Dynamische – also anpassungsfähige – Layouts sind hier die Lösung, also Layouts, die nicht nur für eine feste Breite bestimmt sind, sondern sich der individuellen Auflösung anpassen können.

Es ist daher inzwischen nicht selten, dass bei der Neugestaltung einer Webseite gleich für eine Auflösung zwischen 1.100 und 1.200 Pixeln optimiert wird. Die Browser Display Statistics (w3schools.com/browsers/browsers_display.asp) zeigen auch, dass ca. 97 % der Bildschirmauflösungen mindestens 1.024 in der Breite sind.

Abbildung 8.26    So breit sind Webseiten heute: Bei januar.ch ist der Inhaltsbereich bis zu 1.370 Pixel breit (oben), und bei swipe.de füllt er die komplette Browserbreite aus (unten).

Layouttypen | Bestimmte Auflösungsbreiten werden nur zum Problem, wenn das Layout fix ist, wenn es also eine feste Breite bekommt, die sich nicht verändern lässt. Und diese feste Breite haben viele Jahre so gut wie alle Webseiten bekommen. Eine feste Breite passte zum traditionellen Ablauf der Erstellung einer Webseite: Ein Layout wird in einem Grafikprogramm (meistens Photoshop) erstellt, mit dem Kunden besprochen und dann mit HTML und CSS umgesetzt. In der erstellten Grafikdatei war die komplette Gestaltung (samt Raster) schon vorhanden. Alle visuellen Details konnten so schon besprochen und geklärt werden. Ein Screendesign als Bilddatei bringt aber mit sich, dass dieses statisch ist. Es ist zwangsläufig für eine feste Breite angelegt. Es lassen sich zwar für unterschiedliche Breiten unterschiedliche Designs anlegen, aber der Aufwand wächst dann unverhältnismäßig. Ein festes Design mit einer festen Breite ist auch ein Vorgehen, das viele Designer und Kunden aus dem Printbereich kennen und schätzen gelernt haben. Das spätere Ergebnis ist (mit kleinen Abweichungen) schon im Grafikprogramm sichtbar. Man könnte es unter »die Kontrolle haben« zusammenfassen.

Die volle Kontrolle über das Design und die Gestaltung der Inhalte zu haben ist natürlich für den Designer und auch den Kunden angenehm. Ein Design, das im Grafikprogramm 900 Pixel breit ist, lässt sich mit CSS auch genauso umsetzen und ist dann bei jedem Anwender auch 900 Pixel breit – so einfach kann die Welt manchmal sein. Die Welt dreht sich aber – gefühlt – immer schneller, und diese starren Layouts passen immer weniger in die heutige Zeit.

Abbildung 8.27    So sieht das Design in Photoshop aus. Hilfslinien und Raster helfen bei der pixelgenauen Platzierung.

Fixe Layouts | Responsive Webdesign ist die Lösung für die heutige Auflösungsvielfalt. Das Web ist von Natur nämlich flexibel und nicht starr. Die Möglichkeiten, flexible Layouts umzusetzen, waren schon immer vorhanden. Fast immer wurde aber ein starres Layout bevorzugt. Und das hat(te) seine Gründe.

Ein starres Raster, gerne auch fixed genannt, wird mit festen Pixelwerten umgesetzt. Dadurch nimmt es einen festen Platz in der Breite ein – egal, wie breit das Browserfenster ist. Da eine Art Papierformat wie im Printdesign als Vorgabe fehlt, wird meistens ein Container definiert, der die Seite umschließt, deren Breite vorgibt und mittig platziert ist:

.wrapper{
width:960px; /* Feste Breite in Pixeln */
margin: 0 auto; /* Horizontale Zentrierung der Inhalte */
}

Listing 8.1    Typische Definition einer fixen Seitenbreite

Innerhalb dieses selbst definierten Rahmens werden dann die Inhalte platziert und gestaltet, natürlich auch mit festen Pixelwerten. Ist das Browserfenster groß genug, wird die Seite vollständig angezeigt, links und rechts erscheint dann der umgebende Block. Bei sehr großen Auflösungen ist dieser dann entsprechend umfangreich. Wird das Browserfenster kleiner als die fixe Pixelbreite, dann erscheinen horizontale Scrollbalken 1 (siehe Abbildung 8.29). Diese sollten unter Usability- und User-Experience-Aspekten unbedingt vermieden werden (es sei denn, die Webseite ist als horizontal scrollende ausgelegt – Ausnahmen bestätigen hier die Regel, siehe Abschnitt »Horizontales Scrollen« in Abschnitt 13.2.1, »Scrollen«).

Abbildung 8.28    Ein fixes Layout basiert auf Pixelwerten für die Breitenangaben.

Die Umsetzung mit Pixelwerten erleichtert die Arbeit erheblich. Wie oben beschrieben, wird die Abstimmung mit dem Kunden vereinfacht. Der Designer hat die volle Kontrolle bei der Gestaltung, und bei der technischen Umsetzung muss eben einfach »nur« pixelgenau das Screendesign 1:1 umgesetzt werden. So angenehm ein fixes Layout bei der Erstellung auch sein kann, es entspricht einfach nicht mehr den heutigen Anforderungen an eine moderne Webseite. Es wird für eine bestimmte Breite geplant und umgesetzt und ist damit eben im wörtlichen Sinne starr und fix. Bei großen Auflösungen wird Platz verschenkt, bei kleineren wird die Seite nicht vollständig angezeigt.

Abbildung 8.29    Die Nachteile eines fixen Layouts: Bei kleineren Auflösungen taucht der horizontale Scrollbalken 1 auf (alteoper.de).

Flexibles Layout | Ein Layout, das sich den jeweiligen Gegebenheiten anpasst, wird meistens mit Prozentwerten umgesetzt (oder inzwischen auch gerne mit em- bzw. rem-Werten). Ein solches Layout ist flexibel und wird daher auch als fluid (also flüssiges Layout) bezeichnet. Auf größeren Monitoren können die Inhalte so mehr Platz einnehmen, und auf kleineren werden sie nicht abgeschnitten.

Abbildung 8.30    Ein flexibles Layout basiert auf Prozentwerten.

Bei der Umsetzung ist ein flexibles Layout etwas komplexer. Grafikprogramme können nicht mit Prozentwerten arbeiten. Die einzelnen Gestaltungselemente müssen ja auch flexibel sein. Während Texte einfach anders umbrechen können, ist es bei Bildern schon schwieriger. Diese müssen in festen Pixelwerten angelegt und abgespeichert werden. Dazu braucht es also doch wieder eine fixe Größe. Hinzu kommt, dass das Layout nicht immer vorhersehbar ist. Was auf einem großen Monitor noch gut aussieht, mag vielleicht auf kleineren nicht mehr so sehr passen. Webdesigner und Kunde müssen sich also auf unterschiedliche Varianten der Webseite einstellen (können). Es gibt nicht mehr »das eine« Layout, das eben schon im Grafikprogramm erstellt wurde und nun in jedem Browser gleich aussieht. Auch bei den Ansichten und Erwartungen ist hier eben Flexibilität gefragt. Um das Layout flexibel zu machen, werden anstelle von Pixelwerten also Prozentwerte eingesetzt:

.wrapper{
width:90%; /* Flexible Breite, die sich nach der Browserbreite richtet */
margin: 0 auto; /* Horizontale Zentrierung der Inhalte */
}

Listing 8.2    Definition einer flexiblen Seitenbreite

Gerade bei Webseiten mit umfangreichen Datenmengen wie bei vielen Shops, Portalen oder Foren bieten sich flexible Layouts an, da der zur Verfügung stehende Browserplatz optimal ausgenutzt wird. Fluide Layouts sind auch die Basis eines responsiven Webdesigns, wie Sie gleich sehen werden.

Abbildung 8.31    Eine maximale Gesamtbreite wird in Pixeln festgelegt. Die Inhaltsbereiche werden mal in Pixeln, mal in Prozent angegeben.

Nicht selten wird eine Art Mischform aus fixem und flexiblem Layout eingesetzt. Denn klassische Unternehmenswebseiten, die sich über die volle Browserbreite ausdehnen, sehen irgendwann nicht mehr gut aus, bzw. die Texte – oder besser – Zeilenlängen sind irgendwann nicht mehr gut lesbar. Um dies zu verhindern, lässt sich per CSS die maximale Breite des Layouts festlegen:

.wrapper{
max-width:1200px; /* Maximale Breite des Layouts */
margin: 0 auto; /* Horizontale Zentrierung der Inhalte */
}

Listing 8.3    Festlegung einer maximalen Breite

Abbildung 8.32    amazon.de setzt auf eine Mischform aus fixem und fluidem Layout. So wird der Platz optimal ausgenutzt.

So wird das Gesamtlayout nicht zu breit. Ist das Browserfenster dann kleiner als der Maximalwert, passen sich die Elemente entsprechend den weiteren Vorgaben an. So ist das Layout in der Ausdehnung ab einem gewissen Punkt fix, unterhalb dieses Punkts ist es flexibel. Ein Vorgehen, das in der Praxis sehr häufig angewandt wird, denn bei aller Unsicherheit und Flexibilität bezüglich der Gestaltung sichert es doch zumindest ein angenehmes Aussehen. Und wer nicht gleich vollständig auf die Gestaltung im Grafikprogramm verzichten kann oder will, gestaltet dann das »Maximallayout« (so wie im oberen Quellcode-Beispiel von 1.200 Pixeln), und die flexiblen Veränderungen bei kleineren Auflösungen werden dann im Browser definiert und ausgestaltet.

Elastische Layouts | Ein elastisches Layout füllt die Bildschirmbreite vollständig aus – und zwar in der Breite UND in der Höhe. Dazu müssen alle eingesetzten Inhalte flexibel sein, was die Umsetzung dieses Layouttyps schwierig macht. Denn bei einer Veränderung des Viewports in der Höhe oder der Breite passen sich die Inhalte an, sodass kein Scrollbalken erscheint. Für umfangreiche Inhalte ist dieser Typ weniger geeignet. Bei Webseiten, die auf großformatige Bilder oder Videos setzen wollen und nicht allzu viele Inhalte präsentieren (müssen), kann das elastische Layout aber seine Stärken ausspielen und den zur Verfügung stehenden (Browser)platz vollständig ausnutzen.

Abbildung 8.33    convoyinteractive.com nutzt den Raum optimal aus, ein typisches elastisches Layout.

Responsive Layouts | Ein fluides Layout ist die Basis eines responsiven Webdesigns. Denn responsiv bedeutet, dass sich die Webseite unter anderem der Viewport-Breite anpasst. Anstelle von responsiv wird auch gerne von reaktionsfähig gesprochen. Die Webseite bzw. in diesem Falle das Layout reagiert auf die »äußeren« Gegebenheiten. Ein Layout mit Prozentwerten passt sich immer der Browserbreite an, selbst ohne Media Queries. Ausgehend von einem Mobile first-Ansatz, werden diese dann gebraucht, wenn die Spalten oder Inhaltsbereiche zu groß oder zu breit (z. B. die Zeilenlänge des Textes) geworden sind. Mithilfe von Media Queries bekommen die Spalten dann einen anderen, kleineren Wert, sodass sie wieder gut lesbar/erkennbar sind:

.column{
width:100%; /* Mobile-first-Ansatz: Die Inhaltsspalte erstreckt sich über den kompletten Viewport */
}
@media (min-width: 640px) { /* Bei größeren Auflösungen ... */
.column{
width:50%; /* ... wird die Spalte halbiert, sodass zwei Spalten nebeneinander passen können. */
}
}

Listing 8.4    Anpassung der Spaltenbreite bei größeren Auflösungen

Abbildung 8.34    So sehen fluide Layouts aus. mediaqueri.es präsentiert jede Menge responsive Webdesigns.

Responsive Layouts sind absolut flexibel bezüglich der Ausgabebreite. Umso komplexer sind sie aber in der Umsetzung. Wie will man jede mögliche Browserbreite samt Anpassung in Prozenten vorher durchdeklinieren und dem Kunden veranschaulichen? Das geht nicht. Zumindest nicht im Grafikprogramm. Auch die Anpassung der Inhalte und des Designs erfordert mehr Arbeit in der Gestaltung und der Umsetzung. Der frühzeitige Wechsel in den Browser hilft, bei der Umsetzung das Ergebnis besser beurteilen zu können. Und vor allem sind keinerlei Einschränkungen durch Geräte oder Bildschirmauflösungen zu erwarten. Diesen Ansatz bezeichnet man als zukunftsfähig.

Adaptive Layouts | Neben der Ideallösung eines responsiven Layouts mit einem fluiden Raster gibt es die Umsetzung mit fixen Pixelwerten, die aber mit Media Queries für unterschiedliche Breiten verändert werden. Die Webseite besitzt sozusagen mehrere fixe Layouts, die je nach Browserbreite angezeigt werden. Da mit fixen Rastern gearbeitet wird, lassen sich die einzelnen Layoutvarianten wieder gut im Grafikprogramm simulieren. Und durch die starren Raster ist auch der Gestaltungsspielraum wieder größer bzw. das Ergebnis besser vorhersehbar.

Fixe Layouts bedeuten aber eben auch wieder nur die Optimierung für bestimmte Größen, auch wenn es mehrere sind. Es müssen also bestimmte Breiten abgefragt werden, bei denen sich das Layout ändert. Dieses Verhalten nennt man adaptiv, was so viel wie anpassungsfähig bedeutet. Der entscheidende Unterschied zu responsiven Layouts liegt darin, dass diese auf jede mögliche Bildschirmgröße reagieren können, während adaptive Layouts nur auf bestimmte Größen reagieren und dafür verschiedene fixe Layouts entwickelt wurden.

Meistens werden bei adaptiven Layouts standardmäßig die Auflösungen der Apple-Geräte (iPhone, iPad) als Vorlage für die Media Queries eingesetzt. Dies entspricht aber mehr dem Folgen eines vermeintlichen Trends und betrachtet weniger die Viewports der tatsächlichen Nutzer, was natürlich hilfreicher wäre.

Es gibt keine allgemeingültige Antwort auf die Frage, ob ein responsives oder adaptives Layout verwendet werden sollte. Die Hauptsache ist erst einmal, dass sich das Layout überhaupt unterschiedlichen Browserbreiten anpassen kann. Ein responsives Layout ist sicherlich am aufwendigsten in der Umsetzung und für Kunden, die noch keine Erfahrung damit haben, am schwierigsten nachzuvollziehen. Der frühe Wechsel vom Grafikprogramm in den Browser sorgt für eine optimierte Umsetzung ohne zu viele Reibungsverluste. Der Nutzen eines responsiven Layouts ist aufgrund der optimalen Platzausnutzung und der Beachtung aller möglichen aktuellen und zukünftigen Bildschirmbreiten am größten.

 

8.3.3    Rastersysteme 

Ein dem Layout zugrunde liegendes Raster hilft sowohl bei der Arbeit in einem Grafikprogramm bei der Gestaltung eines Screendesigns als auch bei der technischen Umsetzung mithilfe von CSS. Neben den visuellen Vorteilen/Effekten einer einheitlichen Struktur kann die Erstellung eines Rasters Ihnen auch viel Arbeit abnehmen bzw. sie vereinfachen.

Vorüberlegungen | Bevor Sie ein Raster für Ihr eigenes Projekt erstellen, sollten Sie sich einige Gedanken machen. Der Einsatz von Gestaltungsrastern im Webdesign bringt jede Menge Fragen mit sich: Wie groß sind die einzelnen Spalten? Wie viele Spalten sollen es sein? Welche Maßeinheiten zur Spaltenbreite werden benutzt? Wie groß sollen die Abstände zwischen den Spalten sein? Werden die Abstände mit margin (Außenabstand) oder padding (Innenabstand) definiert? Oder nimmt man besser gleich ein vorgefertigtes Raster?

Rasterkalkulatoren

Es gibt einige Online-Tools, mit denen sich Raster bequem berechnen und erstellen lassen. Zu den üblichen Einstellungsoptionen gehören die Anzahl der Spalten, die Seitenbreite, die Spaltenbreite und der Abstand zwischen den Spalten.

Die meisten bieten einen Download des erstellten Rasters an, teilweise als HTML- und CSS-Datei, manchmal auch als Bilddatei. Im Folgenden finden Sie eine kurze Sammlung von Grid-Kalkulatoren, die Sie sich anschauen sollten, wenn Sie ein Raster erstellen möchten:

• gridcalculator.dk

• gridulator.com

Inzwischen gibt es sogar Tools, mit denen sich responsive Raster erstellen lassen:

• gridpak.com

Abbildung 8.35    So sieht ein typischer Rasterkalkulator aus. Sie finden verschiedene Einstellungsoptionen samt Download-Möglichkeit wie bei gridcalculator.dk.

Eigentlich müsste man gar kein eigenes Raster mehr aufbauen angesichts der vielen Rastersysteme (häufig auch Grid-Systeme genannt), die es schon gibt. Solche vorgefertigten Systeme haben natürlich ihre Vor- und Nachteile. Sie können einem unglaublich viel Planungs- und Entwicklungsarbeit abnehmen. Teilweise werden Vorlagen für einzelne Grafikprogramme mit Hilfslinien bis zum fertigen HTML- und CSS-Code samt Media-Queries-Optimierung für unterschiedliche Viewports mitgeliefert.

Vorgefertigte Rastersysteme | Vorgefertigte Systeme bedürfen einer Einarbeitungszeit, die sicherlich mit jedem Einsatz des Systems geringer wird, aber nicht zu unterschätzen ist. Teilweise sind sie sehr umfangreich und manchmal gar komplex. Und wer löscht schon wirklich ungenutzten Code? So kommt am Ende im ungünstigsten Fall ein Grid-System zum Einsatz, das für den tatsächlichen Bedarf völlig überdimensioniert ist.

Abbildung 8.36    Zwölf Spalten oder 16 Spalten? 960 Pixel Breite oder 1.140 Pixel Breite? Die Auswahl an vorgefertigten Rastersystemen ist groß.

Grid-Systeme sind nicht immer individuell genau passend für die Bedürfnisse des aktuellen Projekts. Daher ist es oft sinnvoll, sein eigenes zu entwickeln – ohne umfangreiche Spaltendefinitionen, die dann doch nicht gebraucht werden. Vorgefertigte Systeme definieren immer eine bestimmte Anzahl Spalten, die gleich groß sind. In der Praxis ist dies nicht immer so. Eine Subnavigation in der linken Spalte, eine Sidebar in der rechten Spalte können andere, vielleicht sogar krumme Werte bekommen, meistens ist das von den Inhalten abhängig. Vielleicht sind die Subnavigationspunkte sehr lang, oder auf die rechte Seite muss ein Werbebanner mit einer bestimmten Größe. Auch Schriftgröße und -art beeinflussen eine mögliche Spaltenbreite. Fallen diese sehr groß aus, braucht der Text mehr Platz. All das sind Aspekte, die sich erst beim Gestalten ergeben.

Abbildung 8.37    Die großen Frameworks sind mit einer Unmenge Komponenten ausgestattet, wie hier Buttons bei foundation.zurb.com.