Responsive Images and Video

Responsive Imagesand Video

Jason Grigsby • @grigs • cloudfour.com

Follow along at @grigs_talks

http://bit.ly/grigs-2013-10-13



The web has always been a balancing act…

http://www.flickr.com/photos/classblog/5136926303



with many competing priorities.

http://www.flickr.com/photos/tudor/4324056624/



Finding that balance is more difficult…

http://www.flickr.com/photos/superfantastic/50088733/



http://www.flickr.com/photos/lyza/7382235106

as device diversity increases.



http://www.flickr.com/photos/darrentunnicliff/4232232092/

Responsive web design offers us

for a sensible way to deal with device diversity.



And yet the one question I frequently ask myself is…

Can a one size #ts all solution…

http://www.flickr.com/photos/sldghmmr/6041481069



compete with a tailored experience?http://www.flickr.com/photos/helloturkeytoe/4932748746/

http://www.flickr.com/photos/helloturkeytoe/4932748746/


Context

Advertising

Performance

Important question from many perspectives:

Search engine optimization

Search engine optimization

http://www.flickr.com/photos/brunauto/5062644167/

What about mobile context?



80% during misc downtime

76% while waiting in lines

86% while watching TV

69% for point of sale research

http://www.flickr.com/photos/carbonnyc/5140154965



39% use phone on toilet

http://www.flickr.com/photos/sh1mmer/2510487525

Advertising?





PERFORMANCE

http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf

People demand fast web sites.



Log In Subscribe Basket Contact Us i am looking for...

67% of consumers cite slowwebsites as the main cause ofbasket abandonment

Daily Pulse NewsletterGet our free Daily Pulse Newsletter tokeep informed about the latest news andinsights in Digital Marketing.

Register for our free Daily Pulse

ADVERTISE HERE »

by David Moth 06 December 2012 11:40 8 comments Print

TweetTweet 236 3

Everyone hates slow loading websites, and a new surveyhighlights just how damaging a slow site can be to the userexperience.

The study by Brand Perfect found that two thirds of UKconsumers (67%) cite slow loading times as the main reasonthey would abandon an online purchase.

It’s a topic we’ve looked at in more detail in our post 'Sitespeed: case studies, tips and tools for improving your conversion rate', with stats showing thatslow loading websites are losing businesses up to £1.73bn a year.

Privacy and cookie policy

Home / Blog

Subscribe Reports Training Events Jobs Blog More Browse by topic

Like 14 ShareShare 20

Slow sites mean real dollars are lost.

Top ecommerce sites are 22% slower than last year

http://www.webperformancetoday.com/2013/03/27/top-ecommerce-sites-are-slower-than-they-were-last-year/





http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf

Mobile users don’t care that their network is slow.



Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071

Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071

Many ways to navigate desktop web sites on mobile.

http://www.flickr.com/photos/stephenjohnbryde/384095768/

There are no gestures that can make a web site faster.



http://www.flickr.com/photos/nathaninsandiego/4829858186/



http://www.flickr.com/photos/wesbrowning/5316400258/



http://www.flickr.com/photos/69797234@N06/7203485148/

BBG: Before Boston Globe



34.7K 8.1K 26.6K 76.6%

39.0K 8.4K 30.6K 78.4%

30.5K 6.7K 23.8K 78.0%

Original Resized K Saved % Saved

43.4K 8.2K 35.2K 81.1%

26.0K 6.6K 19.4K 74.6%

34.7K 7.8K 26.9K 77.5%


34.7K 8.1K 26.6K 76.6%

39.0K 8.4K 30.6K 78.4%

30.5K 6.7K 23.8K 78.0%


43.4K 8.2K 35.2K 81.1%

26.0K 6.6K 19.4K 74.6%

34.7K 7.8K 26.9K 77.5%



Total 208.3K 45.8K 162.5K 78.0%

The resounding answer from the community:

Mobile First Responsive Web Design

http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

Mobile First Responsive Web Design



“Awesome. We’ll devote a chapter to

Mobile First Responsive Web

Design in our book.”

“Awesome. We’ll devote a chapter to

Mobile First Responsive Web

Design in our book.”

Famous last words.

9%4%

21%

38%

4%

25%Mobile is LargerSame SizeLess than 10% Savings11 to 50% Savings51% to 100% SavingsGreater than 100% Savings

Where are the Mobile First RWDs?106 sites from mediaqueri.es tested

http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/



http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

Guy Podjarny repeated the experiment 2013: 476 sites from mediaqueri.es tested



