Responsive Web Design         Michael Schmid        Head Technology     michael@amazeelabs.com           @schnitzel
Was istResponsive Web Design?
der Start21. September 2004   Cameron Adams kommt mit   einer Idee für   „Resolution dependent   layout“
http://www.themaninblue.com/experiment/ResolutionLayout/
der Start• basierend auf Javascript• nicht sehr schnell• wenig Aufmerksamkeit
zweiter Anlauf25. Mai 2010   Ethan Marcotte schlägt   MediaQueries für   Responsive Seiten vor   http://www.alistapart.com...
Media Queries CSS 2.1<link rel="stylesheet" type="text/css"href="core.css" media="screen" /><link rel="stylesheet" type="t...
Media Queries CSS 3<link rel="stylesheet" type="text/css"media="screen and (max-width: 480px)"href="mobile.css" />
zweiter Anlauf• basierend auf CSS• sehr schnell• einfach• grosse Aufmerksamkeit• kein IE 6-8 Support • polyfill „css3-medi...
Responsive vs. Adaptive  • Responsive    fluid layout  • Adaptive    mehrere fixe layouts  • Hybrid    Kombination von bei...
Kombinationen/* Wide Layout */all and (min-width: 1220px)  /* Normal Layout */all and (min-width: 980px) and(max-width: 12...
„Responsive“http://www.smashingmagazine.com
„Hybrid“http://www.amazeelabs.com
Drupal & ResponsiveZenOmegaAdaptiveThemeFusionSasson
SASS• CSS on Steriods$blue: #3bbfce;             table.hl {$margin: 16px;                margin: 2em 0;                   ...
COMPASS• Extension für SASS• Standart Theming Patterns:• Sprites, Images, Gradients, CSS3,  und, und, und
Mobile First?Mit Mobile First dasStandartlayout ist Mobil   /* Wide Layout */                           all and (min-width...
Breakpoints definieren? • Was ist der wichtigste Inhalt • Können wir einigen Inhalt   auslassen? • Wireframes, Papier, etc...
Nicht jede Webseite      designen• Responsive Design nur für die  wichtigsten Webseiten• Nicht vergessen: Grössere  Buttons?
testing?• Browser• Responsinator.com• Adobe Edge Inspect• Browserstack• Xcode (iOS Simulator) & Web  Inspector: http://bit...
Responsive Images• Hard!• drupal.org/project/resp_img• Neuer Picture Tag
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
Upcoming SlideShare
Loading in …5
×

Responsive Web Design für Mobilgeräte mit Drupal

1,272 views

Published on

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

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,272
On SlideShare
0
From Embeds
0
Number of Embeds
101
Actions
Shares
0
Downloads
11
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Responsive Web Design für Mobilgeräte mit Drupal

  1. 1. Responsive Web Design Michael Schmid Head Technology michael@amazeelabs.com @schnitzel
  2. 2. Was istResponsive Web Design?
  3. 3. der Start21. September 2004 Cameron Adams kommt mit einer Idee für „Resolution dependent layout“
  4. 4. http://www.themaninblue.com/experiment/ResolutionLayout/
  5. 5. der Start• basierend auf Javascript• nicht sehr schnell• wenig Aufmerksamkeit
  6. 6. zweiter Anlauf25. Mai 2010 Ethan Marcotte schlägt MediaQueries für Responsive Seiten vor http://www.alistapart.com/articles/responsive-web-design/
  7. 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. 8. Media Queries CSS 3<link rel="stylesheet" type="text/css"media="screen and (max-width: 480px)"href="mobile.css" />
  9. 9. zweiter Anlauf• basierend auf CSS• sehr schnell• einfach• grosse Aufmerksamkeit• kein IE 6-8 Support • polyfill „css3-mediaqueries.js“
  10. 10. Responsive vs. Adaptive • Responsive fluid layout • Adaptive mehrere fixe layouts • Hybrid Kombination von beiden
  11. 11. 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)
  12. 12. „Responsive“http://www.smashingmagazine.com
  13. 13. „Hybrid“http://www.amazeelabs.com
  14. 14. Drupal & ResponsiveZenOmegaAdaptiveThemeFusionSasson
  15. 15. 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;}
  16. 16. COMPASS• Extension für SASS• Standart Theming Patterns:• Sprites, Images, Gradients, CSS3, und, und, und
  17. 17. Mobile First?Mit Mobile First dasStandartlayout 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
  18. 18. Breakpoints definieren? • Was ist der wichtigste Inhalt • Können wir einigen Inhalt auslassen? • Wireframes, Papier, etc. • Sind evtl. Sub-Breakpoints nötig?
  19. 19. Nicht jede Webseite designen• Responsive Design nur für die wichtigsten Webseiten• Nicht vergessen: Grössere Buttons?
  20. 20. testing?• Browser• Responsinator.com• Adobe Edge Inspect• Browserstack• Xcode (iOS Simulator) & Web Inspector: http://bit.ly/W7oh4j• Android Emulator
  21. 21. Responsive Images• Hard!• drupal.org/project/resp_img• Neuer Picture Tag

×