SlideShare a Scribd company logo
@lnorman16 
Responsive Image 
Strategies 
Lindsey Norman
@lnorman16 
Thank you 
Mina Markham 
Chris Williams
@lnorman16 
Question: 
“Who is this person standing in front of me?” 
–Audience member 
Answer: 
Lindsey Norman 
@lnorman16 
(will tweet SlideShare link to this presentation)
@lnorman16 
UX Designer
Source: http://blogs.dallasobserver.com @lnorman16
@lnorman16 
Responsive Image 
Strategies
@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* 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
@lnorman16 
In case that wasn’t complicated enough, 
let’s add some more complexity…
Source: House image @lnorman16
Source: Skyscraper image @lnorman16
@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
Source: http://responsivewebdesign.com/podcast/ @lnorman16
Source: http://responsivewebdesign.com/podcast/ @lnorman16
@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
@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
(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
@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> Element 
with absolutely positioned links 
Source: Manly items image
@lnorman16 
<picture> Element 
with absolutely positioned links
@lnorman16 
<picture> Element 
with absolutely positioned links
@lnorman16 
<picture> Element 
with absolutely positioned links
@lnorman16 
<picture> Element 
with absolutely positioned links
@lnorman16 
<picture> Element with absolutely 
positioned links
@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
@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
@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 
Help to close the knowledge gap 
• Learning Responsive Web Design 
• Girl Develop It 
• Online tutorials 
• Show them blogs/resources 
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.” 
–Michael Abbott 
(Hat tip: Matt Baxter) 
Source: http://uncapitalized.com/2014/09/24/designers-engineers-empathy-greatness/

More Related Content

What's hot

ID14 – my 2014 observations in interactive design
ID14 – my 2014 observations in interactive designID14 – my 2014 observations in interactive design
ID14 – my 2014 observations in interactive design
Petra Sell
 
Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012
Prophets Agency
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
Lewis Lin 🦊
 
Designing With Usability In Mind
Designing With Usability In MindDesigning With Usability In Mind
Designing With Usability In Mind
CenergyDave
 
Uxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_designUxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_design
Lewis Lin 🦊
 
Design Effective PPT.
Design Effective PPT.Design Effective PPT.
Design Effective PPT.
Sapna74
 
Going from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX CareerGoing from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX Career
dpanarelli
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
Shah Muhammad Baig
 
The 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTestingThe 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTesting
InVision App
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014
Lewis Lin 🦊
 
Keys to Responsive Design
Keys to Responsive DesignKeys to Responsive Design
Keys to Responsive Design
Tim Wright
 
Spendometer.ie: Building a budgeting app that's kinda fun
Spendometer.ie: Building a budgeting app that's kinda funSpendometer.ie: Building a budgeting app that's kinda fun
Spendometer.ie: Building a budgeting app that's kinda fun
Brian Donohue
 
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Anna Dahlström
 
Nonprofit Must Have Technology Tools & Tricks
Nonprofit Must Have Technology Tools & TricksNonprofit Must Have Technology Tools & Tricks
Nonprofit Must Have Technology Tools & Tricks
Minds On Design Lab
 
The 2011 trends in interactive design
The 2011 trends in interactive designThe 2011 trends in interactive design
The 2011 trends in interactive design
Prophets Agency
 
Carl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 ppCarl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 pp
wendyr1974
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
Sara Cannon
 
Handbook: Human Experience Design Workshop (Digital Summit)
Handbook: Human Experience Design Workshop (Digital Summit)Handbook: Human Experience Design Workshop (Digital Summit)
Handbook: Human Experience Design Workshop (Digital Summit)
Sarah Weise
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Anna Dahlström
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
CLEVER°FRANKE
 

What's hot (20)

ID14 – my 2014 observations in interactive design
ID14 – my 2014 observations in interactive designID14 – my 2014 observations in interactive design
ID14 – my 2014 observations in interactive design
 
Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012
 
Web UI Design Patterns 2014
Web UI Design Patterns 2014Web UI Design Patterns 2014
Web UI Design Patterns 2014
 
Designing With Usability In Mind
Designing With Usability In MindDesigning With Usability In Mind
Designing With Usability In Mind
 
Uxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_designUxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_design
 
Design Effective PPT.
Design Effective PPT.Design Effective PPT.
Design Effective PPT.
 
Going from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX CareerGoing from Here to There: Transitioning into a UX Career
Going from Here to There: Transitioning into a UX Career
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
 
The 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTestingThe 7 most common usability issues by UserTesting
The 7 most common usability issues by UserTesting
 
Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014Mobile UI Design Patterns 2014
Mobile UI Design Patterns 2014
 
Keys to Responsive Design
Keys to Responsive DesignKeys to Responsive Design
Keys to Responsive Design
 
Spendometer.ie: Building a budgeting app that's kinda fun
Spendometer.ie: Building a budgeting app that's kinda funSpendometer.ie: Building a budgeting app that's kinda fun
Spendometer.ie: Building a budgeting app that's kinda fun
 
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
Designing Better UX Deliverables - Cambridge Usability Group, 12 May 2014
 
Nonprofit Must Have Technology Tools & Tricks
Nonprofit Must Have Technology Tools & TricksNonprofit Must Have Technology Tools & Tricks
Nonprofit Must Have Technology Tools & Tricks
 
The 2011 trends in interactive design
The 2011 trends in interactive designThe 2011 trends in interactive design
The 2011 trends in interactive design
 
Carl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 ppCarl week 5 dont make me think part 2 pp
Carl week 5 dont make me think part 2 pp
 
Typography and User Experience - WCSF
Typography and User Experience -  WCSFTypography and User Experience -  WCSF
Typography and User Experience - WCSF
 
Handbook: Human Experience Design Workshop (Digital Summit)
Handbook: Human Experience Design Workshop (Digital Summit)Handbook: Human Experience Design Workshop (Digital Summit)
Handbook: Human Experience Design Workshop (Digital Summit)
 
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
Best Practice For UX Deliverables - Eventhandler, London, 05 March 2014
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 

Viewers also liked

Ethnography in Software Design *UPDATED for Big Design 2015*
Ethnography in Software Design *UPDATED for Big Design 2015*Ethnography in Software Design *UPDATED for Big Design 2015*
Ethnography in Software Design *UPDATED for Big Design 2015*
Kelly Moran
 
Ethics and Creativity - Presented to Creative Mornings Dallas
Ethics and Creativity - Presented to Creative Mornings DallasEthics and Creativity - Presented to Creative Mornings Dallas
Ethics and Creativity - Presented to Creative Mornings Dallas
Kelly Moran
 
Responding to Harassment: Moving Past Feminism 101
Responding to Harassment: Moving Past Feminism 101Responding to Harassment: Moving Past Feminism 101
Responding to Harassment: Moving Past Feminism 101
Kassandra Perch
 
Front Porch Keynote 2014
Front Porch Keynote 2014Front Porch Keynote 2014
Front Porch Keynote 2014
amboy00
 
NodeBots SF Slides
NodeBots SF SlidesNodeBots SF Slides
NodeBots SF Slides
Kassandra Perch
 
Front Porch 2013 Keynote
Front Porch 2013 KeynoteFront Porch 2013 Keynote
Front Porch 2013 Keynote
amboy00
 
Taking the "You" out of User Experience
Taking the "You" out of User ExperienceTaking the "You" out of User Experience
Taking the "You" out of User Experience
Lindsey Norman
 
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive DesignSweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
Mina Markham
 
SVG Strikes Back
SVG Strikes BackSVG Strikes Back
SVG Strikes Back
Matt Baxter
 
SMACSS Your Sass Up
SMACSS Your Sass UpSMACSS Your Sass Up
SMACSS Your Sass Up
Mina Markham
 
Putting The Font In Front End
Putting The Font In Front EndPutting The Font In Front End
Putting The Font In Front End
Jake Smith
 
Image Strategies in Ted Talks
Image Strategies in Ted TalksImage Strategies in Ted Talks
Image Strategies in Ted Talks
Aimee Knight
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
Zoe Gillenwater
 
Education and Industry – UCLAN Burnley – 11 Feb 2015
Education and Industry – UCLAN Burnley – 11 Feb 2015Education and Industry – UCLAN Burnley – 11 Feb 2015
Education and Industry – UCLAN Burnley – 11 Feb 2015
Jake Smith
 
Celebrities, Politicians and Social Media
Celebrities, Politicians and Social MediaCelebrities, Politicians and Social Media
Celebrities, Politicians and Social Media
Caroline Klimek
 
Image Development Strategies
Image Development StrategiesImage Development Strategies
Image Development Strategies
sranasuriya
 
Leveraging social media image marketing strategies
Leveraging social media image marketing strategiesLeveraging social media image marketing strategies
Leveraging social media image marketing strategies
thebeachbumentrepreneur
 
Marketing Your Farm or Farmers Market
Marketing Your Farm or Farmers MarketMarketing Your Farm or Farmers Market
Marketing Your Farm or Farmers Market
Glenn Muske
 
Ethnography in Software Design - An Anthropologist's Perspective
Ethnography in Software Design - An Anthropologist's PerspectiveEthnography in Software Design - An Anthropologist's Perspective
Ethnography in Software Design - An Anthropologist's Perspective
Kelly Moran
 
Essential Digital Tools for Farm and Food Ventures - 25th Annual Southern SAW...
Essential Digital Tools for Farm and Food Ventures - 25th Annual Southern SAW...Essential Digital Tools for Farm and Food Ventures - 25th Annual Southern SAW...
Essential Digital Tools for Farm and Food Ventures - 25th Annual Southern SAW...
Robert Fish
 

Viewers also liked (20)

Ethnography in Software Design *UPDATED for Big Design 2015*
Ethnography in Software Design *UPDATED for Big Design 2015*Ethnography in Software Design *UPDATED for Big Design 2015*
Ethnography in Software Design *UPDATED for Big Design 2015*
 
Ethics and Creativity - Presented to Creative Mornings Dallas
Ethics and Creativity - Presented to Creative Mornings DallasEthics and Creativity - Presented to Creative Mornings Dallas
Ethics and Creativity - Presented to Creative Mornings Dallas
 
Responding to Harassment: Moving Past Feminism 101
Responding to Harassment: Moving Past Feminism 101Responding to Harassment: Moving Past Feminism 101
Responding to Harassment: Moving Past Feminism 101
 
Front Porch Keynote 2014
Front Porch Keynote 2014Front Porch Keynote 2014
Front Porch Keynote 2014
 
NodeBots SF Slides
NodeBots SF SlidesNodeBots SF Slides
NodeBots SF Slides
 
Front Porch 2013 Keynote
Front Porch 2013 KeynoteFront Porch 2013 Keynote
Front Porch 2013 Keynote
 
Taking the "You" out of User Experience
Taking the "You" out of User ExperienceTaking the "You" out of User Experience
Taking the "You" out of User Experience
 
Sweet and Sassy Responsive Design
Sweet and Sassy Responsive DesignSweet and Sassy Responsive Design
Sweet and Sassy Responsive Design
 
SVG Strikes Back
SVG Strikes BackSVG Strikes Back
SVG Strikes Back
 
SMACSS Your Sass Up
SMACSS Your Sass UpSMACSS Your Sass Up
SMACSS Your Sass Up
 
Putting The Font In Front End
Putting The Font In Front EndPutting The Font In Front End
Putting The Font In Front End
 
Image Strategies in Ted Talks
Image Strategies in Ted TalksImage Strategies in Ted Talks
Image Strategies in Ted Talks
 
CSS3 Layout
CSS3 LayoutCSS3 Layout
CSS3 Layout
 
Education and Industry – UCLAN Burnley – 11 Feb 2015
Education and Industry – UCLAN Burnley – 11 Feb 2015Education and Industry – UCLAN Burnley – 11 Feb 2015
Education and Industry – UCLAN Burnley – 11 Feb 2015
 
Celebrities, Politicians and Social Media
Celebrities, Politicians and Social MediaCelebrities, Politicians and Social Media
Celebrities, Politicians and Social Media
 
Image Development Strategies
Image Development StrategiesImage Development Strategies
Image Development Strategies
 
Leveraging social media image marketing strategies
Leveraging social media image marketing strategiesLeveraging social media image marketing strategies
Leveraging social media image marketing strategies
 
Marketing Your Farm or Farmers Market
Marketing Your Farm or Farmers MarketMarketing Your Farm or Farmers Market
Marketing Your Farm or Farmers Market
 
Ethnography in Software Design - An Anthropologist's Perspective
Ethnography in Software Design - An Anthropologist's PerspectiveEthnography in Software Design - An Anthropologist's Perspective
Ethnography in Software Design - An Anthropologist's Perspective
 
Essential Digital Tools for Farm and Food Ventures - 25th Annual Southern SAW...
Essential Digital Tools for Farm and Food Ventures - 25th Annual Southern SAW...Essential Digital Tools for Farm and Food Ventures - 25th Annual Southern SAW...
Essential Digital Tools for Farm and Food Ventures - 25th Annual Southern SAW...
 

Similar to Responsive Image Strategies

Guidelines for Responsive UX Design 11/15/2018
Guidelines for Responsive UX Design 11/15/2018Guidelines for Responsive UX Design 11/15/2018
Guidelines for Responsive UX Design 11/15/2018
Robert Stribley
 
Guidelines for Responsive UX Design 11/16/19
Guidelines for Responsive UX Design 11/16/19Guidelines for Responsive UX Design 11/16/19
Guidelines for Responsive UX Design 11/16/19
Robert Stribley
 
[Seminar] hwiyeon 200709
[Seminar] hwiyeon 200709[Seminar] hwiyeon 200709
[Seminar] hwiyeon 200709
ivaderivader
 
Guidelines for Responsive UX Design 07/07/2018
Guidelines for Responsive UX Design 07/07/2018Guidelines for Responsive UX Design 07/07/2018
Guidelines for Responsive UX Design 07/07/2018
Robert Stribley
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
Four Kitchens
 
Guidelines for Responsive UX Design 03/23/2019
Guidelines for Responsive UX Design 03/23/2019Guidelines for Responsive UX Design 03/23/2019
Guidelines for Responsive UX Design 03/23/2019
Robert Stribley
 
Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19
Robert Stribley
 
responsive awareness
responsive awarenessresponsive awareness
responsive awareness
onehundred_be
 
Strategies for User Experience Design
Strategies for User Experience DesignStrategies for User Experience Design
Strategies for User Experience Design
Robert Stribley
 
Guidelines for Responsive UX Design 12/12/20
Guidelines for Responsive UX Design 12/12/20Guidelines for Responsive UX Design 12/12/20
Guidelines for Responsive UX Design 12/12/20
Robert Stribley
 
Delightful UX
Delightful UXDelightful UX
Delightful UX
FDConf
 
Content Strategy: Do It For Your Users
Content Strategy: Do It For Your UsersContent Strategy: Do It For Your Users
Content Strategy: Do It For Your Users
Andrea Sarther
 
Progressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive RedesignProgressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive Redesign
Karin Tracy
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's Web
Meagan Fisher
 
dmedia DP2 Interaction Design - Deliverable 2
dmedia DP2 Interaction Design - Deliverable 2dmedia DP2 Interaction Design - Deliverable 2
dmedia DP2 Interaction Design - Deliverable 2
Stanford dmedia
 
Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
Game design 2 (2013): Lecture 12 - Usability, Layout and MetaphorGame design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
David Farrell
 
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutGames Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
David Farrell
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan
 
The Collaborative UX Designer's Toolbox
The Collaborative UX Designer's ToolboxThe Collaborative UX Designer's Toolbox
The Collaborative UX Designer's Toolbox
Lane Goldstone
 
CMS Crash Course!
CMS Crash Course!CMS Crash Course!
CMS Crash Course!
TechSoup Canada
 

Similar to Responsive Image Strategies (20)

Guidelines for Responsive UX Design 11/15/2018
Guidelines for Responsive UX Design 11/15/2018Guidelines for Responsive UX Design 11/15/2018
Guidelines for Responsive UX Design 11/15/2018
 
Guidelines for Responsive UX Design 11/16/19
Guidelines for Responsive UX Design 11/16/19Guidelines for Responsive UX Design 11/16/19
Guidelines for Responsive UX Design 11/16/19
 
[Seminar] hwiyeon 200709
[Seminar] hwiyeon 200709[Seminar] hwiyeon 200709
[Seminar] hwiyeon 200709
 
Guidelines for Responsive UX Design 07/07/2018
Guidelines for Responsive UX Design 07/07/2018Guidelines for Responsive UX Design 07/07/2018
Guidelines for Responsive UX Design 07/07/2018
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Guidelines for Responsive UX Design 03/23/2019
Guidelines for Responsive UX Design 03/23/2019Guidelines for Responsive UX Design 03/23/2019
Guidelines for Responsive UX Design 03/23/2019
 
Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19Guidelines for Responsive UX Design 07/20/19
Guidelines for Responsive UX Design 07/20/19
 
responsive awareness
responsive awarenessresponsive awareness
responsive awareness
 
Strategies for User Experience Design
Strategies for User Experience DesignStrategies for User Experience Design
Strategies for User Experience Design
 
Guidelines for Responsive UX Design 12/12/20
Guidelines for Responsive UX Design 12/12/20Guidelines for Responsive UX Design 12/12/20
Guidelines for Responsive UX Design 12/12/20
 
Delightful UX
Delightful UXDelightful UX
Delightful UX
 
Content Strategy: Do It For Your Users
Content Strategy: Do It For Your UsersContent Strategy: Do It For Your Users
Content Strategy: Do It For Your Users
 
Progressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive RedesignProgressive Enchancement: Crafting a Responsive Redesign
Progressive Enchancement: Crafting a Responsive Redesign
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's Web
 
dmedia DP2 Interaction Design - Deliverable 2
dmedia DP2 Interaction Design - Deliverable 2dmedia DP2 Interaction Design - Deliverable 2
dmedia DP2 Interaction Design - Deliverable 2
 
Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
Game design 2 (2013): Lecture 12 - Usability, Layout and MetaphorGame design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
Game design 2 (2013): Lecture 12 - Usability, Layout and Metaphor
 
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and LayoutGames Design 2 - Lecture 12 - Usability, Metaphor and Layout
Games Design 2 - Lecture 12 - Usability, Metaphor and Layout
 
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on MobileBoris Chan - FITC SCREENS - Becoming Social By Default on Mobile
Boris Chan - FITC SCREENS - Becoming Social By Default on Mobile
 
The Collaborative UX Designer's Toolbox
The Collaborative UX Designer's ToolboxThe Collaborative UX Designer's Toolbox
The Collaborative UX Designer's Toolbox
 
CMS Crash Course!
CMS Crash Course!CMS Crash Course!
CMS Crash Course!
 

Recently uploaded

欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
jafiradnan336
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
ynrtjotp
 
My Fashion PPT is my presentation on fashion and Trendss
My Fashion PPT is my presentation on fashion and TrendssMy Fashion PPT is my presentation on fashion and Trendss
My Fashion PPT is my presentation on fashion and Trendss
MedhaRana1
 
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
kmzsy4kn
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
yqyquge
 
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
67n7f53
 
Value based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docxValue based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docx
JIT KUMAR GUPTA
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
wkip62b
 
The Color of Life Slideshow by: Kal-el Go
The Color of Life Slideshow by: Kal-el GoThe Color of Life Slideshow by: Kal-el Go
The Color of Life Slideshow by: Kal-el Go
Kal-el Shows
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
oabn3692
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
w26izoeb
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
ubogumo
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
t34zod9l
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
21uul8se
 
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
zv943dhb
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
p74xokfq
 
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
bel9p89b
 
一比一原版(curtin毕业证)澳洲科廷科技大学毕业证如何办理
一比一原版(curtin毕业证)澳洲科廷科技大学毕业证如何办理一比一原版(curtin毕业证)澳洲科廷科技大学毕业证如何办理
一比一原版(curtin毕业证)澳洲科廷科技大学毕业证如何办理
9lq7ultg
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
EricHo305923
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
ka3y2ukz
 

Recently uploaded (20)

欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
欧洲杯买球-欧洲杯买球买球网好的网站-欧洲杯买球哪里有正规的买球网站|【​网址​🎉ac123.net🎉​】
 
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
一比一原版(爱大毕业证)美国爱荷华大学毕业证如何办理
 
My Fashion PPT is my presentation on fashion and Trendss
My Fashion PPT is my presentation on fashion and TrendssMy Fashion PPT is my presentation on fashion and Trendss
My Fashion PPT is my presentation on fashion and Trendss
 
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
一比一原版(KPU毕业证)加拿大昆特兰理工大学毕业证如何办理
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
 
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
一比一原版(OU毕业证)美国俄克拉荷马大学毕业证如何办理
 
Value based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docxValue based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docx
 
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
一比一原版(UC毕业证书)堪培拉大学毕业证如何办理
 
The Color of Life Slideshow by: Kal-el Go
The Color of Life Slideshow by: Kal-el GoThe Color of Life Slideshow by: Kal-el Go
The Color of Life Slideshow by: Kal-el Go
 
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
一比一原版(Rice毕业证)美国莱斯大学毕业证如何办理
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
 
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
一比一原版(NU毕业证书)诺森比亚大学毕业证如何办理
 
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
一比一原版(UoB毕业证)英国伯明翰大学毕业证如何办理
 
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
一比一原版(USQ毕业证书)南昆士兰大学毕业证如何办理
 
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
 
一比一原版(curtin毕业证)澳洲科廷科技大学毕业证如何办理
一比一原版(curtin毕业证)澳洲科廷科技大学毕业证如何办理一比一原版(curtin毕业证)澳洲科廷科技大学毕业证如何办理
一比一原版(curtin毕业证)澳洲科廷科技大学毕业证如何办理
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
 
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
一比一原版(Brunel毕业证)英国布鲁内尔大学毕业证如何办理
 

Responsive Image Strategies

  • 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…
  • 10. Source: House image @lnorman16
  • 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
  • 26. @lnorman16 It makes no sense… but it works
  • 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
  • 29. @lnorman16 Percentage Crop Source: Hipster image
  • 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)
  • 37. @lnorman16 Percentage Crop: Lessons 2. Templates can help team members grasp responsive concepts faster
  • 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
  • 53. @lnorman16 Help to close the knowledge gap
  • 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/