SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
1.
@lnorman16
Responsive Image
Strategies
Lindsey Norman
2.
@lnorman16
Thank you
Mina Markham
Chris Williams
3.
@lnorman16
Question:
“Who is this person standing in front of me?”
–Audience member
Answer:
Lindsey Norman
@lnorman16
(will tweet SlideShare link to this presentation)
7.
@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
8.
@lnorman16
This *is* complicated
Use 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
9.
@lnorman16
In case that wasn’t complicated enough,
let’s add some more complexity…
12.
@lnorman16
The conundrum of responsive images gets
even more complex with large scale websites
Source: Complicated gif
13.
@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
14.
@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
15.
@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
16.
@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
17.
@lnorman16
Big Lesson #1:
Responsive may seem old hat already,
but it’s still new to many organizations
Source: Hat image
18.
@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
21.
@lnorman16
“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.”
–Miranda Mulligan
Digital Design Director, Northwestern University Knight Lab
The Boston Globe
Source: http://responsivewebdesign.com/podcast/boston-globe.html
22.
@lnorman16
Big Lesson #2:
Style Guides = awesome
23.
@lnorman16
2. Style Guides = awesome
• Keeps everyone on the same page
• Reference point for changes
24.
@lnorman16
Some of our responsive
image strategies
25.
@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
27.
(this establishment in
Marfa, TX kind of
makes no sense… but
it somehow works. I
want to go to there.)
Source: http://www.yelp.com/biz/museum-of-electronic-wonders-and-latenight-grilled-cheese-parlour-marfa @lnorman16
31.
@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
32.
@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
33.
@lnorman16
Percentage Crop
The markup that Creative was responsible for:
34.
@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)
40.
@lnorman16
<picture> Element
Source: Mini hipsters image
41.
@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
42.
@lnorman16
<picture> Element
The markup that Creative was responsible for:
43.
@lnorman16
<picture> Element: Lessons
1. Be thorough when discussing media queries
2. Include discussion of HTML5 elements
45.
@lnorman16
<picture> Element
with absolutely positioned links
Source: Manly items image
46.
@lnorman16
<picture> Element
with absolutely positioned links
47.
@lnorman16
<picture> Element
with absolutely positioned links
48.
@lnorman16
<picture> Element
with absolutely positioned links
49.
@lnorman16
<picture> Element
with absolutely positioned links
50.
@lnorman16
<picture> Element with absolutely
positioned links
51.
@lnorman16
<picture> Element with absolutely
positioned links
• 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
52.
@lnorman16
<picture> Element with absolutely
positioned links
Lessons:
1. Show how to design in the browser
2. Discuss mobile hit states/legibility
3. This takes time to learn and master
54.
@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
55.
@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?)
56.
@lnorman16
Help to close the knowledge gap
• Learning Responsive Web Design
• Girl Develop It
• Online tutorials
• Show them blogs/resources
http://beaqn.in/webdesign/
57.
@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.”
–Michael Abbott
(Hat tip: Matt Baxter)
Source: http://uncapitalized.com/2014/09/24/designers-engineers-empathy-greatness/
0 likes
Be the first to like this
Views
Total views
1,467
On SlideShare
0
From Embeds
0
Number of Embeds
60
You have now unlocked unlimited access to 20M+ documents!
Unlimited Reading
Learn faster and smarter from top experts
Unlimited Downloading
Download to take your learnings offline and on the go
You also get free access to Scribd!
Instant access to millions of ebooks, audiobooks, magazines, podcasts and more.
Read and listen offline with any device.
Free access to premium services like Tuneln, Mubi and more.