Download as PDF, PPTX
Uploaded byMini Kurhan
Responsive Heroes at Scale
Walmart's shift to responsive web design began in 2014, emphasizing the importance of hero images and optimizing image use across various device widths. The team aimed to minimize the number of high-quality images needed while maintaining performance, ultimately reducing from 5,500 to 4,200 images through standardization and strategic asset management. Key takeaways included the collaborative nature of responsive design and the necessity of scaling solutions effectively.
Responsive Heroes at Scale
- 1. Olawale Oladunni & MiniKurhansource image www.flickr.com/photos/lord-jim/5315334550
- 2. Hello! Mini Kurhan Principal, UserExperience Walmart.com @minikurhan Olawale Oladunni Principal, User Experience Walmart Grocery @doubleola
- 3. Walmart starts moving toResponsive Web Design in 2014
- 4. What’s a heroimage?
- 5. Hero images are usually largepromo images
- 6. photo + whole lottatext aspect ratio? so tiny!
- 7. How did weget started? photo credit: www.flickr.com/photos/ian_munroe/3598706185/
- 12. Large Device WidthSmall Device WidthMedium Device Width
- 13. Large Device WidthSmall Device WidthMedium 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 isonboard. photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg
- 15. A few weekslater…
- 16.
- 18. Normal Pixel density@1× High Pixel density @2×Normal Pixel density @1×
- 19.
- 21.
- 22.
- 23. 6 Images tosupport retina displays
- 24. 24 total imagesin a carousel with 4 unique images
- 25. And if youhave to 20 different markets.
- 26. 480 total imagesare needed
- 28.
- 29. Creation Asset ManagementTrafficking Publishing Actual Workflow
- 30. How can weminimize team effort and reduce number of high quality images needed, without sacrificing site performance on any device?
- 31. Use only retinaimages. Idea 1
- 32. Large Device WidthSmall Device WidthMedium Device Width @1× - Normal pixel density images @2× - Retina pixel density images
- 33.
- 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
- 39. Perceived quality photo credit:www.flickr.com/photos/mccun934/6220542849/
- 40. Reduce the numberof breakpoints. Idea 2
- 41. Large Device WidthSmall Device WidthMedium 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 + MediumDevice Width Small Device Width @2× - Retina pixel density images
- 43. Idea 3 Standardize aspectratios.
- 44.
- 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.
- 49. This time forreal! photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg
- 51.
- 52.
- 53.
- 54. Adaptive Fully ResponsiveDesktop ? ? ?
- 55. We’re going responsive in4 months.
- 56. Jump right in. photocredit: www.flickr.com/photos/pmorgan/2829133525/
- 57.
- 58.
- 59.
- 64.
- 66.
- 67. How can wemanage the smallest amount of files, minimize the workload for all the people involved, while on a short timeline?
- 68. My idea Just useone image.
- 69.
- 70.
- 71.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81. Home Page (BreakpointA) Department Page (Breakpoint A)
- 82. Home Page (BreakpointA) Department Page (Breakpoint A) (Breakpoint D) (Breakpoint E)
- 84.
- 86.
- 91.
- 92. 1. Vector 2.Guide Image 3. Sample Graphic
- 93.
- 94.
- 95.
- 96. 5,500 images Before 2.25 breakpoints 10,000 images 1:1 Desktop& mWeb 3 breakpoints Desktop mWeb
- 97.
- 99.
- 100. It’s not onlyabout the technology
- 101. The teams impactedby responsive design aren’t always obvious
- 102. It’s a partnership betweenUX and Creative
- 103.
- 104. Scale is actuallynot about size
- 105. Thanks! Mini Kurhan Principal, UserExperience Walmart.com @minikurhan Olawale Oladunni Principal, User Experience Walmart Grocery @doubleola