'

Responsive Heroes at Scale

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

Walmart starts moving to Responsive Web Design in 2014


Слайд 3

What’s a hero image?


Слайд 4

Hero images are usually large promo images


Слайд 5

photo + whole lotta text aspect ratio? so tiny!


Слайд 6

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


Слайд 7


Слайд 8


Слайд 9


Слайд 10


Слайд 11

Large Device Width Medium Device Width Small Device Width


Слайд 12

Large Device Width Medium Device Width Small Device Width @1× - Normal pixel density images 3:1 2.4:1 2:1 @2× - Retina pixel density images 3:1 2.4:1 2:1


Слайд 13

Cross-functional team is onboard. photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg


Слайд 14

A few weeks later…


Слайд 15

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


Слайд 16


Слайд 17

Normal Pixel density @1× Normal Pixel density @1× High Pixel density @2×


Слайд 18

3:1 2.4:1 2:1


Слайд 19


Слайд 20

San Jose , CA Denver, CO


Слайд 21

3 image breakpoints


Слайд 22

6 Images to support retina displays


Слайд 23

24 total images in a carousel with 4 unique images


Слайд 24

And if you have to 20 different markets.


Слайд 25

480 total images are needed


Слайд 26


Слайд 27

Design workflow Creation Upload


Слайд 28

Actual Workflow Creation Asset Management Trafficking Publishing


Слайд 29

How can we minimize team effort and reduce number of high quality images needed, without sacrificing site performance on any device?


Слайд 30

Idea 1 Use only retina images.


Слайд 31

Large Device Width @1× - Normal pixel density images @2× - Retina pixel density images Medium Device Width Small Device Width


Слайд 32

WTfudge performance?


Слайд 33

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


Слайд 34

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


Слайд 35

@1× resolution images @2× resolution images Dimensions: 1080 × 460 pixels Dimensions: 1080 × 460 pixels


Слайд 36


Слайд 37


Слайд 38

Perceived quality photo credit: www.flickr.com/photos/mccun934/6220542849/


Слайд 39

Idea 2 Reduce the number of breakpoints.


Слайд 40

Large Device Width Medium Device Width Small 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


Слайд 41

Large + Medium Device Width @2× - Retina pixel density images Small Device Width


Слайд 42

Idea 3 Standardize aspect ratios.


Слайд 43

3:1 2.4:1 2:1


Слайд 44

Art Direction - One layout scaled down for smallest image breakpoint 3:1 3:1


Слайд 45

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


Слайд 46

Before After @1× - Normal pixel density @2× - Retina pixel density @2× - Retina pixel density 3:1 3:1 3:1 2.4:1 2:1 2.4:1 2:1 3:1


Слайд 47

Before After 480 images 160 images 20 markets 20 markets


Слайд 48

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


Слайд 49


Слайд 50

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


Слайд 51

Adaptive Desktop Separate mWeb


Слайд 52

Adaptive Desktop Separate mWeb


Слайд 53

Adaptive Fully Responsive Desktop ? ? ?


Слайд 54

We’re going responsive in 4 months.


Слайд 55

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


Слайд 56

What is currently being done?


Слайд 57

Home Page Department Page


Слайд 58

Home Page Department Page Heros Banners


Слайд 59


Слайд 60


Слайд 61


Слайд 62


Слайд 63

photo credit: cdn.evbuc.com/eventlogos/130112857/clueless659.jpg


Слайд 64


Слайд 65

more than 600 stories


Слайд 66

How can we manage the smallest amount of files, minimize the workload for all the people involved, while on a short timeline?


Слайд 67

My idea Just use one image.


Слайд 68

Banners!


Слайд 69

Safe Crop Safe Crop


Слайд 70

Safe Crop Safe Crop


Слайд 71


Слайд 72


Слайд 73


Слайд 74


Слайд 75

Seeing is believing.


Слайд 76

Home Page (Breakpoint A)


Слайд 77

Home Page (Breakpoint A)


Слайд 78

Home Page (Breakpoint A)


Слайд 79

Home Page (Breakpoint A)


Слайд 80

Home Page (Breakpoint A) Department Page (Breakpoint A)


Слайд 81

Home Page (Breakpoint A) (Breakpoint D) Department Page (Breakpoint A) (Breakpoint E)


Слайд 82


Слайд 83

Seeing is believing.


Слайд 84


Слайд 85

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


Слайд 86


Слайд 87


Слайд 88


Слайд 89


Слайд 90

Heroes!


Слайд 91

1. Vector 2. Guide Image 3. Sample Graphic


Слайд 92

Crop Safe Crop


Слайд 93

Crop Safe Crop


Слайд 94

Crop Safe Crop


Слайд 95

Desktop mWeb Before 1:1 Desktop & mWeb 5,500 images 10,000 images 2.25 breakpoints 3 breakpoints


Слайд 96

Everywhere Responsive 4,200 images 5 breakpoints


Слайд 97


Слайд 98

What we learned


Слайд 99

It’s not only about the technology


Слайд 100

The teams impacted by responsive design aren’t always obvious


Слайд 101

It’s a partnership between UX and Creative


Слайд 102

Validate ideas through prototyping


Слайд 103

Scale is actually not about size


Слайд 104

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


Слайд 105


×

HTML:





Ссылка: