Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
“Things done changed.”-web designer/rapper (The Notorious BIG)
Before we begin . . .              “Work harder, not smarter.”-Doug McMakin
In 2012, what do we       target?          



What is responsive          design?               Responsive design attempts to solve the problem of  targeting our desi...
Ethan Marcotte                 Seminal article on A List Apart on May 25, 2010 http://www.alistapart.com/articles/respo...
Let’s do some code!               We will be using HTML5, because it’s the future and  we should at least be using struc...
Force correct display in         phones!             <meta name="viewport" content="width=device-  width">

Media Queries are           magic              Media queries added in CSS3 Allows “adaptive” design@media only screen a...
Common sizes               http://css-tricks.com/snippets/css/media-queries-  for-standard-devices/
Using display: none;              Control what gets displayed at certain resolutions
Max-width & min-width          Allow the web site to “respond” to screen sizes Allows “responsive” design
Images                     img {  max-width: 98%; /* Changes the image size with 1:1  ratio. */  padding: 1%; }
Use percentages                Allows the components of the site to scale  proportionally with screen size Again “respo...
Navigation is           challenging                 https://github.com/Automattic/_s/blob/master/js  /small-menu.js htt...
Testing your new site             http://responsive.is/bostonglobe.com
Responsive design is        challenging              Fortunately, there is a lot of help on the Internet http://mediaqu...
Questions aboutresponsive design?        
Retina displays                Introduced with the iPhone 4 Many desktop displays have 92-120ppi iPhone 5 has 326ppi  ...


Different displays ppi          

Windows 8                   Being released on Oct, 8 Will support high DPI I suspect it will usher in crazy new products



Retina brings challenges            How do we make things look good on high-dpi  screens but not take to long to load on...
Make big images               Make the image 1.3x it’s normal size Doesn’t look too bad on retina screens Only takes s...
SVGs                       Scalable Vector Graphics can scale without issue But they don’t work well with non-vector im...
Text and CSS elements             CSS can scale without any resolution issues   Excellent solution   Can solve some ge...
Retina.js                     http://retinajs.com/ Prevents non-retina browsers from downloading  large images Doesn’t...
Let’s code!                         @media only screen and (-moz-min-device-pixel-ratio: 2),        only screen and (-w...
Keep yourself educated           The standards are still in limbo
Questions?   
Prochain SlideShare
Chargement dans…5
×

Responsive design and retina displays

10 793 vues

Publié le

These are the slides for the Austin Adobe User Group presentation on Responsive Web Design and Retina Displays on 9/14/12. The code example files are at: https://github.com/elimc/AAUG-RWD-and-Retina_9-14-12

Publié dans : Technologie, Design
  • Soyez le premier à commenter

Responsive design and retina displays

  1. 1. “Things done changed.”-web designer/rapper (The Notorious BIG)
  2. 2. Before we begin . . .  “Work harder, not smarter.”-Doug McMakin
  3. 3. In 2012, what do we target? 
  4. 4.
  5. 5.
  6. 6.
  7. 7. What is responsive design?  Responsive design attempts to solve the problem of targeting our design to the device that it is being displayed on. www.bostonglobe.com
  8. 8. Ethan Marcotte  Seminal article on A List Apart on May 25, 2010 http://www.alistapart.com/articles/responsive- web-design/
  9. 9. Let’s do some code!  We will be using HTML5, because it’s the future and we should at least be using structural elements  https://github.com/h5bp/html5-boilerplate We will be using normalize.css  https://github.com/necolas/normalize.css
  10. 10. Force correct display in phones!  <meta name="viewport" content="width=device- width">
  11. 11.
  12. 12. Media Queries are magic  Media queries added in CSS3 Allows “adaptive” design@media only screen and (min-device-width : 320px)and (max-device-width : 480px) { background: red;}
  13. 13. Common sizes  http://css-tricks.com/snippets/css/media-queries- for-standard-devices/
  14. 14. Using display: none;  Control what gets displayed at certain resolutions
  15. 15. Max-width & min-width  Allow the web site to “respond” to screen sizes Allows “responsive” design
  16. 16. Images  img { max-width: 98%; /* Changes the image size with 1:1 ratio. */ padding: 1%; }
  17. 17. Use percentages  Allows the components of the site to scale proportionally with screen size Again “responsive” design
  18. 18. Navigation is challenging  https://github.com/Automattic/_s/blob/master/js /small-menu.js http://css-tricks.com/
  19. 19. Testing your new site  http://responsive.is/bostonglobe.com
  20. 20. Responsive design is challenging  Fortunately, there is a lot of help on the Internet http://mediaqueri.es/ Google stuff! Go out and code!
  21. 21. Questions aboutresponsive design? 
  22. 22. Retina displays  Introduced with the iPhone 4 Many desktop displays have 92-120ppi iPhone 5 has 326ppi  At distance of 12in, people with normal visions can’t see the pixels  http://en.wikipedia.org/wiki/List_of_displays_by_pi xel_density
  23. 23.
  24. 24.
  25. 25. Different displays ppi 
  26. 26.
  27. 27. Windows 8  Being released on Oct, 8 Will support high DPI I suspect it will usher in crazy new products
  28. 28.
  29. 29.
  30. 30.
  31. 31. Retina brings challenges  How do we make things look good on high-dpi screens but not take to long to load on low-dpi screens?
  32. 32. Make big images  Make the image 1.3x it’s normal size Doesn’t look too bad on retina screens Only takes slightly longer to download Great for non-vector images
  33. 33. SVGs  Scalable Vector Graphics can scale without issue But they don’t work well with non-vector images Not well supported yet.
  34. 34. Text and CSS elements  CSS can scale without any resolution issues  Excellent solution  Can solve some generic designs Custom fonts can be download to create scale-free icons  https://github.com/blog/1106-say-hello-to-octicons  Technically challenging  Doesn’t seem to display multiple colors easily
  35. 35. Retina.js  http://retinajs.com/ Prevents non-retina browsers from downloading large images Doesn’t prevent retina displays from downloading small images
  36. 36. Let’s code!  @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { #icon { background-image: url(twitter@2x.png); background-size: 16px auto; } }
  37. 37. Keep yourself educated  The standards are still in limbo
  38. 38. Questions? 

×