Was bedeutet Responsive Design?

CSS 3 und HTML 5 machen Responsive Design erst möglich

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.

Responsive Design mit Grid Frameworks

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.)

Heinrich Sturm gestaltet, schreibt und programmiert in Berlin als Freelancer fürs Internet. Sein Blog ist eine Sammlung von Tipps und Tricks rund um das Thema Webentwicklung. Weiter zur Übersicht über sein gesamtes Leistungsangebot. Wenn Sie Fragen haben, nehmen Sie bitte Kontakt auf.


Alle Blog-Einträge