Neu auf meinem Schreibtisch: Responsive Web Design

Neu auf meinem Schreibtisch: Responsive Web Design

Dieser Tage habe ich ja schon ein bisschen über Responsive Web Design geschrieben, heute geht es um ein Buch, das ich mir passend dazu als PDF gekauft habe: Responsive Web Design von Ethan Marcotte. Ein lesenswerter, kurzweiliger Einstieg in das Responsive Web Design und damit einem geschickten Zugang zu etwas altem Neuen.

Um was gehts eigentlich beim Responsive Web Design?

responsive = ansprechbar, reaktionsfähig, reagierend. “Reagierendes Webdesign” – klingt eher nach einer gelungenen chemischen Verbindung. Anpassungsfähig gefällt mir da im Deutschen besser. Vielleicht adaptives Webdesign?  Was damit gemeint ist? Designs, die so gestaltet sind, dass sie (flexibel?) auf die Gegebenheiten der jeweiligen Endgeräte reagieren.

Die Schlagwörter heißen: Media Query (”wer bist du?”), Flexible Grid und Fluid Images. Alles flexibel, alles im Fluss. Und genau darum geht es auch in Marcottes Buch.

Das Buch

Zunächst geht es aber erstmal um das “responsive” hinter dem Webdesign und das macht Ethan Marcotte pfiffig und verständlich mit einigen sehr schönen Analogien aus der realen Welt.

Das erste große Kapitel beschäftigt sich mit dem Grid, also jenem Raster, das uns Webdesignern hilft, aufgeräumte und gut strukturierte Websites zu gestalten. Marotte stellt durchgängig gegebenüber: Wie haben wir es bisher gemacht: mit 960 Pixeln beispielsweise. Und wie funktioniert es “flexible”? Mit Prozentangaben. Das Ganze wird nicht nur am Bild exerziert sondern auch vorgerechnet. Sehr praktisch, sehr anschaulich. Dabei geht es aber nicht nur um Grids sondern beispielsweise auch um Typo.

Ähnlich der Aufbau im Kapitel über die Flexible/Fluid Images. Neben vielen Bildern stehen viele Erläuterungen, die die Notwendigkeit prozentualer Angaben deutlich machen und uns allen nochmal die wesentlichen Macken alter Browser wie dem IE6 verdeutlichen.

Das letzte technische Kapitel dreht sich um die Media Queries. Was bedeutet es eigentlich, wie lautet die Syntax, wie wendet man das Ganze an – ohne Media Query kein richtiges Responsive Design.

Wertvoll zum Schluss: wie wird man ein “responsive” Webdesigner? Wir denken immer noch viel zu sehr in großen Monitoren, in Laptops und dann vielleicht irgendwann in iPads und Smartphones. Viele Kunden denken immer noch nicht wirklich in mobilen Endgeräten oder viel mehr in der Summe an Geräten und vor allem ihre Nutzer und an den Nutzungskontext.
Marcotte gibt in diesem Kapitel Einblicke in mögliche Vorgehensweisen bei Konzeption wie auch technischer Umsetzung und bringt aktuelle Trends und “Forschung” mit ganz praktischen Überlegungen zusammen.

Das Buch wird abgerundet von einer kleinen, aber feinen Linksammlung, aktuell und anspruchsvoll, vor allem aber ein guter Einstieg ins Weiterlesen.

Fazit?

Für mich mal wieder eine Anschaffung, die sich gelohnt hat und weiter lohnen wird. Das Thema ist im Prinzip kein ganz neues, es hat nur einen Namen und es gewinnt weiter an Bedeutung, weil mobile Devices einfach immer und immer mehr zu einer Selbstverständlichkeit werden, wenn sie es nicht sogar schon sind (für uns sowieso).

Das Buch kann bei online bestellen. Es ist als Paperback, als eBook oder im Bundle erhältlich, billigstenfalls für 9 US-Dollar. Im eBook Bundle gibts übrigens eine Menge an Dateien: neben einem PDF auch eine .mobi .epub Variante.  Umschauen im Shop lohnt sich übrigens, es gibt einige andere interessante Bücher, auch solche, die demnächst erscheinen werden. Sicher nicht meine letzte Bestellung dort.

Ethan Marcotte
Responsive Web Design
A Book Apart
New York
ISBN 978-0-9844425-7-7

Bildnachweis und Copyright:

3 Comments

  1. anonym 17. Juni 2011
  2. anonym 17. Juni 2011
  3. anonym 6. Juli 2011

Leave a Reply