Inhalt
Dieser Artikel erschien erstmals in Ausgabe 211 des .net-Magazins - dem weltweit meistverkauften Magazin für Webdesigner und -entwickler.
Responsive Webdesign, eine von Ethan Marcotte geprägte Methode, hat in letzter Zeit viel Aufmerksamkeit erhalten. In seiner einfachsten Form verwendet es ein flexibles Raster, um ein flüssiges Layout zu erstellen, und Medienabfragen, um Probleme zu beheben, die auftreten, wenn die Struktur zu breit oder zu eng wird. Es ist großartig und ebnet den Weg für anpassungsfähigere Websites.
Bei Responsive Design dreht sich alles um flüssige Layouts. Ich bevorzuge immer noch festgelegte Breiten. Das ist in Ordnung, aber wir statischen Designer haben unsere Taktik nicht ganz aktualisiert, um mit den unzähligen heute verwendeten Bildschirmgrößen fertig zu werden: 960px sind nicht mehr gut genug.
Medienabfragen sind die Schlüsselelemente adaptiver Websites. Wir könnten sie einfach verwenden, um ein optimiertes Layout für alle gängigen Bildschirmgrößen zu erstellen, die heute verwendet werden, wobei jedes über ein eigenes pixelbasiertes Raster verfügt. Das Ergebnis wäre wahrscheinlich eine Reihe von Layouts, die für sich genommen gut aussehen würden, aber nicht miteinander übereinstimmen würden.
Angenommen, wir haben Layouts für 320px, 768px, 1.024px und 1.280px erstellt. Die optimalen Gitter für jedes dieser Elemente würden unterschiedliche Spaltenbreiten erfordern, was geringfügige Änderungen der Abmessungen der Elemente bedeuten würde, wodurch das Gefühl entsteht, dass sich jedes Design geringfügig vom anderen unterscheidet. Diese Art von Abweichung ist schlecht.
Wer möchte wirklich vier Raster für eine einzelne Website erstellen? Erstellen Sie stattdessen ein System, mit dem Sie mehrere Layouts effizient erstellen und so konsistent wie möglich halten können.
Stellen Sie sich nun vor, wir entwerfen ein Raster für eine Marke. Trotz der Größe der Medien, auf die es projiziert wird, müssten die Proportionen beibehalten werden: Visitenkarten, Schreibwaren, Werbetafeln usw. Es würde höchstwahrscheinlich vergrößert und verkleinert, um zu passen, und der Inhalt darin würde einfach die Größe mit ihm nach Bedarf ändern.
In Website-Layouts können wir jedoch nicht einfach skalieren, was sich in unseren Rastern befindet, wenn sich die Bildschirmgröße ändert. Im Allgemeinen möchten wir, dass alle Text- und Elementmaße gleich bleiben, um ein Gefühl der Vertrautheit bei jedem Design zu gewährleisten.
Aufbau des Rastersystems
Wir haben festgestellt, dass die Spaltenbreiten in jedem Layout gleich bleiben müssen. Dies gilt auch für die Lücken zwischen den Spalten, da sie die Abmessungen von Elementen ändern würden, die sich über mehrere Spalten erstrecken. Wir haben noch zwei Dinge zu erledigen: die Ränder um das Raster und die Anzahl der Spalten.
Ich werde Less Framework - einen von mir erstellten CSS-Entwurf - als Beispiel verwenden. Darin verwende ich eine Spaltenbreite von 60 Pixel und 24 Pixel Lücken zwischen den Spalten. Ich habe festgestellt, dass diese Dimensionen bemerkenswert flexibel sind. Mit ihnen kann ich Layouts mit drei Spalten und 46 Pixel Rändern (320 Pixel), fünf Spalten und 42 Pixel Rändern (480 Pixel), acht Spalten und 60 Pixel Rändern (768 Pixel) und 13 Spalten mit 72 Pixel Rändern erstellen. Es bleibt noch Platz für Browser-Chrome (1.212 Pixel), und es ist einfach, bei Bedarf eine 11-Spalten-Option mit 42 Pixel-Rändern (984 Pixel) hinzuzufügen.
In einem solchen System können Elemente, die für ein Layout erstellt wurden, häufig in anderen wiederverwendet werden. Beispielsweise passt ein drei Spalten breiter Textblock in jedes der Layouts, und ein sechs Spalten breites Bild kann auf 50 Prozent verkleinert werden, um sich in das dreispaltige Layout einzufügen, wobei die Vorteile des iPhone 4 genutzt werden doppelte Auflösung.
Die Implementierung ist einfach. Wählen Sie zunächst ein Standardlayout aus. Dies wird allen Browsern bereitgestellt, die mit Medienabfragen nicht kompatibel sind. Die 320px ist eine sichere Wette. Schreiben Sie das CSS für dieses Layout normal, ohne dass Medienabfragen angewendet werden. Schreiben Sie dann die anderen Layouts in eine Inline-Medienabfrage. Sie werden von allen modernen Desktop- und mobilen Browsern verwendet und erben Stile vom Standardlayout, sodass Sie nicht zu viel zusätzliches CSS schreiben müssen. Sie werden nur nach Bedarf überschreiben.
Browser, die mit Medienabfragen nicht kompatibel sind - insbesondere Internet Explorer 6-8 - ignorieren jede Stildeklaration in einer Inline-Medienabfrage unter Verwendung des Standardlayouts. Sie können jedoch JavaScript verwenden, um hier Unterstützung hinzuzufügen. Zum Zeitpunkt des Schreibens scheint Respond.js am besten zu sein.
