• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Images and Drupal: Twin Cities Drupal Camp 2013
 

Responsive Images and Drupal: Twin Cities Drupal Camp 2013

on

  • 2,575 views

Video of this talk: http://www.youtube.com/watch?v=Zo_TTvV6DC4 ...

Video of this talk: http://www.youtube.com/watch?v=Zo_TTvV6DC4

One of the challenges posed by fluid, responsive designs is how to provide quality images that download quickly. We’ll look at the challenges at finding a good solution, and the problems with some of the solutions available.

The primary solution we will look at is the proposed picture element, which allows us to provide several images at various sizes and resolutions, with the appropriate image selected with media queries.

We will also examine how to determine the sizes for the images you use in the picture element and touch on how to make video appear at the correct aspect ratio no matter the size of its container, using padding.

Most importantly, we’ll look at options for how to implement responsive images in Drupal, particularly through the Picture and Breakpoint modules. We’ll also look at ways to use responsive images in conjunction with fields, Views and WYSIWYG editors.

Statistics

Views

Total Views
2,575
Views on SlideShare
2,335
Embed Views
240

Actions

Likes
3
Downloads
10
Comments
0

3 Embeds 240

https://twitter.com 230
http://eventifier.co 8
http://demos.thereisamoduleforthat.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive Images and Drupal: Twin Cities Drupal Camp 2013 Responsive Images and Drupal: Twin Cities Drupal Camp 2013 Presentation Transcript

    • Responsive Images Picture and Drupal, best friends forever Friday, July 19, 13
    • Marc Drummond Drupal: mdrummond Twitter: @MarcDrummond Blog: www.marcdrummond.com Find me: Web and graphic design, City of Minnetonka Friday, July 19, 13
    • 34% Friday, July 19, 13
    • 72% Friday, July 19, 13
    • Step One Flexible Images Friday, July 19, 13
    • Responsive Web Design Ethan Marcotte Friday, July 19, 13
    • Three ingredients Fluid grids Media queries Flexible images Friday, July 19, 13
    • New devices Friday, July 19, 13
    • Different Screen sizes Resolutions Browser capabilities Friday, July 19, 13
    • Devices Smartphones Tablets Laptops Desktops TV Xbox and Wii Friday, July 19, 13
    • Difficulty over time 0 25 50 75 100 2007 2009 2011 2013 Frustration Friday, July 19, 13
    • Responsive Design (Sanity) Friday, July 19, 13
    • Fluid Friday, July 19, 13
    • Stretched Friday, July 19, 13
    • Scrunched Friday, July 19, 13
    • The Giants win the pennant! The Giants win the pennant! The Giants win the pennant! The Giants win the pennant! The Giants win the pennant! The Giants win the pennant! Friday, July 19, 13
    • Responsive solution Multiple fluid layouts Friday, July 19, 13
    • Grids, baby! Friday, July 19, 13
    • Alignment Friday, July 19, 13
    • 960.gs Friday, July 19, 13
    • Multiple grids, baby! Friday, July 19, 13
    • New tools Zen Grids Gridset Sass with Compass Friday, July 19, 13
    • Media Queries & Breakpoints Friday, July 19, 13
    • Viewport & Resolution Friday, July 19, 13
    • Device breakpoints are broken Friday, July 19, 13
    • "The absence of support for media queries is in fact the first media query." –Bryan Rieger Friday, July 19, 13
    • @media  screen  and  (min-­‐width:  300px)  {   /*  STYLES  HERE  */ } Friday, July 19, 13
    • @media  screen  and  (min-­‐width:  300px)  {   /*  STYLES  HERE  */ } @media  screen  and  (min-­‐width:  472px)  {   /*  STYLES  HERE  */ } Friday, July 19, 13
    • @media  screen  and  (min-­‐width:  18.75em)  {   /*  STYLES  HERE  */ } @media  screen  and  (min-­‐width:  29.5em)  {   /*  STYLES  HERE  */ } Friday, July 19, 13
    • Accessibility & Kindles Friday, July 19, 13
    • Future Friendly Friday, July 19, 13
    • Something doesn't fit Friday, July 19, 13
    • Hierarchy Friday, July 19, 13
    • Fun reminder Fluid grids Media queries Flexible images Friday, July 19, 13
    • img { width: 100%; } Friday, July 19, 13
    • Oops. Friday, July 19, 13
    • Downscale Friday, July 19, 13
    • Upscale Friday, July 19, 13
    • img { max-width: 100%; } Friday, July 19, 13
    • img { max-width: 100%; height: auto; } Friday, July 19, 13
    • img { width: 100%; max-width: 100%; height: auto; } Friday, July 19, 13
    • Let's go halfsies Friday, July 19, 13
    • figure { width: 50%; } Friday, July 19, 13
    • Use the Grid, Luke! Friday, July 19, 13
    • What about... YouTube? Friday, July 19, 13
    • video, iframe, object { max-width: 100%; } Friday, July 19, 13
    • Stupid aspect ratio Friday, July 19, 13
    • .ratio-4-3 { height: 0; padding-bottom: 75%; } Friday, July 19, 13
    • .ratio-16-9 { height: 0; padding-bottom: 56.25%; } Friday, July 19, 13
    • Get your popcorn! Friday, July 19, 13
    • Congratulations on your success. I guess. Friday, July 19, 13
    • Just a second of your time Friday, July 19, 13
    • Retina (graphics) Friday, July 19, 13
    • 200x200 400x400 2 x 2 = 4 times as large Friday, July 19, 13
    • Tightly packed pixels Friday, July 19, 13
    • Curse you, blurry upscaling! Friday, July 19, 13
    • High res all the things! Friday, July 19, 13
    • HOLD UP Friday, July 19, 13
    • iHuge Friday, July 19, 13
    • 3888x2592 WAT?! Friday, July 19, 13
    • Livin' on the EDGE Friday, July 19, 13
    • 3888/640 = 6x 6w x 6h = 36x Ouch Friday, July 19, 13
    • 3888/320 = 12x 12w x 12h = 144x I hate you forever. Friday, July 19, 13
    • Wasteful. Slow. Ridiculous. Friday, July 19, 13
    • Fancy Friday, July 19, 13
    • 97% Friday, July 19, 13
    • I give up Friday, July 19, 13
    • Why? Friday, July 19, 13
    • Friday, July 19, 13
    • Friday, July 19, 13
    • Friday, July 19, 13
    • Friday, July 19, 13
    • Friday, July 19, 13
    • Friday, July 19, 13
    • Friday, July 19, 13
    • Friday, July 19, 13
    • Don't. Give. Up. Friday, July 19, 13
    • Step Two Responsible images Friday, July 19, 13
    • Just enough image. No more. Friday, July 19, 13
    • Quick Friday, July 19, 13
    • Efficient Friday, July 19, 13
    • Go forth Friday, July 19, 13
    • Friday, July 19, 13
    • Confession time Browsers are difficult Friday, July 19, 13
    • Browser to-do list Eat breakfast Drive to work Time to frustrate developers! Friday, July 19, 13
    • Download all the things Friday, July 19, 13
    • Parse-ly Friday, July 19, 13
    • Paint Friday, July 19, 13
    • I'll get to ya', bub Friday, July 19, 13
    • Lookahead Friday, July 19, 13
    • 99 problems Lookahead #1 Friday, July 19, 13
    • Friday, July 19, 13
    • 20% Friday, July 19, 13
    • Need for speed Friday, July 19, 13
    • 0 25 50 75 100 That guy The other guy Us Awesomeness Friday, July 19, 13
    • 0 75 150 225 300 That guy The other guy Us Bandwidth Friday, July 19, 13
    • 0 37.5 75 112.5 150 That guy The other guy Us Image quality Friday, July 19, 13
    • 0 3.75 7.5 11.25 15 That guy The other guy Us SPEEEEEED Friday, July 19, 13
    • Friday, July 19, 13
    • Let's talk radios Friday, July 19, 13
    • Window of opportunity Friday, July 19, 13
    • Battery drain Friday, July 19, 13
    • Hit me Friday, July 19, 13
    • Threads Friday, July 19, 13
    • Concatenate Friday, July 19, 13
    • Sprites Friday, July 19, 13
    • Three dragons Friday, July 19, 13
    • Browser challenges Lookahead preloader Radio load time Latency from server hits Friday, July 19, 13
    • Cerberus Friday, July 19, 13
    • Solutions with problems The things we tried Friday, July 19, 13
    • Fallen warriors Friday, July 19, 13
    • Let's try Javascript Friday, July 19, 13
    • Javascript Switch Friday, July 19, 13
    • Too late Friday, July 19, 13
    • Fast browsers Friday, July 19, 13
    • Multiplicity Friday, July 19, 13
    • Cookies Friday, July 19, 13
    • Fast as fast can be, you'll never catch me! Friday, July 19, 13
    • Rotate 90 degrees Friday, July 19, 13
    • CDN Caches Friday, July 19, 13
    • <noscript> Friday, July 19, 13
    • No prefetching :( Friday, July 19, 13
    • No Javascript? Friday, July 19, 13
    • On demand Friday, July 19, 13
    • Scrolling Scrolling Scrolling Friday, July 19, 13
    • Sad radio. Sad battery. :( Friday, July 19, 13
    • Element query nirvana Friday, July 19, 13
    • In theory great... Friday, July 19, 13
    • Preloader has a sad :( Friday, July 19, 13
    • speed vs size Friday, July 19, 13
    • Problems with solutions Tools that work Friday, July 19, 13
    • Arm thyself Friday, July 19, 13
    • Our top goals Beautiful Quick Efficient Friday, July 19, 13
    • One way to win Friday, July 19, 13
    • CSS3 Friday, July 19, 13
    • Which is better? Friday, July 19, 13
    • CSS PIE Friday, July 19, 13
    • Latency and delays Friday, July 19, 13
    • Type Friday, July 19, 13
    • Web fonts TypeKit Google fonts Font Squirrel Friday, July 19, 13
    • Overhead? Friday, July 19, 13
    • Unicode Friday, July 19, 13
    • Icon fonts Friday, July 19, 13
    • T W I T T E R Friday, July 19, 13
    • SVG Friday, July 19, 13
    • Scalable Vector Graphics Simple Vector Graphics Friday, July 19, 13
    • Grumpicon Friday, July 19, 13
    • Cheat codes Friday, July 19, 13
    • Raster-farian options I was tired when I came up with this headline Friday, July 19, 13
    • Optimize first! Friday, July 19, 13
    • Quality slider Friday, July 19, 13
    • Background images Friday, July 19, 13
    • div { background:url(fun.gif); background-size: 100% 100%; no-repeat; width: 50%; } Friday, July 19, 13
    • Contain your enthusiasm Friday, July 19, 13
    • These caveats are on background Friday, July 19, 13
    • Alt for screen readers Friday, July 19, 13
    • Back to video Friday, July 19, 13
    • <video>      <source  src="mySmallVideo.webm"              type="video/webm"             media="all  and  (max-­‐width:40em)">      <source  src="myVideo.webm"              type="video/webm"> </video> Friday, July 19, 13
    • Get started (And use fallbacks) Friday, July 19, 13
    • Waaaaaaait a minute Friday, July 19, 13
    • <picture alt=""> <source media="(min-width: 45em)" src="big.jpg"> <source media="(min-width: 18em)" src="small.jpg"> <source src="mobile.jpg"> <noscript><img src="mobile.jpg"></noscript> </picture> Friday, July 19, 13
    • <picture> Friday, July 19, 13
    • Friday, July 19, 13
    • <picture alt=""> <source media="(min-width: 45em)" src="big.jpg"> <source media="(min-width: 18em)" src="small.jpg"> <source src="mobile.jpg"> <noscript><img src="mobile.jpg"></noscript> </picture> Friday, July 19, 13
    • WHATWG Web Hypertext Application Technology Working Group Friday, July 19, 13
    • <img src=”fun.jpg” srcset=”fun-HD.jpg 2x, fun-phone.jpg 100w, fun-phone-HD.jpg 100w 2x”> Friday, July 19, 13
    • <picture alt=""> <source media=”(min-width: 45em)” srcset=”big.jpg, big-hd.jpg 2x”> <source media=”(min-width: 18em)” srcset=”small.jpg, small-hd.jpg 2x”> <source srcset=”mobile.jpg, mobile-hd.jpg 2x”> <img src=”mobile.jpg”> </picture> Friday, July 19, 13
    • Browser discretion for bandwidth Friday, July 19, 13
    • Art direction Friday, July 19, 13
    • W3C Status First public working draft Friday, July 19, 13
    •  <span  data-­‐picture  data-­‐alt="A  giant  stone  face  at  The  Bayon  temple  in  Angkor  Thom,   Cambodia">                <span  data-­‐src="small.jpg"></div>                <span  data-­‐src="medium.jpg"          data-­‐media="(min-­‐width:  400px)"></div>                <span  data-­‐src="large.jpg"            data-­‐media="(min-­‐width:  800px)"></div>                <span  data-­‐src="extralarge.jpg"  data-­‐media="(min-­‐width:  1000px)"></div>                <!-­‐-­‐  Fallback  content  for  non-­‐JS  browsers.  Same  img  src  as  the  initial,   unqualified  source  element.  -­‐-­‐>                <noscript>                        <img  src="external/imgs/small.jpg"  alt="A  giant  stone  face  at  The  Bayon   temple  in  Angkor  Thom,  Cambodia">                </noscript>        </span> Picturefill Friday, July 19, 13
    • Other options Friday, July 19, 13
    • Compressive images Friday, July 19, 13
    • Clown car Friday, July 19, 13
    • New image format? Friday, July 19, 13
    • Picking <picture> Friday, July 19, 13
    • Using picture Picking the right image size for each breakpoint Friday, July 19, 13
    • Single column? Friday, July 19, 13
    • Containers Friday, July 19, 13
    • Name your breakpoints Friday, July 19, 13
    • Container size by breakpoint Mobile vertical: 1 unit (100%) Mobile landscape: 2 units (100%) Tablet vertical: 5 units (60%) Tablet landscape: 9 units (66.67%) Friday, July 19, 13
    • Min & Max Friday, July 19, 13
    • Range for a breakpoint Mobile landscape: 25em Tablet vertical: 35em Friday, July 19, 13
    • Range in pixels (1em =16px) Mobile landscape: 400px Tablet vertical: 560px Friday, July 19, 13
    • Mobile landscape images (100% width) Minimum: 400px Maximum: 560px Friday, July 19, 13
    • Tablet vertical breakpoints Minimum: 35em (560px) Maximum: 50em (800px) Friday, July 19, 13
    • Tablet vertical images (60% width) Minimum: 336px (60% of 560px) Maximum: 480px (60% of 800px) Friday, July 19, 13
    • How big a range? Friday, July 19, 13
    • Downscaling from max-width Friday, July 19, 13
    • 560px/400px 40% x 40% 1.4 x 1.4 = 96% Friday, July 19, 13
    • Mobile landscape images (100% width) Minimum: 400px Maximum: 560px Friday, July 19, 13
    • Big list of image sizes 240 320 456 408 552 703 840 1128 1416 Friday, July 19, 13
    • Consolidate your list 700 725 750 Friday, July 19, 13
    • Big list of retina sizes 480 640 912 816 1104 1406 1680 2256 2832 Friday, July 19, 13
    • To infinity, and beyond! Friday, July 19, 13
    • Striking a balance Friday, July 19, 13
    • Rinse and repeat Friday, July 19, 13
    • Yes, it's worth it Friday, July 19, 13
    • Step three How Drupal can help Using breakpoint, picture, image styles and more Friday, July 19, 13
    • Built into Drupal 8 Friday, July 19, 13
    • Site editors will thank you Friday, July 19, 13
    • Drupal 7? Yup! Friday, July 19, 13
    • Modules you need for D7 Picture Breakpoint Ctools Friday, July 19, 13
    • Set breakpoints Friday, July 19, 13
    • Set breakpoints in .info breakpoints[mobilevert]  =  (min-­‐width:  0) breakpoints[mobileland]  =  (min-­‐width:  25em) breakpoints[mobilelandmid]  =  (min-­‐width:  30em) breakpoints[mobiletabvert]  =  (min-­‐width:  35em) Etc. Friday, July 19, 13
    • Wax on, wax off Friday, July 19, 13
    • Breakpoints module Friday, July 19, 13
    • Breakpoint groups Friday, July 19, 13
    • Friday, July 19, 13
    • Friday, July 19, 13
    • High-res sources? Friday, July 19, 13
    • Auto-generate image styles Friday, July 19, 13
    • Friday, July 19, 13
    • Configure image styles Friday, July 19, 13
    • Friday, July 19, 13
    • Match image styles to breakpoints Friday, July 19, 13
    • Friday, July 19, 13
    • Displaying picture elements with fields Friday, July 19, 13
    • Friday, July 19, 13
    • Voila! Friday, July 19, 13
    • Displaying picture elements with views Friday, July 19, 13
    • Friday, July 19, 13
    • Friday, July 19, 13
    • Friday, July 19, 13
    • Friday, July 19, 13
    • Flexibility Friday, July 19, 13
    • Adding images to your content area Friday, July 19, 13
    • IMCE helps Friday, July 19, 13
    • Configuration time! Friday, July 19, 13
    • Friday, July 19, 13
    • Text filters Friday, July 19, 13
    • Plugin WYSIWYG Friday, July 19, 13
    • Add an image Friday, July 19, 13
    • WYSIWYG CSS Friday, July 19, 13
    • Everybody clap your hands Friday, July 19, 13
    • Questions? Drupal: mdrummond Twitter: @MarcDrummond Blog: www.marcdrummond.com Find me: Friday, July 19, 13