Der Anteil an mobilen Besuchern von Webseiten steigt stetig und immer rasanter. Eine der Lösungen dafür nennt sich "Responsive Web Design" und wird von Drupal durch verschiedenste Base Themes unterstützt. Allerdings gibt es dabei einige wichtige Dinge zu beachten, da die Möglichkeiten für Responsive Web Design fast endlos sind. Michael Schmid von Amazee Labs hat schon mehrere Responsive Webseiten geplant und umgesetzt und wird einige der Hürden und dessen Lösungen präsentieren. • Was ist Responsive Web Design und was kann es? • Übersicht über die verschiedensten Responsive Themes in Drupal 7 • Probleme und Learnings nach über 10 gebauten Drupal Responsive Web Design Webseiten

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