responsive heroes at scale
TRANSCRIPT
![Page 1: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/1.jpg)
Olawale Oladunni & Mini Kurhan
source image www.flickr.com/photos/lord-jim/5315334550
![Page 2: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/2.jpg)
Hello!Mini Kurhan Principal, User Experience Walmart.com @minikurhan
Olawale Oladunni Principal, User Experience Walmart Grocery @doubleola
![Page 3: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/3.jpg)
Walmart starts moving to Responsive Web
Design in 2014
![Page 4: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/4.jpg)
What’s a hero image?
![Page 5: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/5.jpg)
Hero images are usually
large promo images
![Page 6: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/6.jpg)
photo + whole lotta text
aspect ratio?
so tiny!
![Page 7: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/7.jpg)
How did we get started?
photo credit: www.flickr.com/photos/ian_munroe/3598706185/
![Page 8: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/8.jpg)
![Page 9: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/9.jpg)
![Page 10: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/10.jpg)
![Page 11: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/11.jpg)
![Page 12: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/12.jpg)
Large Device Width Small Device Width Medium Device Width
![Page 13: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/13.jpg)
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
![Page 14: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/14.jpg)
Cross-functional team is onboard.
photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg
![Page 15: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/15.jpg)
A few weeks later…
![Page 16: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/16.jpg)
photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg
![Page 17: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/17.jpg)
![Page 18: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/18.jpg)
Normal Pixel density @1× High Pixel density @2×Normal Pixel density @1×
![Page 19: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/19.jpg)
3:1
2.4:1
2:1
![Page 20: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/20.jpg)
![Page 21: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/21.jpg)
Denver, COSan Jose , CA
![Page 22: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/22.jpg)
3 image breakpoints
![Page 23: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/23.jpg)
6 Images to support retina displays
![Page 24: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/24.jpg)
24 total images in a carousel with 4 unique images
![Page 25: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/25.jpg)
And if you have to 20 different markets.
![Page 26: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/26.jpg)
480 total images are needed
![Page 27: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/27.jpg)
![Page 28: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/28.jpg)
Creation Upload
Design workflow
![Page 29: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/29.jpg)
Creation Asset Management Trafficking Publishing
Actual Workflow
![Page 30: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/30.jpg)
How can we minimize team effort and reduce number of high quality images
needed, without sacrificing site performance on any device?
![Page 31: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/31.jpg)
Use only retina images.
Idea 1
![Page 32: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/32.jpg)
Large Device Width Small Device Width Medium Device Width
@1× - Normal pixel density images
@2× - Retina pixel density images
![Page 33: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/33.jpg)
WTfudge performance?
![Page 34: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/34.jpg)
@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
![Page 35: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/35.jpg)
@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
![Page 36: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/36.jpg)
@1× resolution images @2× resolution images
Dimensions: 1080 × 460 pixels Dimensions: 1080 × 460 pixels
![Page 37: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/37.jpg)
![Page 38: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/38.jpg)
![Page 39: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/39.jpg)
Perceived quality
photo credit: www.flickr.com/photos/mccun934/6220542849/
![Page 40: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/40.jpg)
Reduce the number of breakpoints.
Idea 2
![Page 41: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/41.jpg)
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
![Page 42: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/42.jpg)
Large + Medium Device Width Small Device Width
@2× - Retina pixel density images
![Page 43: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/43.jpg)
Idea 3Standardize aspect ratios.
![Page 44: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/44.jpg)
3:1
2.4:1
2:1
![Page 45: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/45.jpg)
Art Direction - One layout scaled down for smallest image breakpoint
3:1
3:1
![Page 46: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/46.jpg)
Art Direction - Different layout for smallest image breakpoint (optional)
3:1
3:1
![Page 47: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/47.jpg)
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
![Page 48: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/48.jpg)
480 images
Before
20 markets
160 images
After
20 markets
![Page 49: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/49.jpg)
This time for real!
photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg
![Page 50: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/50.jpg)
![Page 51: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/51.jpg)
photo credit: allthingsd.com/files/2013/03/WalmartHQ.jpg
![Page 52: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/52.jpg)
Adaptive Desktop Separate mWeb
![Page 53: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/53.jpg)
Adaptive Desktop Separate mWeb
![Page 54: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/54.jpg)
Adaptive Fully Responsive Desktop
? ? ?
![Page 55: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/55.jpg)
We’re going responsive in 4 months.
![Page 56: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/56.jpg)
Jump right in.
photo credit: www.flickr.com/photos/pmorgan/2829133525/
![Page 57: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/57.jpg)
What is currently being done?
![Page 58: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/58.jpg)
Home Page Department Page
![Page 59: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/59.jpg)
Heros
Banners
Home Page Department Page
![Page 60: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/60.jpg)
![Page 61: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/61.jpg)
![Page 62: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/62.jpg)
![Page 63: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/63.jpg)
![Page 64: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/64.jpg)
photo credit: cdn.evbuc.com/eventlogos/130112857/clueless659.jpg
![Page 65: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/65.jpg)
![Page 66: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/66.jpg)
more than 600 stories
![Page 67: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/67.jpg)
How can we manage the smallest amount of files, minimize the workload for all the people involved, while on a short timeline?
![Page 68: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/68.jpg)
My ideaJust use one image.
![Page 69: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/69.jpg)
Banners!
![Page 70: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/70.jpg)
CropSafeCropSafe
![Page 71: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/71.jpg)
CropSafeCropSafe
![Page 72: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/72.jpg)
![Page 73: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/73.jpg)
![Page 74: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/74.jpg)
![Page 75: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/75.jpg)
![Page 76: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/76.jpg)
Seeing is believing.
![Page 77: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/77.jpg)
Home Page (Breakpoint A)
![Page 78: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/78.jpg)
Home Page (Breakpoint A)
![Page 79: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/79.jpg)
Home Page (Breakpoint A)
![Page 80: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/80.jpg)
Home Page (Breakpoint A)
![Page 81: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/81.jpg)
Home Page (Breakpoint A)
Department Page (Breakpoint A)
![Page 82: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/82.jpg)
Home Page (Breakpoint A)
Department Page (Breakpoint A)
(Breakpoint D)
(Breakpoint E)
![Page 83: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/83.jpg)
![Page 84: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/84.jpg)
Seeing is believing.
![Page 85: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/85.jpg)
![Page 86: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/86.jpg)
photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg
![Page 87: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/87.jpg)
![Page 88: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/88.jpg)
![Page 89: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/89.jpg)
![Page 90: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/90.jpg)
![Page 91: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/91.jpg)
Heroes!
![Page 92: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/92.jpg)
1. Vector 2. Guide Image 3. Sample Graphic
![Page 93: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/93.jpg)
SafeCrop Crop
![Page 94: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/94.jpg)
SafeCrop Crop
![Page 95: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/95.jpg)
SafeCrop Crop
![Page 96: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/96.jpg)
5,500 images
Before
2.25 breakpoints
10,000 images
1:1 Desktop & mWeb
3 breakpoints
Desktop
mWeb
![Page 97: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/97.jpg)
4,200 images
Responsive
5 breakpoints
Everywhere
![Page 98: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/98.jpg)
![Page 99: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/99.jpg)
What we learned
![Page 100: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/100.jpg)
It’s not only about the technology
![Page 101: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/101.jpg)
The teams impacted by responsive design aren’t
always obvious
![Page 102: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/102.jpg)
It’s a partnership between UX and
Creative
![Page 103: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/103.jpg)
Validate ideas through prototyping
![Page 104: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/104.jpg)
Scale is actually not about size
![Page 105: Responsive Heroes at Scale](https://reader035.vdocuments.us/reader035/viewer/2022070509/58a5fe941a28abf6198b54ed/html5/thumbnails/105.jpg)
Thanks!Mini Kurhan Principal, User Experience Walmart.com @minikurhan
Olawale Oladunni Principal, User Experience Walmart Grocery @doubleola