Web-Raster – responsives Webdesign
Web-Raster – responsives Webdesign
Seit mobile Geräte, wie Handys, mit dem Internet verbunden werden und darüber damit Websites aufgerufen werden, genügt es nicht mehr ein einziges Web-Layout zu entwickeln. Die Anforderungen an eine zeitgemäße Website sind spätestens seit den Smartphones so vielfältig, dass ein üblicher Photoshop-Entwurf lange nicht mehr zeigen kann, wie das Design bei den verschiedenen Bildschirm-Auflösungen der unterschiedlichen Displays aussehen wird.
Bei weitem noch nicht alle Websysteme oder Webdesigner verwenden heute Rastersysteme, sogenannte Grids
Kann ich darauf verzichten?
NEIN, verwenden Sie keines dieser überalterten Systeme mehr, es gibt viele aktualisierte modernere Web-Systeme als alternative. Auch Ihr Webdesigner darf nicht mehr ohne Grid arbeiten, denn ohne Grid kein responsives – also auf unterschiedliche Displaygrößen angepasstes – Webdesign. Einzige Ausnahme: Es werden mehrere Designs für die unterschiedlichen Displayauflösungen designed (umständlich und teuer).
Haben Sie kein, auf Mobilgeräte, optimiertes Webdesign, werden Sie Suchmaschinen wie "Google" im Ranking deutlich benachteiligen!
Gestaltungsraster CSS-Grid
Heute basieren Website in aller Regel auf einem sogenannten CSS-Grid System - einem Gestaltungsraster. So ein Raster hat dabei verschiedene Aufgaben: Einerseits trägt es zu einem strukturierten Layout bei und sorgt dafür, dass eine Website professionell wirkt, andererseits unterstützt das Raster auch den Webdesigner bei der Gestaltung.
Raster (Grid) bei der Gestaltung eines Layouts
Ein so genanntes Gestaltungsraster ist ein unsichtbares System aus Linien, an dem die verschiedenen Gestaltungselemente ausgerichtet werden. Ein Web-Layout das auf einem Raster basiert, ist aufgeräumter und wirkt harmonischer. Besucher empfinden ein rasterbasiertes Layout daher unterbewusst als deutlich professioneller.
Sobald ein Raster im Hintergrund arbeitet, hat man selbstverständlich trotzdem die Möglichkeit Elemente bewusst aus dem Raster ausbrechen zu lassen. Diese treten dann besonders stark in den Vordergrund.
Besonderheiten von Rastern im Web Design
Raster existieren seit jeher im Print-, Grafik- und Web‑Design. Gestaltungsraster im Print- und Grafik-Design leiten sich in aller Regel von gestalterischen Elementen oder Rahmenbedingungen ab. Der Satzspiegel einer Broschüre basiert beispielsweise auf dem Papierformat oder Objekte werden zueinander im sogenannten goldenen Schnitt positioniert.
Im Web Design verhalten sich Raster etwas anders. Das Raster leitet sich nicht aus der Gestaltung ab, sondern es wird zuerst konstruiert. Das Layout von Websites orientiert sich daher am konstruierten Raster.
Die unterschiedlichen Herangehensweisen bei der Arbeit mit Gestaltungsraster hängen auch damit zusammen, dass im Web flexible Flächen existieren, die nach gängigen Harmonieregeln unterteilt werden. Im Print‑Design, gibt z.B. das Papier das Format vor, wenn das Papier bereits existiert. Der Viewport im Browser hingegen ist immer flexibel.
Responsive CSS-Grids in aller Regel 12-spaltig
Im Responsive Web Design sind Raster deutlich komplexer geworden. Im Normalfall haben wir es hierbei mit mehreren Gestaltungsrastern zu tun, die an definierten Stellen, sogenannten Breakpoints, umbrechen und die Anzahl an Rasterspalten ändern. Es gibt beispielsweise eine 4-spaltige Ansicht auf kleinen Displays, eine 8‑spaltige Ansicht in mittleren Displaygrößen und eine 12‑spaltige Desktop‑Darstellung. Darüber hinaus sind in einem responsiven Layout die Rasterspalten in der Breite flexibel. Die Breitenangaben basieren daher auf Prozentwerten.
