„UNWISSENHEIT IST EIN

SEGEN!“

Responsive Webdesign

Dirk Jesse | Highresolution.info Webinale 2011, Berlin

Die Welt ist im

Wandel!!

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

January

2011

January

2010

January

2009

January

2008

January

2007

January

2006

January

2005

January

2004

January

2003

January

2002

January

2001

January

2000

Display Resolution Statistics (w3schools.com, 2011)

Higher 1024x768 800x600 640x480 Other

Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/

Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/

„Es ist nicht gesagt, dass es

besser wird, wenn es anders

wird. Wenn es aber besser

werden soll, muss es anders

werden.“

Georg Christoph Lichtenberg (1742-99)

dt. Aphoristiker u. Physiker

Responsive Design

=

Mobile Design?

Responsive Design

≠

Mobile Design,

sondern …

… es ist Design für alle Geräte.

Responsive Design ist

flexibles, geräteunabhängiges

Design für das Web.

http://www.alistapart.com/articles/responsive-web-design/

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

Rocket Science

oder Alter Hut?

http://www.alistapart.com/articles/switchymclayout/

http://www.themaninblue.com/writing/perspective/2004/09/21/

Flexibles LayoutMake %, not px!1

~ 480px

~ 768px

>1024px

Letztes Jahr …

? px

? px

>> 1024px

Nächstes Jahr …

??

http://www.alistapart.com/articles/fluidgrids/

http://www.designinfluences.com/fluid960gs/

http://cssgrid.net/

http://www.yaml.de

Flexible Schriften2

Mobile Displays

Fonts

Basisdefinition Inhalte

body {

font-size: 100%; /* ~16px */

line-heigth: 1.6;

…

}

h1 {

font-size: 200%; /* ~ 32px */

…

}

p {

font-size: 87,5%; /* ~ 14px */

…

}

Flexible Medien3

Medien skalieren

up- & downscale downscale only

img {

width: 100%;

}

video,

object {

width: 100%;

}

img {

max-width: 100%;

}

video,

object {

max-width: 100%;

}

Legacy Support

• min-width Support für IE6

• Windows Image Resizinghttp://unstoppablerobotninja.com/entry/fluid-images

JS aktiviert AlphaImageLoader (Proprietärer IE-Filter), oder …

img { width: 100%; }

img { -ms-interpolation-mode: bicubic; }

Bandbreite beachten!

Datenvolumen reduzieren!

volle Größe

reduzierte Größe

Bilder optimal einbinden

• Hintergrundgrafiken

• Responsive Images (Filament Group)http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

body { background-image: url(…); }

<img src="small.r.jpg" data-fullsrc="large.jpg">

Media Queries4

Media Types

Desktop

Drucker

Mobilgeräte ???

<link rel="stylesheet" media="screen" href="screen.css" />

<link rel="stylesheet" media="print" href="print.css" />

<link rel="stylesheet" media="handheld" href="mobile.css" />

Media FeaturesEigenschaft Schlüsselwort Werte min/max

Viewportgröße width, height,

aspect-ratio

<length>

<ratio>

ja

Displaygröße device-width, device-height,

device-aspect-ratio

<length>

<ratio>

ja

Auflösung resolution <resolution> ja

Ausrichtung orientation portrait,

landscape

-

Farbe color, color-index,

monochrome

<integer> ja

TV-Darstellungsmodus scan progressive,

interlace

-

Art des Displays grid 1 (grid)

0 (bitmap)

-

http://www.w3.org/TR/css3-mediaqueries/

Media Queries

Desktopbrowser allgemein:

Viewport Mindestbreite: 768 Pixel

<link rel="stylesheet"

media="screen and (min-width: 768px)"

href="screen.css" />

/* Desktop Styles */

@ media screen and (min-width: 768px) {

….

}

Media Queries

Mobilgeräte allgemein:

Viewport Maximalbreite: 480 Pixel

<link rel="stylesheet"

media="screen and (max-width: 480px)"

href="screen.css" />

/* Mobile Styles */

@media screen and (max-width: 480px) {

….

}

Media Queries

Desktop:

Viewport Mindestbreite: 768 Pixel

<link rel="stylesheet"

media="screen and (min-width: 768px)"

href="screen.css" />

/* Desktop Styles */

@ media screen and (min-width: 768px) {

….

}

Media Queries

Hochauflösende Displays:

iPhone Retina-Display: 326dpi

<link rel="stylesheet"

media="screen and (min-resolution: 300dpi)"

href="screen.css" />

/* Desktop Styles */

@ media screen and (min-resolution: 300dpi) {

….

}

Mobile Resizing

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Eigenschaft Schlüsselwort Wert

Viewport width <integer> | device-width

Zoom-Level (initial) initial-scale <number>

Zoom-Level (maximal) max-scale <number>

https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

http://www.highresolution.info/webdesign/responsive-design/index.html

http://www.laufbild-werkstatt.de/

http://stephencaver.com/

Browser-

Nachhilfe5

Browser-Kompatibilität

• Media Queries für FF 2, IE 6-8, Safari 2

– jQuery-Plugin für Media Queries von 2008

http://plugins.jquery.com/project/MediaQueries

– JS-Library: css-mediaqueries.js

http://code.google.com/p/css3-mediaqueries-js/

http://mediaqueri.es

„UNWISSENHEIT IST EIN

SEGEN!“

Responsive Webdesign ist ein

Weg zum bestmöglichen Design

für jedes Gerät.

Danke

office@highresolution.info

@djesse

Vortrag inspiriert durch:

Mike Bollinger

http://www.slideshare.net/livefront/responsive-design-7877412

YAML Demo „Responsive Design“http://www.highresolution.info/webdesign/responsive-design/index.html