Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design für Mobilgeräte mit Drupal

1,328 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
  • Be the first to comment

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

×