Bei der Darstellung moderner Websites wird immer mehr auf Responsive Design zurück gegriffen. Das Aussehen der Website passt sich dem Ausgabegerät an. Eine Website sieht also auf einem kleinen Tablet anders aus als auf dem großen Monitor eines Destop-PCs. Doch wie funktioniert das eigentlich genau, und was muss man bei der Programmierung beachten? Das sind die Fragen, denen Andrea Ertel und Kai Laborenz in ihrem Buch „Responsive Design – anpassungsfähige Websites programmieren und gestalten“ auf über 400 Seiten auf den Grund gehen.

Responsive Design – Einführung
Die Autoren halten sich nur kurz mit den Vorzügen von Responsive Design auf. Dass sich Inhalte dem User anpassen und nicht der User den Inhalten setzen die beiden mal voraus. Der Inhalt des Buches sind auch mehr die Grundlagen und technische Umsetzung, als das Online Marketing. Und mit der Technik geht es auch gleich los. Andrea Ertel und Kai Laborenz zeigen zunächst die verschiedenen Layouttypen auf, und wie man technisch von einem festen Layout zu einem responsive Layout kommt. so sind sie sehr schnell beim Thema gerasterte Websites und dem Grid-Layout, das die Grundlage vieler aktueller Websites ist.

Media Queries – die Grundlage des responive Designs
Media Queries sind nichts anderes als Abfragen des Webservers an das Ausgabegerät. Hier definiert der Designer welche Inhalte auf welcher Displaygröße angezeigt werden. Was technisch nicht mehr eine so große Herausforderung ist verlangt vom Designer allerdings eine Anpassung seiner Denkweise. Die Autoren zeigen hier sehr schön wie die Umsetzung eines Entwurfs in ein flexibles Layout funktionieren kann. Sie geben viele Beispiele und erklären anhand vom Quellcode wie das Ganze technisch umgesetzt wird. den Quellcode beschränken sie hierbei auf das Nötigste.

Design follows Content
Das Buch bietet einen kompletten Workflow wie man aus einer Idee und einem Entwurf für eine Website ein komplettes Projekt macht – alles unter dem Gesichtspunkt des responsive Designs.

Mobile First
Die Zugriffe durch mobile Geräte werden in den nächsten Jahren noch zunehmen. Vor diesem Hintergrund entstand schon 2009 das Schlagwort Mobile First. Luke Wroblewski rät hier Designer mit der mobilen Version einer Seite zu beginnen und die Desktop-Variante aus dieser zu entwickeln. Der Hintergrund dieses Ausdrucks ist, dass Desktop-Varianten in der Regel einfach überladen sind. Bei einer mobilen Website kann man sich das nicht erlauben und muss sich auf das Wesentliche beschränken. Im siebten Kapitel wird dies anhand eines Praxisbeispiels deutlich.

Frameworks erleichternd die Arbeit
Wer nun in der ersten Hälfte des Buches schon Schweißperlen bekommen hat, was er alles bei RD beachten muss, wird sich über das Kapitel Frameworks freuen. Hier werden die wichtigsten Frameworks und Bibliotheken vorgestellt, die einem schon viel Arbeit abnehmen können.

Im letzten Teil des Buches gehen Andrea Ertel und Kai Laborenz dann noch auf die Veränderungen ein, die Responsive Design für Webkomponenten bedeutet. Wie verhalten sich Grafiken, Formulare und andere Elemente. Der letzte Teil des Buches handelt dann vom Testen der Layouts und der Optimierung der Elemente und der Qualitätssicherung.

Fazit:
Das Buch Responsive Design ist ein kompletter Leitfaden für Webentwickler, die sich mit der Thematik ausführlich beschäftigen möchten. Man erkennt sehr schnell, dass es sich bei den Autoren um zwei Leute aus der Praxis handelt, die wissen worauf es ankommt. Das merkt man besonders am logischen und praxisnahen Aufbau des Buches. Man wird nicht mit langen Erklärungen gelangweilt sondern bekommt die Fakten gut dargelegt.

Dem Buch liegt noch eine DVD mit Beispielen, Video-Lektionen und responsive Frameworks bei.

Bonus-Website
Ein cooles Feature des Buches von Galileo Computing ist die Bonus-Website. Ein Buch ist ja immer nur eine Momentaufnahme. Doch gerade bei vielen technischen Themen ändert sich da schnell sehr viel. Galileo Computing stellt auf seiner Website einen Bereich zur Verfügung in dem weiterführende Infos zu einem Thema veröffentlicht werden. Im Inneren des Buches finden Sie einen Zugangscode. Mit diesem Code können Sie im Internet dann weitere Infos und neue Fakten zum Thema Responsive Design abrufen.