Responsive Images and Drupal: Twin Cities Drupal Camp 2013

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

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

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!

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: 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

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

3888x2592WAT?!

Friday, July 19, 13

Livin' on the EDGEFriday, July 19, 13

3888/640 = 6x6w x 6h = 36x

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

I give upFriday, July 19, 13

Why?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

Need for speed

Friday, July 19, 13

That guy The other guy Us

Awesomeness

Friday, July 19, 13

Bandwidth

Friday, July 19, 13

Image quality

Friday, July 19, 13

SPEEEEEED

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

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

Friday, July 19, 13

Get started(And use fallbacks)

Friday, July 19, 13

Waaaaaaait a minute

Friday, July 19, 13

Friday, July 19, 13

Friday, July 19, 13

Friday, July 19, 13

WHATWGWeb Hypertext Application Technology

Working Group

Friday, July 19, 13

Friday, July 19, 13

</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

<!-‐-‐ 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)

Friday, July 19, 13

Wax on, wax off

Friday, July 19, 13

Breakpoints module

Friday, July 19, 13

Breakpoint groups

Friday, July 19, 13

High-res sources?

Friday, July 19, 13

Auto-generate image styles

Friday, July 19, 13

Configureimage styles

Friday, July 19, 13

Matchimage styles

to breakpoints

Friday, July 19, 13

Displaying picture elements

with fields

Friday, July 19, 13

Voila!Friday, July 19, 13

Displaying picture elements

with views

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

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

Responsive Images and Drupal: Twin Cities Drupal Camp 2013

Design

SIZING UP RESPONSIVE IMAGES - DrupalCon · 2016. 1. 28. · use responsive images in older browsers. drupal 7 picture and breakpoints modules. drupal 8 responsive image and breakpoint

Responsive)HTML)email) and)Drupal - DrupalCon …HTML)email) and)Drupal Mobile + Email + Drupal Drew Gorton Founder gortonstudios.com Drew Gorton Responsive)HTML)email) ~19%)of)email)messages)are)read)on)smartphones)or)tablets.)

Say no to special snowflakes and scale - 2016 Twin Cities Drupal Camp

Building Faster Drupal Sites - Florida Drupalcamp...badass is supported in most major browsers, and Drupal 8 has responsive images in core. Utilizing the

Responsive Images in Drupal 8...responsive web design in 2010, developers and designers have been scrambling to find ways to deal with the issue of responsive images ... Be accessible

Introduction to Stanford's Responsive Drupal Themes: Open ... · Drupal-specific styles support Open Framework takes the basics of Twitter Bootstrap and adds in Drupal-friendly, semantic

Responsive Web Design en Drupal

Responsive Design in Drupal

Responsive design on drupal

Responsive Web Design für Mobilgeräte mit Drupal

Drupal - für Ein- und Umsteiger · Live Blogs from Joomla, Drupal, Wordpress Events Adaptive, Responsive, Mobile First and Drupal Theming for the Future August 24, 2011 This is a

Responsive testing in Drupal - Drupal Developer Days

Responsive Design mit Drupal

Build a responsive website with drupal

A DRUPALER’S GUIDE TO MARKETING - Twin Cities Drupal · DREW GORTON • Director of Developer Relations at Pantheon • Web Developer late ‘90s. Marketing now. • Drupal: Came

A "content-first" approach to designing responsive Drupal layouts

Responsive images in Drupal 8

ELECTRIFICATION CLEAN EFFICIENCY RESPONSIVE POWER · ELECTRIFICATION CLEAN EFFICIENCY RESPONSIVE POWER. Contents ... Permanent Magnet ... • The T8 Twin Engine’s intelligent blended

Sizing up responsive images: Make a plan before you Drupal

Responsive HTML Email with Drupal