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