responsive image strategies
DESCRIPTION
Responsive Image Strategies Front Porch Conference 2014 Dallas, TXTRANSCRIPT
![Page 1: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/1.jpg)
@lnorman16
Responsive Image
Lindsey Norman
Strategies
![Page 2: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/2.jpg)
@lnorman16
Thank you
Mina Markham
Chris Williams
![Page 3: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/3.jpg)
@lnorman16
–Audience member
“Who is this person standing in front of me?”
Question:
Answer:
Lindsey Norman @lnorman16
(will tweet SlideShare link to this presentation)
![Page 4: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/4.jpg)
@lnorman16
UX Designer
![Page 5: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/5.jpg)
@lnorman16Source: http://blogs.dallasobserver.com
![Page 6: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/6.jpg)
@lnorman16
Responsive ImageStrategies
![Page 7: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/7.jpg)
@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
![Page 8: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/8.jpg)
@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
![Page 9: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/9.jpg)
@lnorman16
In case that wasn’t complicated enough, let’s add some more complexity…
![Page 12: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/12.jpg)
@lnorman16
The conundrum of responsive images gets even more complex with large scale websites
Source: Complicated gif
![Page 13: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/13.jpg)
@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
![Page 14: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/14.jpg)
@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
![Page 15: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/15.jpg)
@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
![Page 16: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/16.jpg)
@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
![Page 17: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/17.jpg)
@lnorman16
Big Lesson #1: Responsive may seem old hat already, but it’s still new to many organizations
Source: Hat image
![Page 18: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/18.jpg)
@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
![Page 21: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/21.jpg)
@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
![Page 22: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/22.jpg)
@lnorman16
Big Lesson #2: Style Guides = awesome
![Page 23: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/23.jpg)
@lnorman16
2. Style Guides = awesome
• Keeps everyone on the same page • Reference point for changes
![Page 24: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/24.jpg)
@lnorman16
Some of our responsive image strategies
![Page 25: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/25.jpg)
@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
![Page 26: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/26.jpg)
@lnorman16
It makes no sense… but it works
![Page 27: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/27.jpg)
@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.)
![Page 28: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/28.jpg)
@lnorman16
![Page 30: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/30.jpg)
@lnorman16
Percentage Crop
![Page 31: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/31.jpg)
@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
![Page 32: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/32.jpg)
@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
![Page 33: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/33.jpg)
@lnorman16
Percentage Crop
The markup that Creative was responsible for:
![Page 34: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/34.jpg)
@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)
![Page 35: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/35.jpg)
@lnorman16
Nathan’s krazee Sass loop
![Page 36: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/36.jpg)
@lnorman16
![Page 37: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/37.jpg)
@lnorman16
Percentage Crop: Lessons
2. Templates can help team members grasp responsive concepts faster
![Page 38: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/38.jpg)
@lnorman16
![Page 39: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/39.jpg)
@lnorman16
Percentage Crop
![Page 41: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/41.jpg)
@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
![Page 42: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/42.jpg)
@lnorman16
<picture> Element
The markup that Creative was responsible for:
![Page 43: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/43.jpg)
@lnorman16
<picture> Element: Lessons
1. Be thorough when discussing media queries
2. Include discussion of HTML5 elements
![Page 44: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/44.jpg)
@lnorman16
<picture> Element
![Page 45: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/45.jpg)
@lnorman16
<picture> Elementwith absolutely positioned links
Source: Manly items image
![Page 46: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/46.jpg)
@lnorman16
<picture> Elementwith absolutely positioned links
![Page 47: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/47.jpg)
@lnorman16
<picture> Elementwith absolutely positioned links
![Page 48: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/48.jpg)
@lnorman16
<picture> Elementwith absolutely positioned links
![Page 49: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/49.jpg)
@lnorman16
<picture> Elementwith absolutely positioned links
![Page 50: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/50.jpg)
@lnorman16
<picture> Element with absolutely positioned links
![Page 51: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/51.jpg)
@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
![Page 52: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/52.jpg)
@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
![Page 53: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/53.jpg)
@lnorman16
Help to close the knowledge gap
![Page 54: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/54.jpg)
@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
![Page 55: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/55.jpg)
@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?)
![Page 56: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/56.jpg)
@lnorman16
• Learning Responsive Web Design
• Girl Develop It
• Online tutorials
• Show them blogs/resources
Help to close the knowledge gap
http://beaqn.in/webdesign/
![Page 57: Responsive Image Strategies](https://reader037.vdocuments.site/reader037/viewer/2022103115/5583816ad8b42a88578b50c9/html5/thumbnails/57.jpg)
@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)