The good, the bad and the ugly with responsive web design

D34efae5a5bdbb00ce3b300c78cf359a?s=47 14islands
February 26, 2015

The good, the bad and the ugly with responsive web design

Responsive Web Design has been around for a while and it’s worth taking a step back to see what a successful responsive project actually requires.

D34efae5a5bdbb00ce3b300c78cf359a?s=128

14islands

February 26, 2015
Tweet

Transcript

  1. 1.
  2. 3.
  3. 6.
  4. 8.

    There are more devices connected than people in the world

    today. http://www.bizjournals.com/prnewswire/press_releases/2014/10/06/NY30877
  5. 9.
  6. 10.
  7. 11.
  8. 12.

    “ It’s about designing across an ever-widening array of devices,

    browsers, and whatever-the- heck-comes-next. - Ethan Marcotte
  9. 13.
  10. 14.

    “ Get your content ready to go anywhere because it’s

    going to go everywhere. - http://bradfrost.com/blog/web/for-a-future-friendly-web/ - Brad Frost
  11. 21.
  12. 23.

    “ Shoot me now…responsive design has seemingly become confused with

    an opportunity to reduce performance rather than improve it. - Stephanie Rieger - https://twitter.com/stephanierieger/status/245240465572642816
  13. 26.

    “ 85% of mobile users expect pages to load as

    fast or faster than they load on the desktop. - http://blog.radware.com/applicationdelivery/applicationaccelerationoptimization/2014/01/55-web-performance-stats-youll-want-to-know/
  14. 29.
  15. 30.
  16. 31.
  17. 33.
  18. 35.

    “ There’s three topics I avoid discussing: religion, politics, and

    RESPONSIVE IMAGES. http://bradfrost.com/blog/post/responsive-images/ - Brad Frost
  19. 40.
  20. 41.
  21. 42.
  22. 43.
  23. 46.
  24. 47.
  25. 60.
  26. 61.
  27. 62.
  28. 63.
  29. 64.
  30. 65.
  31. 66.
  32. 71.

    now it’s fluid! .canvas-selector { position: absolute; width: 100%; height:

    100%; } .canvas-parent-selector { padding-bottom: 100%; /*1:1*/ height: 0; }
  33. 72.

    .canvas-selector { position: absolute; width: 100%; height: 100%; } .canvas-parent-selector

    { padding-bottom: 100%; /*1:1*/ height: 0; } and with ratio
  34. 74.
  35. 76.
  36. 79.
  37. 80.
  38. 81.
  39. 82.
  40. 83.
  41. 84.
  42. 85.
  43. 86.
  44. 87.

    @media (min-width: 1000px) and (max-width: 1200px) { .scene { transform:

    scale(0.8); width: 125%; /* 100/80 = 1.25 * 100 */ height: 125%; /* 100/80 = 1.25 * 100 */ } }
  45. 93.