0
#rwd: revolution?               Buzzword orWojtek Zając                  KRAKÓW 21.02.2013
Hi!@theanxyDesigninclusive.comX-Team.comXHTMLized.com
BUZZ·WORD   noun
MVP Cloud computing Flash      HTML5long tail next generation      Web 2.0   AJAX
Is #RWD*            the new one?* Responsive Web Design
n              Czy #RWD*     to kolejny z nich?* Responsive Web Design                       o
mobilerevolution
46%   of population has accessto a mobile phone (of any kind)            http://www.economist.com/blogs/babbage/2012/10/gl...
1,083billion of smartphones    used worldwide                            http://www.lukew.com/ff/entry.asp?1644           ...
59%of smartphone owners  use them every day                  http://www.thinkwithgoogle.com/mobileplanet/en/
content strategy           http://www.flickr.com/photos/yourdon/2715583000/
http://xkcd.com/1174/
context != intent
85% of US tablet ownersuse them while watching tv       http://blogs.forrester.com/sarah_rotman_epps/12-04-11-the_tablet_t...
“Mobile must never be a    dumbed-down,  limited experience.”           — Steven Hoober                             http:/...
Content parity           http://alistapart.com/article/your-content-now-mobile
Designingfor people,not devices              http://www.flickr.com/photos/epsos/5644801034/
Inclusive  Design
http://www.flickr.com/photos/adforce1/4425475660/
embrace long tailof devices
http://www.flickr.com/photos/brad_frost/
CANVAS-IN    vsContent-out
ProgressiveEnhancement          http://www.flickr.com/photos/aigle_dore/4089511514/
Possible approaches• dedicated mobile websites• Responsive Web Design   • “Mobile last”   • Mobile first   • RESS
3    steps    towards      ``````````````````    responsive website
1. Media Queries  <meta name="viewport"        content="width=device-width, initial-scale=1.0">   @media screen and (min-w...
@mediaonly screen and   (-webkit-min-device-pixel-ratio: 1.5),only screen and   (-o-min-device-pixel-ratio: 3/2),only scre...
check backwardscompability (caniuse.com)
2. adapt your interface
1. linearize your content                    http://www.flickr.com/photos/stuartpilbrow/3565808509/
2. adapt to mobile screen size                      http://www.flickr.com/photos/stuartpilbrow/3565808509/
3. input device independence                     http://www.flickr.com/photos/stuartpilbrow/3565808509/
4. utilize touch events                   http://www.flickr.com/photos/stuartpilbrow/3565808509/
5. common html             http://www.flickr.com/photos/stuartpilbrow/3565808509/
DEMO
3. responsive media
1.25MBaverage page weight (2012)        86%     of responsive websites    don’t optimize resources                        ...
Images are often the biggest part                                    http://mobile.httparchive.org/
responsive       imagesadaptive-images.com
optimize  front-endperformance!
xui,a lightweight    js library        xuijs.com
responsive  design process
responsiveprototyping   (uxpin.com)
testing      breakpointsquirktools.com/screenfly
css style guides       http://www.starbucks.com/static/reference/styleguide/
creatinga css style guide     (.net magazine)
CSS frameworks
Mobile emulators http://www.mobilexweb.com/emulators
preview allyour devicessimultaneously(Adobe Edge Inspect)
Stay futurefriendly.
…Learn more   Books:    WEB:    @rwd, http://mobile.smashingmagazine.com            http://bradfrost.github.com/this-is-re...
Thanks!                  Q&AWojtek Zając (@theanxy)http://www.slideshare.net/wojciechzajac                                ...
Responsive Web Design: buzzword or revolution?
Responsive Web Design: buzzword or revolution?
Upcoming SlideShare
Loading in...5
×

Responsive Web Design: buzzword or revolution?

1,691

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
1,691
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×