Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Image Strategies


Published on

Responsive Image Strategies
Front Porch Conference 2014
Dallas, TX

Published in: Design
  • Be the first to comment

  • Be the first to like this

Responsive Image Strategies

  1. 1. @lnorman16 Responsive Image Strategies Lindsey Norman
  2. 2. @lnorman16 Thank you Mina Markham Chris Williams
  3. 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)
  4. 4. @lnorman16 UX Designer
  5. 5. Source: @lnorman16
  6. 6. @lnorman16 Responsive Image Strategies
  7. 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. 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 • • 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. 9. @lnorman16 In case that wasn’t complicated enough, let’s add some more complexity…
  10. 10. Source: House image @lnorman16
  11. 11. Source: Skyscraper image @lnorman16
  12. 12. @lnorman16 The conundrum of responsive images gets even more complex with large scale websites Source: Complicated gif
  13. 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. 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. 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. 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:
  17. 17. @lnorman16 Big Lesson #1: Responsive may seem old hat already, but it’s still new to many organizations Source: Hat image
  18. 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
  19. 19. Source: @lnorman16
  20. 20. Source: @lnorman16
  21. 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:
  22. 22. @lnorman16 Big Lesson #2: Style Guides = awesome
  23. 23. @lnorman16 2. Style Guides = awesome • Keeps everyone on the same page • Reference point for changes
  24. 24. @lnorman16 Some of our responsive image strategies
  25. 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. 26. @lnorman16 It makes no sense… but it works
  27. 27. (this establishment in Marfa, TX kind of makes no sense… but it somehow works. I want to go to there.) Source: @lnorman16
  28. 28. @lnorman16
  29. 29. @lnorman16 Percentage Crop Source: Hipster image
  30. 30. @lnorman16 Percentage Crop
  31. 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. 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. 33. @lnorman16 Percentage Crop The markup that Creative was responsible for:
  34. 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)
  35. 35. @lnorman16 Nathan’s krazee Sass loop
  36. 36. @lnorman16
  37. 37. @lnorman16 Percentage Crop: Lessons 2. Templates can help team members grasp responsive concepts faster
  38. 38. @lnorman16
  39. 39. @lnorman16 Percentage Crop
  40. 40. @lnorman16 <picture> Element Source: Mini hipsters image
  41. 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. 42. @lnorman16 <picture> Element The markup that Creative was responsible for:
  43. 43. @lnorman16 <picture> Element: Lessons 1. Be thorough when discussing media queries 2. Include discussion of HTML5 elements
  44. 44. @lnorman16 <picture> Element
  45. 45. @lnorman16 <picture> Element with absolutely positioned links Source: Manly items image
  46. 46. @lnorman16 <picture> Element with absolutely positioned links
  47. 47. @lnorman16 <picture> Element with absolutely positioned links
  48. 48. @lnorman16 <picture> Element with absolutely positioned links
  49. 49. @lnorman16 <picture> Element with absolutely positioned links
  50. 50. @lnorman16 <picture> Element with absolutely positioned links
  51. 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. 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. 53. @lnorman16 Help to close the knowledge gap
  54. 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. 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. 56. @lnorman16 Help to close the knowledge gap • Learning Responsive Web Design • Girl Develop It • Online tutorials • Show them blogs/resources
  57. 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: