Unwissenheit ist ein Segen - Responsive webdesign

„UNWISSENHEIT IST EIN SEGEN!“ Responsive WebdesignDirk Jesse | Highresolution.info Webinale 2011, Berlin

Die Welt ist im! Wandel!

Display Resolution Statistics (w3schools.com, 2011) 90% 80% 70% 60% 50% 40% 30% 20% 10% 0%January January January January January January January January January January January January 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 Higher 1024x768 800x600 640x480 Other

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

„Es ist nicht gesagt, dass esbesser wird, wenn es anderswird. Wenn es aber besserwerden soll, muss es anderswerden.“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 istflexibles, 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/

1 Flexibles Layout Make %, not px!

Letztes Jahr … >1024px ~ 768px~ 480px

Nächstes Jahr … >> 1024px ? px? px ? ?

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

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

http://cssgrid.net/

http://www.yaml.de

2 Flexible Schriften

Mobile Displays

FontsBasisdefinition Inhalte body { h1 { font-size: 100%; /* ~16px */ font-size: 200%; /* ~ 32px */ line-heigth: 1.6; … … } } p{ font-size: 87,5%; /* ~ 14px */ … }

3 Flexible Medien

Medien skalierenup- & downscale downscale only img { img { width: 100%; max-width: 100%; } } video, video, object { object { width: 100%; max-width: 100%; } }

Legacy Support• min-width Support für IE6 img { width: 100%; }• Windows Image Resizing http://unstoppablerobotninja.com/entry/fluid-images JS aktiviert AlphaImageLoader (Proprietärer IE-Filter), oder … img { -ms-interpolation-mode: bicubic; }

Bandbreite beachten!

Datenvolumen reduzieren! volle Größe reduzierte Größe

Bilder optimal einbinden• Hintergrundgrafiken body { background-image: url(…); }• Responsive Images (Filament Group) http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/ <img src="small.r.jpg" data-fullsrc="large.jpg">

4 Media Queries

Media TypesDesktop <link rel="stylesheet" media="screen" href="screen.css" />Drucker <link rel="stylesheet" media="print" href="print.css" />Mobilgeräte ??? <link rel="stylesheet" media="handheld" href="mobile.css" />

Media FeaturesEigenschaft Schlüsselwort Werte min/maxViewportgröße width, height, <length> ja aspect-ratio <ratio>Displaygröße device-width, device-height, <length> ja device-aspect-ratio <ratio>Auflösung resolution <resolution> jaAusrichtung orientation portrait, - landscapeFarbe color, color-index, <integer> ja monochromeTV-Darstellungsmodus scan progressive, - interlaceArt des Displays grid 1 (grid) - 0 (bitmap)http://www.w3.org/TR/css3-mediaqueries/

Media QueriesDesktopbrowser 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 QueriesMobilgerä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 QueriesDesktop: 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 QueriesHochauflö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 WertViewport width <integer> | device-widthZoom-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-5 Nachhilfe

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 einWeg zum bestmöglichen Design für jedes Gerät.

Dankeoffice@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

http://www.highresolution.info	1780
http://t3n.de	740
http://blog.webinale.de	49
http://raumschmiere.de	41
http://www.slideshare.net	15
url_unknown	14
http://quadratoase.de	7
http://www.quadratoase.de	4
http://twitter.com	4
http://danibelz.tumblr.com	4
http://safe.tumblr.com	3
http://highresolution.info	3
https://twimg0-a.akamaihd.net	3
http://typo.trgo-splet.com	2
http://feeds.feedburner.com	2
http://paper.li	2
https://on2off.theflowr.com	1
http://213.8.145.174:82	1

Unwissenheit ist ein Segen - Responsive webdesign

by djesse on Jun 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

18 Embeds 2,675

Statistics

Unwissenheit ist ein Segen - Responsive webdesign — Presentation Transcript