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. None
  2. THE GOOD THE BAD AND THE UGLY …with Responsive Web

    Design.
  3. Hej!

  4. I am @MarcoBarbosa

  5. We are @14islands

  6. None
  7. …Responsive Web Design?

  8. There are more devices connected than people in the world

    today. http://www.bizjournals.com/prnewswire/press_releases/2014/10/06/NY30877
  9. None
  10. None
  11. None
  12. “ It’s about designing across an ever-widening array of devices,

    browsers, and whatever-the- heck-comes-next. - Ethan Marcotte
  13. THE GOOD

  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
  15. Content needs to flow LIKE WATER

  16. C O N T E N T

  17. EMBRANCE IT

  18. keep the conversation going COLLABORATION

  19. UX Design Code

  20. UX Design Code

  21. THE BAD

  22. BAD IMPLEMENTATIONS CAN GET PRETTY BAD

  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
  24. Caring for PERFORMANCE IS CRUCIAL

  25. RESPONSIVE ALSO MEANS PERFORMANCE

  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/
  27. MEASURE IT webtest.org

  28. the importance of MOBILE FIRST

  29. None
  30. None
  31. None
  32. IGNORING MOBILE FIRST WILL PROBABLY BITE YOU LATER

  33. THE UGLY

  34. RESPONSIVE IMAGES

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

    RESPONSIVE IMAGES. http://bradfrost.com/blog/post/responsive-images/ - Brad Frost
  36. “ 62% of web traffic today are images. http://httparchive.org/interesting.php#bytesperpage

  37. WHAT CAN WE DO TODAY

  38. srcset, sizes and <picture> http://alistapart.com/article/responsive-images-in-practice

  39. SERVICES CAN HELP YOU TOO

  40. None
  41. None
  42. None
  43. None
  44. HOW WE ROLL RESPONSIVE.IO

  45. CASE STUDIES Putting it all together

  46. TICTAIL

  47. None
  48. Lazy loading. (Like, a LOT)

  49. Can’t hog the page.

  50. one way: SIMPLY DELAYING IT

  51. Load me first! Not yet! Not yet!

  52. Not yet! Not yet! Load me first!

  53. Load me! Load me! Load me first!

  54. another way: DICTATED BY SCROLL

  55. loaded loaded loaded

  56. loaded loaded loaded Visible area

  57. loaded loaded loaded loading! loading! not loaded Visible area Load

    area
  58. loaded loaded loaded loaded loaded loading!

  59. DIFFERENT BREAKPOINTS DIFFERENT LOOKS

  60. None
  61. None
  62. None
  63. None
  64. None
  65. ELASTICA

  66. None
  67. FIXED BUT ACTUALLY FLUID

  68. <canvas width=“450” height=“500”>

  69. <canvas width=“450” height=“500”> looks fixed, right?

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

    { padding-bottom: 100%; /*1:1*/ height: 0; }
  71. now it’s fluid! .canvas-selector { position: absolute; width: 100%; height:

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

    { padding-bottom: 100%; /*1:1*/ height: 0; } and with ratio
  73. SANTA TRACKER

  74. None
  75. We love SVGS

  76. None
  77. <svg width="1034.3px" height="131px" viewBox="0 0 1034.3 131" >

  78. a different approach SCALING

  79. 100%

  80. 100% 80%

  81. None
  82. None
  83. None
  84. None
  85. None
  86. None
  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 */ } }
  88. 100% 80% 70% 55% 40% 35%

  89. THE RECIPE Conclusion

  90. EMBRACE THE METHODOLOGY

  91. EMBRACE THE METHODOLOGY DO GOOD IMPLEMENTATION

  92. EMBRACE THE METHODOLOGY DO GOOD IMPLEMENTATION CARE FOR PERFORMANCE

  93. Tack!