View
1.338
Download
0
Category
Preview:
DESCRIPTION
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
Citation preview
Responsive Web Design
Michael SchmidHead Technology
michael@amazeelabs.com@schnitzel
Was istResponsive Web Design?
der Start
21. 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 Anlauf
25. Mai 2010
Ethan Marcotte schlägt MediaQueries für Responsive Seiten vorhttp://www.alistapart.com/articles/responsive-web-design/
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" />
Media Queries CSS 3
<link rel="stylesheet" type="text/css"
media="screen and (max-width: 480px)"
href="mobile.css" />
• basierend auf CSS
• sehr schnell
• einfach
• grosse Aufmerksamkeit
• kein IE 6-8 Support
• polyfill „css3-mediaqueries.js“
zweiter Anlauf
Responsive vs. Adaptive
• Responsivefluid layout
• Adaptivemehrere fixe layouts
• HybridKombination von beiden
Kombinationen
/* Normal Layout */all and (min-width: 980px) and (max-width: 1219px)
/* Narrow Layout (Tablet) */all and (min-width: 740px) and (max-width: 979px)
/* Wide Layout */all and (min-width: 1220px)
„Responsive“
http://www.smashingmagazine.com
„Hybrid“
http://www.amazeelabs.com
Drupal & ResponsiveZen
Omega
AdaptiveTheme
Fusion
Sasson
SASS•CSS on Steriods
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
table.hl { margin: 2em 0; td.ln { text-align: right; }}
COMPASS
•Extension für SASS
•Standart Theming Patterns:
•Sprites, Images, Gradients, CSS3, und, und, und
Mobile First?
/* Wide Layout */all and (min-width: 1220px)
/* Normal Layout */all and (min-width: 980px)
/* Narrow Layout (Tablet) */all and (min-width: 740px)
Mit Mobile First das Standartlayout ist Mobil
Pros• Mobile First = Content
First• Zukunft?
Cons• Nicht ganz einfach mit
Kunden
Breakpoints definieren?
•Was ist der wichtigste Inhalt
•Können wir einigen Inhalt auslassen?
•Wireframes, Papier, etc.
•Sind evtl. Sub-Breakpoints nötig?
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.ly/W7oh4j
•Android Emulator
Responsive Images
•Hard!
•drupal.org/project/resp_img
•Neuer Picture Tag
Recommended