http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/



http://www.flickr.com/photos/beautyredefined/2643858323/



http://www.flickr.com/photos/puuikibeach/3654517679



Most responsive web designs are…

http://www.flickr.com/photos/myklroventine/3400040943/

Time to pen another fool’s gold post?



Being Responsive from a layout perspective should

not preclude us from being responsive from a

performance and interaction perspective.

—Scott Jehl

“

”https://twitter.com/scottjehl/status/243025352069349377

https://twitter.com/scottjehl/status/243025352069349377

https://twitter.com/scottjehl/status/243025352069349377

5 key techniques for responsible responsive design

http://www.flickr.com/photos/auyongcheemeng/95769332/

#1 Build Mobile First Responsive Designs



http://www.flickr.com/photos/localcelebrity/4831362933/

Different than Mobile First Design Theory




Mobile First Responsive Web Design is a technical approach for responsive designs.



/* Wider viewports/higher resolutions (e.g. desktop) */@media screen and (min-width:481px) { [Desktop layout rules here]}/* Mobile/lower-resolution devices */@media screen and (max-width:480px) { [Mobile layout rules here]}

Move the mobile media query block above the desktop media query. By doing this, we’re making sure the cascading effect of CSS is consistent with our mobile first progressive enhancement approach.

Reorder media queries so cascade goes from small to large screens

Keep basic styles outside of media queries.

The absence of support for media queries is in fact

the #rst media query.

—Bryan Rieger, Yiibu

“

”

IE8 and below don’t support media queries.

Desktop First Responsive Web Design = Desktop Fallback

Mobile First Responsive Web Design = Mobile Fallback

What do you see if your browser doesn’t support media queries?

http://www.flickr.com/photos/lintmachine/2306383943/

#2

Keep CSS images in their place

http://www.flickr.com/photos/stevegarfield/4247757731/

http://www.flickr.com/photos/stevegarfield/4247757731/

The taps.jpg file is 440.7K making it the largest file on the page.

@media screen and (max-width:480px) {

[Other CSS rules are here]

.header {display:none;}

}

Images with display:none are still downloaded

http://timkadlec.com/2012/04/media-query-asset-downloading-results/



