Responsive design and retina displays

10,089 views

Published on

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

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

No Downloads
Views
Total views
10,089
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
71
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

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? 

×