Your SlideShare is downloading. ×
  • Like
Responsive Web Design: buzzword or revolution?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Responsive Web Design: buzzword or revolution?

  • 1,572 views
Published

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

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

Published 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,572
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
24
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