Responsive Web Design: buzzword or revolution?

2,205 views

Published on

Presentation given at http://techcamp.pl/ event in Kraków, Poland.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,205
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Responsive Web Design: buzzword or revolution?

  1. 1. #rwd: revolution? Buzzword orWojtek Zając KRAKÓW 21.02.2013
  2. 2. Hi!@theanxyDesigninclusive.comX-Team.comXHTMLized.com
  3. 3. BUZZ·WORD noun
  4. 4. MVP Cloud computing Flash HTML5long tail next generation Web 2.0 AJAX
  5. 5. Is #RWD* the new one?* Responsive Web Design
  6. 6. n Czy #RWD* to kolejny z nich?* Responsive Web Design o
  7. 7. mobilerevolution
  8. 8. 46% of population has accessto a mobile phone (of any kind) http://www.economist.com/blogs/babbage/2012/10/global-mobile-usage?fsrc=scn/tw_ec/sim_earth http://www.flickr.com/photos/captain_die/7697183522/
  9. 9. 1,083billion of smartphones used worldwide http://www.lukew.com/ff/entry.asp?1644 http://www.flickr.com/photos/lng0004/7881151510/
  10. 10. 59%of smartphone owners use them every day http://www.thinkwithgoogle.com/mobileplanet/en/
  11. 11. content strategy http://www.flickr.com/photos/yourdon/2715583000/
  12. 12. http://xkcd.com/1174/
  13. 13. context != intent
  14. 14. 85% of US tablet ownersuse them while watching tv http://blogs.forrester.com/sarah_rotman_epps/12-04-11-the_tablet_tv_connection
  15. 15. “Mobile must never be a dumbed-down, limited experience.” — Steven Hoober http://www.flickr.com/photos/chrisjl/5664339020/
  16. 16. Content parity http://alistapart.com/article/your-content-now-mobile
  17. 17. Designingfor people,not devices http://www.flickr.com/photos/epsos/5644801034/
  18. 18. Inclusive Design
  19. 19. http://www.flickr.com/photos/adforce1/4425475660/
  20. 20. embrace long tailof devices
  21. 21. http://www.flickr.com/photos/brad_frost/
  22. 22. CANVAS-IN vsContent-out
  23. 23. ProgressiveEnhancement http://www.flickr.com/photos/aigle_dore/4089511514/
  24. 24. Possible approaches• dedicated mobile websites• Responsive Web Design • “Mobile last” • Mobile first • RESS
  25. 25. 3 steps towards `````````````````` responsive website
  26. 26. 1. Media Queries <meta name="viewport" content="width=device-width, initial-scale=1.0"> @media screen and (min-width: 50em) { article { float::left; } }
  27. 27. @mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min--moz-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 1.5) { /* CSS styles */}Detecting high density displays
  28. 28. check backwardscompability (caniuse.com)
  29. 29. 2. adapt your interface
  30. 30. 1. linearize your content http://www.flickr.com/photos/stuartpilbrow/3565808509/
  31. 31. 2. adapt to mobile screen size http://www.flickr.com/photos/stuartpilbrow/3565808509/
  32. 32. 3. input device independence http://www.flickr.com/photos/stuartpilbrow/3565808509/
  33. 33. 4. utilize touch events http://www.flickr.com/photos/stuartpilbrow/3565808509/
  34. 34. 5. common html http://www.flickr.com/photos/stuartpilbrow/3565808509/
  35. 35. DEMO
  36. 36. 3. responsive media
  37. 37. 1.25MBaverage page weight (2012) 86% of responsive websites don’t optimize resources http://www.lukew.com/ff/entry.asp?1681 http://wpdaily.co/responsive-server-side/
  38. 38. Images are often the biggest part http://mobile.httparchive.org/
  39. 39. responsive imagesadaptive-images.com
  40. 40. optimize front-endperformance!
  41. 41. xui,a lightweight js library xuijs.com
  42. 42. responsive design process
  43. 43. responsiveprototyping (uxpin.com)
  44. 44. testing breakpointsquirktools.com/screenfly
  45. 45. css style guides http://www.starbucks.com/static/reference/styleguide/
  46. 46. creatinga css style guide (.net magazine)
  47. 47. CSS frameworks
  48. 48. Mobile emulators http://www.mobilexweb.com/emulators
  49. 49. preview allyour devicessimultaneously(Adobe Edge Inspect)
  50. 50. Stay futurefriendly.
  51. 51. …Learn more Books: WEB: @rwd, http://mobile.smashingmagazine.com http://bradfrost.github.com/this-is-responsive/
  52. 52. Thanks! Q&AWojtek Zając (@theanxy)http://www.slideshare.net/wojciechzajac This work is licensed under a Creative Commons Attribution 3.0 Unported License

×