<div id="test5"></div>@media all and (min-‐width: 601px) { #test5 { background-‐image:url('images/test5-‐desktop.png'); width:200px; height:75px; }}@media all and (max-‐width: 600px) { #test5 { background-‐image:url('images/test5-‐mobile.png'); width:200px; height:75px; }}

Images scoped within media queries





<div id="test3"> <div></div></div>#test3 div { background-‐image:url('images/test3.png'); width:200px; height:75px;}@media all and (max-‐width: 600px) { #test3 { display:none; }}

display:none on parent element




<div id="test4"></div>#test4 { background-‐image:url('images/test4-‐desktop.png'); width:200px; height:75px;}@media all and (max-‐width: 600px) { #test4 { background-‐image:url('images/test4-‐mobile.png'); }}

Image override with a media query



http://www.flickr.com/photos/lyza/7382255242/

#3 Conditionally load JS based on screen size and capabilities



@media screen and (max-width:480px) { . . . #map {display:none;}}

There are many more rules in the css file.

The iframe has an id of map. This rule hides the Google Maps iframe by setting the display to none.

Hiding content with display:none does not prevent it from downloading.

<iframe id="map" width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe>

Extremely long URL abbreviatedThis single iframe causes 47 files to be downloaded!

https://github.com/paulirish/matchMedia.js

In JS, use matchMedia() or a poly!ll for it to test a media query



<a href="articles/latest/"

data-‐append="articles/latest/fragment"

data-‐media="(min-‐width: 30em)">

Latest Articles

</a>

AJAX Include Pattern

https://github.com/filamentgroup/Ajax-Include-Pattern/

Use AJAX to bring more content into the page as the viewport width gets bigger



Behavioral Breakpoints

http://www.flickr.com/photos/kk/230544325/

#4 Deliver different size <IMG>s at different screen sizes



One SRC to rule all images

<img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">

There are 16 beer labels on the On

Tap Now page that use an img tag

like this one for the Bensons Bubbler.Despite the need for multiple versions of this image depending on the screen size, HTML only allows one value for the src.

Two most common use cases

https://www.flickr.com/photos/whitehouse/8491445521




Resolution SwitchingIncludes high-density (retina) images.



http://www.flickr.com/photos/barackobamadotcom/5795228030/



Art direction




Not simply cropping

Art direction: Images with textSign In Account Get Email Español Shopping Bag

FeaturesNew ArrivalsShow Off TeesBackpacksTech Toys2/$30 & 2/$40 PINK FavoritesSpin the Panty Wheel

TopsAll TopsHoodies & CrewsTees & Tanks

BottomsAll BottomsSweatsShortsYoga

PINK Loves Yoga

Panties5/$26 Styles3/$33 StylesShop by Style

BrasAll BrasBandeaus & Bralettes2/$42 Wear Everywhere BrasBras 101

Swim

Search

No good solutions

Things are still moving forward on a standards-based approach for responsive images.

http://www.flickr.com/photos/johnlamb/2576062549/



New proposed standards

<picture> srcset src-n

Too early to use any of them

<div data-‐picture data-‐alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

<div data-‐src="small.jpg"></div>

<div data-‐src="medium.jpg" data-‐media="(min-‐width: 400px)"></div>

<div data-‐src="large.jpg" data-‐media="(min-‐width: 800px)"></div>

<div data-‐src="extralarge.jpg" data-‐media="(min-‐width: 1000px)"></div>

<!-‐-‐ Fallback content for non-‐JS browsers. -‐-‐>

<noscript>

<img src="small.jpg" alt="A giant stone face at The Bayon

temple in Angkor Thom, Cambodia">

</noscript>

</div>

Picture#ll JavaScript Library

https://github.com/scottjehl/picturefill



#5 Handle high-density images carefully

A single image on multiple screens

Image Resolution

0

500000

1000000

1500000

2000000

Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina

1861632

465408519360

13008057920

320x181480x271

960x541 909x512

1818x1024

Image Resolution

3,214% bigger

0

500000

1000000

1500000

2000000

Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina

1861632

465408519360

13008057920

320x181480x271

960x541 909x512

1818x1024

Apple.com as an anti-patternDo

wnlo

ads

both

sta

ndar

d an

d re

tina

imag

es

The total size of the page

goes from 502.90K to

2.13MB when the retina

versions of images are

downloaded.

http://blog.cloudfour.com/how-apple-com-will-serve-retina-images-to-new-ipads/



@media screen and (-‐webkit-‐device-‐pixel-‐ratio: 1) {

/* Image for normal displays. */

#main {

background-‐image: url(dog.jpg);

}

}

@media screen and (-‐webkit-‐min-‐device-‐pixel-‐ratio: 2) {

/* Image for high resolution displays. */

#main {

background-‐image: (dog-‐hi-‐res.jpg);

}

}

If possible, use CSS for now

Picture#ll User Preference Branch

https://github.com/scottjehl/picturefill/tree/user-prefs



Compressive images?

http://blog.netvlies.nl/design-interactie/retina-revolution/



Responsive Video

http://www.longtailvideo.com/html5/

How do you provide the right video codec?



<video width="640" height="360" controls> <!-‐-‐ MP4 must be first for iPad! -‐-‐> <source src="__VIDEO__.MP4" type="video/mp4" /><!-‐-‐ Safari / iOS video -‐-‐> <source src="__VIDEO__.OGV" type="video/ogg" /><!-‐-‐ Firefox / Opera / Chrome10 -‐-‐> <!-‐-‐ fallback to Flash: -‐-‐> <object width="640" height="360" type="application/x-‐shockwave-‐flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object></video><p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a></p>

http://camendesign.com/code/video_for_everybody

Multiple sources with Flash Fallback



How do you maintain the aspect ratio of video?• This is mostly a problem if you’re embedding video from a third

party site. If you are using your own video, it is not usually an issue.

• For third party video, FitVid.js is a good place to start.

• For your own video, the only trick is making sure you’re not changing the proportions of the video element as the page resizes.

How do you send the right resolution and quality?

You will need a video streaming service.

http://www.flickr.com/photos/fuzzylittlemanpeach/4633972431/

If I could dream up my ideal solution for images…



Eights guidelines and one immutable rule

#1 Use vector-based images or font icons whenever you can

IcoMoon App Premium Icons Font CDN

A Few Testimonials

Browse 3800+ Free Vector Icons

Import Your Own Vectors toMake Fonts

Generate Custom & Crisp IconFonts

Generate CSS Sprites with anysize or color

Basic Glyph Editing

1200+ Vector Icons & Counting

Handcrafted on a 16×16 grid

Several Different Formats

Optimized for Icon Fonts

Free Updates

Serve Custom-Built Fonts

Powered by Amazon WebServices

Easily Update Your Icon Fonts

