unwissenheit ist ein segen - responsive webdesign
DESCRIPTION
TRANSCRIPT
![Page 1: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/1.jpg)
„UNWISSENHEIT IST EIN
SEGEN!“
Responsive Webdesign
Dirk Jesse | Highresolution.info Webinale 2011, Berlin
![Page 2: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/2.jpg)
Die Welt ist im
Wandel!!
![Page 3: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/4.jpg)
![Page 5: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/5.jpg)
![Page 6: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/6.jpg)
Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/
![Page 7: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/7.jpg)
Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/
![Page 8: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/9.jpg)
Responsive Design
=
Mobile Design?
![Page 10: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/10.jpg)
Responsive Design
≠
Mobile Design,
sondern …
![Page 11: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/11.jpg)
… es ist Design für alle Geräte.
![Page 12: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/12.jpg)
Responsive Design ist
flexibles, geräteunabhängiges
Design für das Web.
![Page 13: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/13.jpg)
http://www.alistapart.com/articles/responsive-web-design/
![Page 14: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/14.jpg)
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
![Page 15: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/15.jpg)
Rocket Science
oder Alter Hut?
![Page 16: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/16.jpg)
http://www.alistapart.com/articles/switchymclayout/
![Page 17: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/17.jpg)
http://www.themaninblue.com/writing/perspective/2004/09/21/
![Page 18: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/18.jpg)
Flexibles LayoutMake %, not px!1
![Page 19: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/19.jpg)
~ 480px
~ 768px
>1024px
Letztes Jahr …
![Page 20: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/20.jpg)
? px
? px
>> 1024px
Nächstes Jahr …
??
![Page 21: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/21.jpg)
http://www.alistapart.com/articles/fluidgrids/
![Page 22: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/22.jpg)
http://www.designinfluences.com/fluid960gs/
![Page 25: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/25.jpg)
Flexible Schriften2
![Page 26: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/26.jpg)
Mobile Displays
![Page 27: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/28.jpg)
Flexible Medien3
![Page 29: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/31.jpg)
Bandbreite beachten!
![Page 32: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/32.jpg)
Datenvolumen reduzieren!
volle Größe
reduzierte Größe
![Page 33: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/34.jpg)
Media Queries4
![Page 35: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/42.jpg)
http://www.highresolution.info/webdesign/responsive-design/index.html
![Page 43: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/43.jpg)
http://www.laufbild-werkstatt.de/
![Page 45: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/45.jpg)
Browser-
Nachhilfe5
![Page 46: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/html5/thumbnails/48.jpg)
„UNWISSENHEIT IST EIN
SEGEN!“
Responsive Webdesign ist ein
Weg zum bestmöglichen Design
für jedes Gerät.
![Page 50: Unwissenheit ist ein Segen - Responsive webdesign](https://reader033.vdocuments.mx/reader033/viewer/2022051210/54c7a57e4a795949798b457d/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