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