Production (Cached) Links

Starting at $1.60/Month

IcoMoonIcoMoonCustom Built and Crisp Icon Fonts, Done Right

Home App Icon Packs Font CDN Demo Documentation Blog About

/' // . // |\//7 /' " \ . | ( \ _ _ - -_ | '._ ' _ __ _- \_ _/ \'-' // \\_/ \\ | | || | // | \ /|VV ||--\__________/-||-/| || || || || { } { } { }{ }

. .

Drag & Drop ur SVGs on the Grumpicon plz.

What Is This Issues?

With special guest, Eric Pontouniconkey head drawn by R.B.Cleary in 1995

Grumpicon.com based on Grunticon

#2 Encourage people to upload the highest quality source possible

#3 Provide an automatic image resizing and compression service

Example from Sencha IO SRC. De!ne height, width or both.

<img src="http://src.sencha.io/320/http://sencha.com/files/u.jpg" alt="My constrained image"/>

#4 Images can be resized to any size with URL parameters

http://src.sencha.io/320/http://sencha.com/files/u.jpg

http://src.sencha.io/320/http://sencha.com/files/u.jpg

“Save for the Web” should be a thing of the past.

—@adamdbradley

“

”

<div data-‐picture data-‐alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

<div data-‐src="small.jpg"></div>

<div data-‐src="medium.jpg" data-‐media="(min-‐width: 400px)"></div>

<div data-‐src="large.jpg" data-‐media="(min-‐width: 800px)"></div>

<div data-‐src="extralarge.jpg" data-‐media="(min-‐width: 1000px)"></div>

<!-‐-‐ Fallback content for non-‐JS browsers. -‐-‐>

<noscript>

<img src="small.jpg" alt="A giant stone face at The Bayon

temple in Angkor Thom, Cambodia">

</noscript>

</div>

#5 Provide automated output of PictureFill or alternative

{"source":"/source.jpg","breakpoints": [{ "max-‐width":"30em","pixel-‐density":1,"width":360px}, { "max-‐width":"30em","pixel-‐density":2,"width":720px},{ "max-‐width":"30em","pixel-‐density":1,"width":800px},{ "max-‐width":"30em","pixel-‐density":2,"width":1600px},{ "pixel-‐density":1,"width":800px},{ "pixel-‐density":2,"width":1600px},]}

templates contain breakpoint information

Responsive Images Markup Function

Responsive Images Markup Function

PictureFill Markup

Sample syntax. Don’t get hung up on details.

Markup for all images can be changed in one spot.

#6 Provide a way to override resized images for art direction needs

jpegtran or jpegoptim

OptiPNG or PNGOUT

far future expires headers

learn from mod_pagespeed or use it

#7 Integrate image compression best practices

http://jpegclub.org/

http://jpegclub.org/

http://freshmeat.net/projects/jpegoptim/

http://freshmeat.net/projects/jpegoptim/

http://optipng.sourceforge.net/

http://optipng.sourceforge.net/

http://www.advsys.net/ken/util/pngout.htm

http://www.advsys.net/ken/util/pngout.htm

The average WebP !le size is 25% - 34% smaller compared to JPEG !le size.

WebP compresses 34% better than libpng, and 26% better than pngout for loseless images.

#8 Bonus: Detect support for WebP image format and use it

Plan for the fact that it will be deprecated. Make it easy to change.

#! The only rule for your responsive images implementation.

It’s three years later. Let’s revisit the my original question.

Can a one size #ts all solution…

http://www.flickr.com/photos/theyoungthousands/4025421438



compete with a tailored experience?http://www.flickr.com/photos/fronx/2862975043



http://www."ickr.com/photos/haddadi/5971508861

Or will it always be TOO BIG?

http://www.flickr.com/photos/haddadi/5971508861

http://www.flickr.com/photos/haddadi/5971508861

Unlikely responsive design will ever be as fast as something crafted speci#cally for a device.

http://www.flickr.com/photos/quarenta/3256329577



But web design is a balancing act.

http://www.flickr.com/photos/kalexanderson/6266452817



And performance is just one factor.

Flickr: Uploaded February 11, 2007 by hawridger

For most projects, responsive design can be fast enough to make sense…

if we do the extra work to make mobile #rst responsive designs.

Thank You!Special thanks to Scott Jehl, Guy Podjarny, and all of the

Flickr users sharing under creative commons.

Slides: http://bit.ly/grigs-2013-10-13



Responsive Images and Video

Technology

Transcript of Responsive Images and Video