Responsive Web Design: buzzword or revolution?

  • 1,544 views
Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,544
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
23
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. #rwd: revolution? Buzzword orWojtek Zając KRAKÓW 21.02.2013
  • 2. Hi!@theanxyDesigninclusive.comX-Team.comXHTMLized.com
  • 3. BUZZ·WORD noun
  • 4. MVP Cloud computing Flash HTML5long tail next generation Web 2.0 AJAX
  • 5. Is #RWD* the new one?* Responsive Web Design
  • 6. n Czy #RWD* to kolejny z nich?* Responsive Web Design o
  • 7. mobilerevolution
  • 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. 1,083billion of smartphones used worldwide http://www.lukew.com/ff/entry.asp?1644 http://www.flickr.com/photos/lng0004/7881151510/
  • 10. 59%of smartphone owners use them every day http://www.thinkwithgoogle.com/mobileplanet/en/
  • 11. content strategy http://www.flickr.com/photos/yourdon/2715583000/
  • 12. http://xkcd.com/1174/
  • 13. context != intent
  • 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. “Mobile must never be a dumbed-down, limited experience.” — Steven Hoober http://www.flickr.com/photos/chrisjl/5664339020/
  • 16. Content parity http://alistapart.com/article/your-content-now-mobile
  • 17. Designingfor people,not devices http://www.flickr.com/photos/epsos/5644801034/
  • 18. Inclusive Design
  • 19. http://www.flickr.com/photos/adforce1/4425475660/
  • 20. embrace long tailof devices
  • 21. http://www.flickr.com/photos/brad_frost/
  • 22. CANVAS-IN vsContent-out
  • 23. ProgressiveEnhancement http://www.flickr.com/photos/aigle_dore/4089511514/
  • 24. Possible approaches• dedicated mobile websites• Responsive Web Design • “Mobile last” • Mobile first • RESS
  • 25. 3 steps towards `````````````````` responsive website
  • 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. @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. check backwardscompability (caniuse.com)
  • 29. 2. adapt your interface
  • 30. 1. linearize your content http://www.flickr.com/photos/stuartpilbrow/3565808509/
  • 31. 2. adapt to mobile screen size http://www.flickr.com/photos/stuartpilbrow/3565808509/
  • 32. 3. input device independence http://www.flickr.com/photos/stuartpilbrow/3565808509/
  • 33. 4. utilize touch events http://www.flickr.com/photos/stuartpilbrow/3565808509/
  • 34. 5. common html http://www.flickr.com/photos/stuartpilbrow/3565808509/
  • 35. DEMO
  • 36. 3. responsive media
  • 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. Images are often the biggest part http://mobile.httparchive.org/
  • 39. responsive imagesadaptive-images.com
  • 40. optimize front-endperformance!
  • 41. xui,a lightweight js library xuijs.com
  • 42. responsive design process
  • 43. responsiveprototyping (uxpin.com)
  • 44. testing breakpointsquirktools.com/screenfly
  • 45. css style guides http://www.starbucks.com/static/reference/styleguide/
  • 46. creatinga css style guide (.net magazine)
  • 47. CSS frameworks
  • 48. Mobile emulators http://www.mobilexweb.com/emulators
  • 49. preview allyour devicessimultaneously(Adobe Edge Inspect)
  • 50. Stay futurefriendly.
  • 51. …Learn more Books: WEB: @rwd, http://mobile.smashingmagazine.com http://bradfrost.github.com/this-is-responsive/
  • 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