Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design: buzzword or revolution?

2,263 views

Published on

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

Published in: Design
  • Be the first to comment

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

×