unwissenheit ist ein segen - responsive webdesign
Post on 27-Jan-2015
112 Views
Preview:
DESCRIPTION
TRANSCRIPT
„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/
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/
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/
„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
top related