Die Größe und Auflösung eines Bildschirms kann stark varieren: Ein heutiger PC-Monitor kann eine Auflösung von 1680x1050 Pixeln und mehr besitzen, während ein durchschnittliches Smartphone eine Auflösung von nur 320x480 Pixeln hat. Responsives Webdesign versucht alle verschiedenen Auflösungen zu bedienen, ohne daß zusätzliche Varianten der Seite ausgegeben werden. (Wie bisher zum Beispiel auf einer Subdomain wie m.domain.com.) Um mit einem einzigen Layout alle Auflösungen zu bedienen, nutzt man die Fähigkeit von CSS 3 und HTML 5 unterschiedliche Bildschirmauflösungen zu erkennen und entsprechend angepassten Code auszuliefern. Das Zauberwort heißt Media Queries, die in CSS 3 um viele Funktionen erweitert wurden. Die Kunst bei der Erstellung von Responsive Design Websites ist natürlich bei allen Auflösungen die Benutzerfreundlichkeit der Website zu erhalten.
Eine Website für sehr unterschiedliche Auflösungen zu gestalten, bedeutet höheren Aufwand. Um die Arbeit zu vereinfachen, kann man auf sogenannte Grid Frameworks zurückgreifen. Das sind Vorlagen, die den Bildschirm je nach Auflösung in verschiedene Spaltenraster aufteilen. Dabei sollte man bei der Gestaltung bereits die Aufteilung des Rastersystems im Blick haben, dann sind die Frameworks eine wirkliche Arbeitserleichterung. Ein Nachteil ist, daß die Frameworks oftmals einen großen "Codebalast" mit sich rumschleppen, der nicht benötigt wird und bei mobilen Endgeräten lange Ladezeiten verursacht. Hier sind einige Grid Systeme kurz vorgestellt, die Responsives Webdesign unterstützen. Solche Frameworks nennt man Fluid Grid Systems.
| Framework | Spalten | Max. Auflösung |
|---|---|---|
| Less Framework | 10 | 992 Pixel |
| Foundation | 12 | 940 Pixel |
| Skeleton | 16 | 960 Pixel |
| Golden Grid System |
16 |
2560 Pixel |
| Cssgrid | 12 |
1140 Pixel |
(Eigentlich habe ich vor, im Blog einzelne Systeme vorzustellen. Mal sehen ob die Zeit reicht. Übrigens basiert diese Seite auf Skeleton.)