@lnorman16

Responsive Image

Lindsey Norman

Strategies

@lnorman16

Thank you

Mina Markham

Chris Williams

@lnorman16

–Audience member

“Who is this person standing in front of me?”

Question:

Answer:

Lindsey Norman @lnorman16

(will tweet SlideShare link to this presentation)

@lnorman16

UX Designer

@lnorman16Source: http://blogs.dallasobserver.com

@lnorman16

Responsive ImageStrategies

@lnorman16

Responsive image drama

“Lots of the things we do on the web are hard, but I reserve a special, damaged place in my delicate dev heart just for images.”

-Lyza D. Gardner, A List Apart !

“This is a very confusing subject. It needs to get thought about and written about so it can shake out and become a more ingrained part of our collective front end developer consciousness.”

- Chris Coyier, CSS-Tricks

@lnorman16

This *is* complicatedUse Cases

• Resolution-based selection

• Viewport-based selection

• Device-pixel-ratio-based selection

• Art direction • Design breakpoints • Matching media features

and media types • Relative units • Image formats • User control over

sources

Techniques • Picturefill • Adaptive Images • HiSRC • HiSRC (alt. transparent

GIF + Media Query approach)

• Responsive Images • Responsive Images Alt • Foresight.js • src.sencha.io • riloadr • Responsive Enhance • rwdImages • Retina.ja • Content Aware Resizing

• Doubletake • Responsive Images with

PHP and jQuery • Responsive Images with

Cookies • Testing Responsive Images • Creating responsive images

using the noscript tag • Responsive Images and

TinySRC (Now Sencha.IO) • Responsive Images Right

Now • Responsive context aware

images without cookies or server logic

• WURFL Server Side Responsive Images

Sources: Use Cases | Techniques

@lnorman16

In case that wasn’t complicated enough, let’s add some more complexity…

@lnorman16Source: House image

@lnorman16Source: Skyscraper image

@lnorman16

The conundrum of responsive images gets even more complex with large scale websites

Source: Complicated gif

@lnorman16

Focus for this talk

Discuss my experience on recent large-scale responsive project

• What lessons we learned during the process

• How we handled responsive images given our constraints

@lnorman16

Our scenario• Large retail client

• Over $100 million in profits in 2013 • Massive amount of site content/number of

pages • Organization new to responsive design, chose

to do a responsive retrofit

• Much of the image content changes frequently

• Art direction of high importance

@lnorman16

My role in the project

• I assisted the client’s Creative team in preparing for the change to responsive design, focusing specifically on responsive images

@lnorman16

My role in the project

• I assisted the client’s Creative team in preparing for the change to responsive design, focusing specifically on responsive images

• Responsive image strategies developed by the unfairly-talented Nathan Smith

Source: https://twitter.com/nathansmith

@lnorman16

Big Lesson #1: Responsive may seem old hat already, but it’s still new to many organizations

Source: Hat image

@lnorman16

Web years = Dog years

• Responsive introduced in 2010

• Therefore, responsive has been in existence for 28 years*

!*not an actual fact

Source: Dog years image

@lnorman16Source: http://responsivewebdesign.com/podcast/

@lnorman16Source: http://responsivewebdesign.com/podcast/

@lnorman16

–Miranda Mulligan Digital Design Director, Northwestern University Knight Lab

The Boston Globe

“The graphics team, when they were designing their information graphics, all of a

sudden they had to start to think about “What is this going to look like on mobile?” which is something that they never had to

think about beforehand.”

Source: http://responsivewebdesign.com/podcast/boston-globe.html

@lnorman16

Big Lesson #2: Style Guides = awesome

@lnorman16

2. Style Guides = awesome

• Keeps everyone on the same page • Reference point for changes

@lnorman16

Some of our responsive image strategies

@lnorman16

Retina Revolution

• Create image at 1.5 to 2 times larger than max width

• Highly compressed

• Often a lower file size than exporting at actual size with a low compression

• Looks really sharp on retina displays

Sources: Retina Revolution | Compressive Images

@lnorman16

It makes no sense… but it works

@lnorman16Source: http://www.yelp.com/biz/museum-of-electronic-wonders-and-latenight-grilled-cheese-parlour-marfa

(this establishment in Marfa, TX kind of makes no sense… but it somehow works. I want to go to there.)

@lnorman16

@lnorman16

Percentage Crop

Source: Hipster image

@lnorman16

Percentage Crop

@lnorman16

Percentage Crop

• Involves moving the viewable area of image for smaller viewports

• For tablet/desktop, the full width of image shown

• For mobile widths, image has cropped focus

@lnorman16

Percentage Crop

• Addresses art direction use case

• Fast solution - one image instead of multiple

• Used most often by Creative team

• Easy to understand, minimal code

@lnorman16

Percentage Crop

The markup that Creative was responsible for:

@lnorman16

Percentage Crop: Lessons

1. Creative team wanted to have more control:

• Left, right, and center crop

• More percentage options (50-90%, with 5% increments in between)

@lnorman16

Nathan’s krazee Sass loop

@lnorman16

@lnorman16

Percentage Crop: Lessons

2. Templates can help team members grasp responsive concepts faster

@lnorman16

@lnorman16

Percentage Crop

@lnorman16

<picture> Element

Source: Mini hipsters image

@lnorman16

<picture> Element• Requires designating separate image assets

for mobile, tablet/desktop

• Uses Picturefill.js

• More time intensive/used less often by the Creative team

• Good for pages of high importance

@lnorman16

<picture> Element

The markup that Creative was responsible for:

@lnorman16

<picture> Element: Lessons

1. Be thorough when discussing media queries

2. Include discussion of HTML5 elements

@lnorman16

<picture> Element

@lnorman16

<picture> Elementwith absolutely positioned links

Source: Manly items image

@lnorman16

<picture> Elementwith absolutely positioned links

@lnorman16

<picture> Elementwith absolutely positioned links

@lnorman16

<picture> Elementwith absolutely positioned links

@lnorman16

<picture> Elementwith absolutely positioned links

@lnorman16

<picture> Element with absolutely positioned links

@lnorman16

• Much more time intensive to create than the alternative (aka image maps)

• Intimidating for Creative team at first

• Better for user experience, especially on mobile

<picture> Element with absolutely positioned links

@lnorman16

Lessons:

1. Show how to design in the browser

2. Discuss mobile hit states/legibility

3. This takes time to learn and master

<picture> Element with absolutely positioned links

@lnorman16

Help to close the knowledge gap

@lnorman16

Help to close the knowledge gap

The problem: • Creative team with varying levels of development skills

• Focused on fixed-width dimensions, “pixel-perfect” design

New ways of thinking: • “What would this look like on mobile?”

• Hit state size for touch

• Thinking in terms of percentages

@lnorman16

Help to close the knowledge gap

• Hold workshops

• Create guides/documentation

• Show them how to design in the browser

• Try not to use the word “education” - (maybe knowledge sharing?)

@lnorman16

• Learning Responsive Web Design

• Girl Develop It

• Online tutorials

• Show them blogs/resources

Help to close the knowledge gap

http://beaqn.in/webdesign/

@lnorman16

“…I’ve learned that empathy is core to a product team’s ability to move quickly from designers’ ‘what’ to engineers’ ‘how.’

…when they overcome the communication barrier that separates the what and the how, good things are certain to come.”

Source: http://uncapitalized.com/2014/09/24/designers-engineers-empathy-greatness/

–Michael Abbott (Hat tip: Matt Baxter)