Responsive Heroes at Scale

6315cb36b7739d2186f7b401e7163817?s=47 Mini Kurhan
September 25, 2015

Responsive Heroes at Scale

By Olawale Oladunni and Mini Kurhan. Creating images that work across multiple device breakpoints is difficult. As designers at @Walmartlabs, we’ve faced this challenge at an enormous scale. We learned that, beyond technical details, there are a host of factors that determine a successful outcome. We’ll share solutions that helped our teams adapt their current processes to execute quickly.

6315cb36b7739d2186f7b401e7163817?s=128

Mini Kurhan

September 25, 2015
Tweet

Transcript

  1. Olawale Oladunni & Mini Kurhan source image www.flickr.com/photos/lord-jim/5315334550

  2. Hello! Mini Kurhan Principal, User Experience Walmart.com @minikurhan Olawale Oladunni

    Principal, User Experience Walmart Grocery @doubleola
  3. Walmart starts moving to Responsive Web Design in 2014

  4. What’s a hero image?

  5. Hero images are usually large promo images

  6. photo + whole lotta text aspect ratio? so tiny!

  7. How did we get started? photo credit: www.flickr.com/photos/ian_munroe/3598706185/

  8. None
  9. None
  10. None
  11. None
  12. Large Device Width Small Device Width Medium Device Width

  13. Large Device Width Small Device Width Medium Device Width @1×

    - Normal pixel density images @2× - Retina pixel density images 3:1 2.4:1 2:1 3:1 2.4:1 2:1
  14. Cross-functional team is onboard. photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg

  15. A few weeks later…

  16. photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg

  17. None
  18. Normal Pixel density @1× High Pixel density @2× Normal Pixel

    density @1×
  19. 3:1 2.4:1 2:1

  20. None
  21. Denver, CO San Jose , CA

  22. 3 image breakpoints

  23. 6 Images to support retina displays

  24. 24 total images in a carousel with 4 unique images

  25. And if you have to 20 different markets.

  26. 480 total images are needed

  27. None
  28. Creation Upload Design workflow

  29. Creation Asset Management Trafficking Publishing Actual Workflow

  30. How can we minimize team effort and reduce number of

    high quality images needed, without sacrificing site performance on any device?
  31. Use only retina images. Idea 1

  32. Large Device Width Small Device Width Medium Device Width @1×

    - Normal pixel density images @2× - Retina pixel density images
  33. WTfudge performance?

  34. @1× resolution images @2× resolution images Dimensions: 1080 × 460

    pixels JPEG quality: 80% File size: 155 kb Dimensions: 2160 × 920 pixels JPEG quality: 80% File size: 367kb
  35. @1× resolution images @2× resolution images Dimensions: 1080 × 460

    pixels JPEG quality: 80% File size: 155 kb Dimensions: 2160 × 920 pixels JPEG quality: 10% File size: 156 kb
  36. @1× resolution images @2× resolution images Dimensions: 1080 × 460

    pixels Dimensions: 1080 × 460 pixels
  37. None
  38. None
  39. Perceived quality photo credit: www.flickr.com/photos/mccun934/6220542849/

  40. Reduce the number of breakpoints. Idea 2

  41. Large Device Width Small Device Width Medium Device Width @2×

    - Retina pixel density images JPEG quality: 10% File size: 156kb JPEG quality: 80% File size: 219 kb JPEG quality: 10% File size: 155 kb
  42. Large + Medium Device Width Small Device Width @2× -

    Retina pixel density images
  43. Idea 3 Standardize aspect ratios.

  44. 3:1 2.4:1 2:1

  45. Art Direction - One layout scaled down for smallest image

    breakpoint 3:1 3:1
  46. Art Direction - Different layout for smallest image breakpoint (optional)

    3:1 3:1
  47. Before After 3:1 2.4:1 2:1 3:1 2.4:1 2:1 3:1 3:1

    @2× - Retina pixel density @2× - Retina pixel density @1× - Normal pixel density
  48. 480 images Before 20 markets 160 images After 20 markets

  49. This time for real! photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg

  50. None
  51. photo credit: allthingsd.com/files/2013/03/WalmartHQ.jpg

  52. Adaptive Desktop Separate mWeb

  53. Adaptive Desktop Separate mWeb

  54. Adaptive Fully Responsive Desktop ? ? ?

  55. We’re going responsive in 4 months.

  56. Jump right in. photo credit: www.flickr.com/photos/pmorgan/2829133525/

  57. What is currently being done?

  58. Home Page Department Page

  59. Heros Banners Home Page Department Page

  60. None
  61. None
  62. None
  63. None
  64. photo credit: cdn.evbuc.com/eventlogos/130112857/clueless659.jpg

  65. None
  66. more than 600 stories

  67. How can we manage the smallest amount of files, minimize

    the workload for all the people involved, while on a short timeline?
  68. My idea Just use one image.

  69. Banners!

  70. Crop Safe Crop Safe

  71. Crop Safe Crop Safe

  72. None
  73. None
  74. None
  75. None
  76. Seeing is believing.

  77. Home Page (Breakpoint A)

  78. Home Page (Breakpoint A)

  79. Home Page (Breakpoint A)

  80. Home Page (Breakpoint A)

  81. Home Page (Breakpoint A) Department Page (Breakpoint A)

  82. Home Page (Breakpoint A) Department Page (Breakpoint A) (Breakpoint D)

    (Breakpoint E)
  83. None
  84. Seeing is believing.

  85. None
  86. photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg

  87. None
  88. None
  89. None
  90. None
  91. Heroes!

  92. 1. Vector 2. Guide Image 3. Sample Graphic

  93. Safe Crop Crop

  94. Safe Crop Crop

  95. Safe Crop Crop

  96. 5,500 images Before 2.25 breakpoints 10,000 images 1:1 Desktop &

    mWeb 3 breakpoints Desktop mWeb
  97. 4,200 images Responsive 5 breakpoints Everywhere

  98. None
  99. What we learned

  100. It’s not only about the technology

  101. The teams impacted by responsive design aren’t always obvious

  102. It’s a partnership between UX and Creative

  103. Validate ideas through prototyping

  104. Scale is actually not about size

  105. Thanks! Mini Kurhan Principal, User Experience Walmart.com @minikurhan Olawale Oladunni

    Principal, User Experience Walmart Grocery @doubleola