Das Dokument beschreibt die Entwicklung und Prinzipien des Responsive Web Designs, beginnend mit Cameron Adams' Idee 2004 und Ethan Marcottes Einführung von Media Queries 2010. Es unterscheidet zwischen responsive und adaptive Layouts, beleuchtet die Herausforderungen und Strategien beim Einsatz von CSS und nennt wichtige Werkzeuge zur Umsetzung und zum Testen. Zudem wird die Bedeutung von Mobile First und der Fokus auf essenzielle Inhalte im Design hervorgehoben.

1. Responsive Web Design
Michael Schmid
Head Technology
michael@amazeelabs.com
@schnitzel

2. Was ist
Responsive Web Design?

3. der Start
21. September 2004
Cameron Adams kommt mit
einer Idee für
„Resolution dependent
layout“

4. http://www.themaninblue.com/experiment/ResolutionLayout/

5. der Start
• basierend auf Javascript
• nicht sehr schnell
• wenig Aufmerksamkeit

6. zweiter Anlauf
25. Mai 2010
Ethan Marcotte schlägt
MediaQueries für
Responsive Seiten vor
http://www.alistapart.com/articles/responsive-web-design/

7. Media Queries CSS 2.1
<link rel="stylesheet" type="text/css"
href="core.css" media="screen" />
<link rel="stylesheet" type="text/css"
href="print.css" media="print" />

8. Media Queries CSS 3
<link rel="stylesheet" type="text/css"
media="screen and (max-width: 480px)"
href="mobile.css" />

10. zweiter Anlauf
• basierend auf CSS
• sehr schnell
• einfach
• grosse Aufmerksamkeit
• kein IE 6-8 Support
• polyfill „css3-mediaqueries.js“

11. Responsive vs. Adaptive
• Responsive
fluid layout
• Adaptive
mehrere fixe layouts
• Hybrid
Kombination von beiden

12. Kombinationen
/* Wide Layout */
all and (min-width: 1220px)
/* Normal Layout */
all and (min-width: 980px) and
(max-width: 1219px)
/* Narrow Layout (Tablet) */
all and (min-width: 740px) and
(max-width: 979px)

13. „Responsive“
http://www.smashingmagazine.com

14. „Hybrid“
http://www.amazeelabs.com

15. Drupal & Responsive
Zen
Omega
AdaptiveTheme
Fusion
Sasson

16. SASS
• CSS on Steriods
$blue: #3bbfce; table.hl {
$margin: 16px; margin: 2em 0;
td.ln {
.content-navigation { text-align: right;
border-color: $blue; }
color: }
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

17. COMPASS
• Extension für SASS
• Standart Theming Patterns:
• Sprites, Images, Gradients, CSS3,
und, und, und

18. Mobile First?
Mit Mobile First das
Standartlayout ist Mobil /* Wide Layout */
all and (min-width: 1220px)
Pros
• Mobile First = Content /* Normal Layout */
First all and (min-width: 980px)
• Zukunft?
Cons /* Narrow Layout (Tablet) */
• Nicht ganz einfach mit all and (min-width: 740px)
Kunden

19. Breakpoints definieren?
• Was ist der wichtigste Inhalt
• Können wir einigen Inhalt
auslassen?
• Wireframes, Papier, etc.
• Sind evtl. Sub-Breakpoints
nötig?

21. Nicht jede Webseite
designen
• Responsive Design nur für die
wichtigsten Webseiten
• Nicht vergessen: Grössere
Buttons?

22. testing?
• Browser
• Responsinator.com
• Adobe Edge Inspect
• Browserstack
• Xcode (iOS Simulator) & Web
Inspector: http://bit.ly/W7oh4j
• Android Emulator

23. Responsive Images
• Hard!
• drupal.org/project/resp_img
• Neuer Picture Tag