Your SlideShare is downloading. ×
webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

webinale2011_Dirk Jesse:Responsive Web Design oder "Unwissenheit ist ein Segen"

1,022

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,022
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. „UNWISSENHEIT IST EIN SEGEN!“ Responsive WebdesignDirk Jesse | Highresolution.info Webinale 2011, Berlin
  • 2. Die Welt ist im! Wandel!
  • 3. 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
  • 4. Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/
  • 5. Quelle: http://stevenduque.com/2010/05/the-mobile-internet-era-is-upon-us/
  • 6. „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
  • 7. Responsive Design = Mobile Design?
  • 8. Responsive Design ≠ Mobile Design, sondern …
  • 9. … es ist Design für alle Geräte.
  • 10. Responsive Design istflexibles, geräteunabhängiges Design für das Web.
  • 11. http://www.alistapart.com/articles/responsive-web-design/
  • 12. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
  • 13. Rocket Science? oder Alter Hut
  • 14. http://www.alistapart.com/articles/switchymclayout/
  • 15. http://www.themaninblue.com/writing/perspective/2004/09/21/
  • 16. 1 Flexibles Layout Make %, not px!
  • 17. Letztes Jahr … >1024px ~ 768px~ 480px
  • 18. Nächstes Jahr … >> 1024px ? px? px ? ?
  • 19. http://www.alistapart.com/articles/fluidgrids/
  • 20. http://www.designinfluences.com/fluid960gs/
  • 21. http://cssgrid.net/
  • 22. http://www.yaml.de
  • 23. 2 Flexible Schriften
  • 24. Mobile Displays
  • 25. FontsBasisdefinition Inhalte body { h1 { font-size: 100%; /* ~16px */ font-size: 200%; /* ~ 32px */ line-heigth: 1.6; … … } } p{ font-size: 87,5%; /* ~ 14px */ … }
  • 26. 3 Flexible Medien
  • 27. Medien skalierenup- & downscale downscale only img { img { width: 100%; max-width: 100%; } } video, video, object { object { width: 100%; max-width: 100%; } }
  • 28. 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; }
  • 29. Bandbreite beachten!
  • 30. Datenvolumen reduzieren! volle Größe reduzierte Größe
  • 31. 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">
  • 32. 4 Media Queries
  • 33. 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" />
  • 34. 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/
  • 35. 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) { …. }
  • 36. 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) { …. }
  • 37. 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) { …. }
  • 38. 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) { …. }
  • 39. 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
  • 40. http://www.highresolution.info/webdesign/responsive-design/index.html
  • 41. http://www.laufbild-werkstatt.de/
  • 42. http://stephencaver.com/
  • 43. Browser-5 Nachhilfe
  • 44. 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/
  • 45. http://mediaqueri.es
  • 46. „UNWISSENHEIT IST EIN SEGEN!“Responsive Webdesign ist einWeg zum bestmöglichen Design für jedes Gerät.
  • 47. Dankeoffice@highresolution.info @djesse
  • 48. 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

×