1 Denken in flexiblen Strukturen
»There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.«
Stephen Hay auf Twitter
In unserem ersten Kapitel geht es darum, wasResponsive Webdesign ausmacht – nämlich das Denken in flexiblen Strukturen. Wir schauen uns an, was sich verändert hat zwischen dem Web von gestern und heute, und zeigen Ihnen, warum die Anpassungsfähigkeit im Web entscheidend ist und getrennte Mobile- und Desktopversionen out sind. Wir stellen Ihnen ein paar responsive Websites vor und zeigen Ihnen, wo Sie sich inspirieren lassen können, um richtig einzusteigen. Wir erklären Ihnen die Unterschiede zwischen fixen, fluiden, adaptiven und responsiven Layouts, und wir verraten Ihnen, wie Sie jedes feste Layoutraster ganz einfach in ein fluides umrechnen können und welche Tools Sie dabei unterstützen. Des Weiteren werden Sie, wenn Sie dieses Kapitel gelesen haben, auch die drei Hauptzutaten für responsive Websites kennengelernt haben.
1.1 Responsive Webdesign: Was bedeutet das eigentlich?
UnterResponsive Webdesign verstehen wir ein Bündel von Maßnahmen, mit dem Websites so angelegt werden, dass sie sich unterschiedlichen visuellen Ausgabegeräten möglichst optimal anpassen.
Eine responsive Website besteht aus drei »Hauptzutaten«:
- einem fluiden Layoutraster
- anpassungsfähigen Inhalten
- Layoutumbrüchen durch Media Queries
Geprägt hat den BegriffResponsive Design der Bostoner Designer und Entwickler Ethan Marcotte in einem Artikel für das Webmagazin »A List Apart« (http://alistapart.com/article/responsive-web-design) schon im Mai 2010. Er beschreibt dort die Gr
