Embed Size (px)
DESCRIPTION
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.
Citation preview
Responsive ImagesPicture and Drupal, best friends forever
Friday, July 19, 13
Marc Drummond
Drupal: mdrummondTwitter: @MarcDrummondBlog: 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 OneFlexible Images
Friday, July 19, 13
Responsive Web DesignEthan Marcotte
Friday, July 19, 13
Three ingredientsFluid gridsMedia queriesFlexible images
Friday, July 19, 13
New devicesFriday, July 19, 13
DifferentScreen sizesResolutionsBrowser capabilities
Friday, July 19, 13
DevicesSmartphonesTabletsLaptopsDesktopsTVXbox 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
FluidFriday, July 19, 13
StretchedFriday, July 19, 13
ScrunchedFriday, 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 solutionMultiple fluid layouts
Friday, July 19, 13
Grids, baby!Friday, July 19, 13
AlignmentFriday, July 19, 13
960.gsFriday, July 19, 13
Multiple grids, baby!Friday, July 19, 13
New toolsZen GridsGridsetSass 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 fitFriday, July 19, 13
HierarchyFriday, July 19, 13
Fun reminderFluid gridsMedia queriesFlexible images
Friday, July 19, 13
img { width: 100%;}
Friday, July 19, 13
Oops.
Friday, July 19, 13
DownscaleFriday, July 19, 13
UpscaleFriday, 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 secondof your time
Friday, July 19, 13
Retina (graphics)Friday, July 19, 13
200x200400x4002 x 2 = 4 times as large
Friday, July 19, 13
Tightly packed pixelsFriday, 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
3888x2592WAT?!
Friday, July 19, 13
Livin' on the EDGEFriday, July 19, 13
3888/640 = 6x6w x 6h = 36x
Ouch
Friday, July 19, 13
3888/320 = 12x12w 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 upFriday, 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 TwoResponsible images
Friday, July 19, 13
Just enough image.
No more.
Friday, July 19, 13
QuickFriday, July 19, 13
EfficientFriday, July 19, 13
Go forthFriday, July 19, 13
Friday, July 19, 13
Confession time
Browsers are
difficultFriday, July 19, 13
Browser to-do listEat breakfastDrive to workTime to frustrate developers!
Friday, July 19, 13
Download all the things
Friday, July 19, 13
Parse-lyFriday, July 19, 13
PaintFriday, July 19, 13
I'll get to ya', bubFriday, July 19, 13
LookaheadFriday, 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 radiosFriday, July 19, 13
Window of opportunity
Friday, July 19, 13
Battery drainFriday, July 19, 13
Hit meFriday, July 19, 13
ThreadsFriday, July 19, 13
Concatenate
Friday, July 19, 13
Sprites
Friday, July 19, 13
Three dragonsFriday, July 19, 13
Browser challengesLookahead preloaderRadio load timeLatency from server hits
Friday, July 19, 13
CerberusFriday, July 19, 13
Solutions with problemsThe things we tried
Friday, July 19, 13
Fallen warriorsFriday, July 19, 13
Let's try Javascript
Friday, July 19, 13
Javascript SwitchFriday, July 19, 13
Too late
Friday, July 19, 13
Fast browsersFriday, July 19, 13
MultiplicityFriday, July 19, 13
CookiesFriday, 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 CachesFriday, 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
ScrollingScrollingScrolling
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 thyselfFriday, July 19, 13
Our top goalsBeautiful QuickEfficient
Friday, July 19, 13
One way to winFriday, July 19, 13
CSS3Friday, July 19, 13
Which is better?Friday, July 19, 13
CSS PIEFriday, July 19, 13
Latency and delaysFriday, July 19, 13
TypeFriday, July 19, 13
Web fontsTypeKit Google fontsFont Squirrel
Friday, July 19, 13
Overhead?
Friday, July 19, 13
UnicodeFriday, July 19, 13
Icon fonts
Friday, July 19, 13
T W I T T E R
Friday, July 19, 13
SVGFriday, July 19, 13
Scalable Vector Graphics
Simple Vector Graphics
Friday, July 19, 13
GrumpiconFriday, July 19, 13
Cheat codes
Friday, July 19, 13
Raster-farian optionsI 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
enthusiasmFriday, July 19, 13
These caveats are on
backgroundFriday, 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
WHATWGWeb 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 directionFriday, July 19, 13
W3C StatusFirst 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 imagesFriday, July 19, 13
Clown carFriday, July 19, 13
New image format?
Friday, July 19, 13
Picking <picture>
Friday, July 19, 13
Using picturePicking the right image size for each breakpoint
Friday, July 19, 13
Single column?
Friday, July 19, 13
ContainersFriday, July 19, 13
Name your breakpoints
Friday, July 19, 13
Container size by breakpointMobile 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 breakpointMobile landscape: 25emTablet vertical: 35em
Friday, July 19, 13
Range in pixels (1em =16px)Mobile landscape: 400pxTablet vertical: 560px
Friday, July 19, 13
Mobile landscape images (100% width)
Minimum: 400pxMaximum: 560px
Friday, July 19, 13
Tablet vertical breakpointsMinimum: 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: 400pxMaximum: 560px
Friday, July 19, 13
Big list of image sizes24032045640855270384011281416
Friday, July 19, 13
Consolidate your list700725750
Friday, July 19, 13
Big list of retina sizes48064091281611041406168022562832
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 threeHow 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 D7PictureBreakpointCtools
Friday, July 19, 13
Set breakpoints
Friday, July 19, 13
Set breakpoints in .infobreakpoints[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
Configureimage styles
Friday, July 19, 13
Friday, July 19, 13
Matchimage 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
FlexibilityFriday, July 19, 13
Adding imagesto 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: mdrummondTwitter: @MarcDrummondBlog: www.marcdrummond.com
Find me:
Friday, July 19, 13
