webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
-
Upload
smuellersandsmedia -
Category
Technology
-
view
1.025 -
download
0
Transcript of webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
![Page 1: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/1.jpg)
„UNWISSENHEIT IST EIN
SEGEN!“
Responsive Webdesign
Dirk Jesse | Highresolution.info Webinale 2011, Berlin
![Page 2: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/2.jpg)
Die Welt ist im
Wandel!!
![Page 3: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/3.jpg)
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
![Page 4: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/4.jpg)
![Page 5: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/5.jpg)
![Page 6: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/6.jpg)
Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/
![Page 7: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/7.jpg)
Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/
![Page 8: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/8.jpg)
„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
![Page 9: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/9.jpg)
Responsive Design
=
Mobile Design?
![Page 10: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/10.jpg)
Responsive Design
≠
Mobile Design,
sondern …
![Page 11: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/11.jpg)
… es ist Design für alle Geräte.
![Page 12: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/12.jpg)
Responsive Design ist
flexibles, geräteunabhängiges
Design für das Web.
![Page 13: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/13.jpg)
http://www.alistapart.com/articles/responsive-web-design/
![Page 14: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/14.jpg)
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
![Page 15: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/15.jpg)
Rocket Science
oder Alter Hut?
![Page 16: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/16.jpg)
http://www.alistapart.com/articles/switchymclayout/
![Page 17: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/17.jpg)
http://www.themaninblue.com/writing/perspective/2004/09/21/
![Page 18: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/18.jpg)
Flexibles LayoutMake %, not px!1
![Page 19: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/19.jpg)
~ 480px
~ 768px
>1024px
Letztes Jahr …
![Page 20: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/20.jpg)
? px
? px
>> 1024px
Nächstes Jahr …
??
![Page 21: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/21.jpg)
http://www.alistapart.com/articles/fluidgrids/
![Page 22: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/22.jpg)
http://www.designinfluences.com/fluid960gs/
![Page 25: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/25.jpg)
Flexible Schriften2
![Page 26: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/26.jpg)
Mobile Displays
![Page 27: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/27.jpg)
Fonts
Basisdefinition Inhalte
body {
font-size: 100%; /* ~16px */
line-heigth: 1.6;
…
}
h1 {
font-size: 200%; /* ~ 32px */
…
}
p {
font-size: 87,5%; /* ~ 14px */
…
}
![Page 28: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/28.jpg)
Flexible Medien3
![Page 29: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/29.jpg)
Medien skalieren
up- & downscale downscale only
img {
width: 100%;
}
video,
object {
width: 100%;
}
img {
max-width: 100%;
}
video,
object {
max-width: 100%;
}
![Page 30: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/30.jpg)
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; }
![Page 31: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/31.jpg)
Bandbreite beachten!
![Page 32: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/32.jpg)
Datenvolumen reduzieren!
volle Größe
reduzierte Größe
![Page 33: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/33.jpg)
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">
![Page 34: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/34.jpg)
Media Queries4
![Page 35: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/35.jpg)
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" />
![Page 36: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/36.jpg)
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/
![Page 37: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/37.jpg)
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) {
….
}
![Page 38: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/38.jpg)
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) {
….
}
![Page 39: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/39.jpg)
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) {
….
}
![Page 40: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/40.jpg)
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) {
….
}
![Page 41: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/41.jpg)
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
![Page 42: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/42.jpg)
http://www.highresolution.info/webdesign/responsive-design/index.html
![Page 43: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/43.jpg)
http://www.laufbild-werkstatt.de/
![Page 45: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/45.jpg)
Browser-
Nachhilfe5
![Page 46: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/46.jpg)
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/
![Page 48: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/48.jpg)
„UNWISSENHEIT IST EIN
SEGEN!“
Responsive Webdesign ist ein
Weg zum bestmöglichen Design
für jedes Gerät.
![Page 50: webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"](https://reader036.fdocument.pub/reader036/viewer/2022081400/5555c96bd8b42aaf158b4976/html5/thumbnails/50.jpg)
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