When responsive web design meets the real world

When Responsive Web Design Meets the Real World

Follow me at @grigs http://bit.ly/grigs-akamai-rwd

http://bit.ly/akamai-rwd

http://bit.ly/akamai-rwd

The web has always been a balancing act.http://www.!ickr.com/photos/classblog/5136926303

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


With many competing interests.http://www.!ickr.com/photos/tudor/4324056624/



Finding balance is more difficult…

http://www.!ickr.com/photos/superfantastic/50088733/

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

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

As device diversity increases.

http://www.!ickr.com/photos/lyza/7382235106

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

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

Responsive web

design offers us

for a sensible way to deal

with device diversity.

http://www.!ickr.com/photos/superfantastic/50088733/

http://www.!ickr.com/photos/darrentunnicliff/4232232092/

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

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

And yet the one question I frequently ask myself is…http://www.!ickr.com/photos/classblog/5136926303



Can a

http://www.!ickr.com/photos/sldghmmr/6041481069 experience…

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

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

compete with a tailored experience?http://www.!ickr.com/photos/adrianclarkmbbs/3062676599/

http://www.flickr.com/photos/adrianclarkmbbs/3062676599/

http://www.flickr.com/photos/adrianclarkmbbs/3062676599/

Important question from

many perspectives:

Search engines

Context

Advertising

Performance

Search engines

Until recently, Google recommended separate sites.

http://www.!ickr.com/photos/brunauto/5062644167/

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


Mobile context?




80% during misc downtime

76% while waiting in lines

86% while watching TV

69% for point of sale research

http://www.!ickr.com/photos/carbonnyc/5140154965

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


http://www.!ickr.com/photos/carbonnyc/5140154965



TMI 39% use on toliet!

Advertising

New responsive ad unitsBut advertising is still big problem.

PERFORMANCE

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

People demand fast web sites Slow sites mean real dollars are lostLog 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

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

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/










Mobile users don’t care that

their network is slow.



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

http://www.lukew.com/ff/entry.asp?1071


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

Mobile browsers offer many ways to

navigate desktop web sites.



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



http://www.flickr.com/photos/stephenjohnbryde/384095768/There are no gestures that make a web site load faster.



http://www.!ickr.com/photos/nathaninsandiego/4829858186

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

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

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



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



BBG Before the Boston Globe




CSS Media Query for Mobile is Fool’s Gold“”

CSS Media Query for Mobile is Fool’s Gold“”—Me (oops)

Demo from ALA article

34.7K 8.1K 26.6K 76.6%

39.0K 8.4K 30.6K 78.4%

30.5K 6.7K 23.8K 78%

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%


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 DesignThe resounding answer from the community:

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




Graceful degradation Progressive Enhancement





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



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

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



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



Akin to hosting a dinner party on short notice…

http://www.!ickr.com/photos/beautyrede$ned/2643858323/



So you shove all your

junk in the closet.http://www.!ickr.com/photos/puuikibeach/3654517679

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

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

Most responsive designs are…

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

Time to pen another fool’s gold post?



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



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



5 key techniques for responsible responsive design

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

Build Mobile First Responsive Designs

#1



Different than Mobile First Design Theory

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





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

/* 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.Keep basic styles outside of media queries.

The absence of support for media queries is in fact the $rst media query.

—Bryan Rieger“

”

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?

Keep CSS images in their place#2

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;}

}

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/



Images scoped within media queries

<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; }}http://timkadlec.com/2012/04/media-query-asset-downloading-results/



display:none on parent element


<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; }}



Image override with a media query


<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'); }}



#3 Conditionally load JS based on screen size and capabilities

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



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 JavaScript, 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>

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

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

AJAX Include Pattern



Behaviorial BreakpointsBetter yet, keep your breakpoints in your CSS and have your JavaScript watch to changes to the DOM triggered by media queries.

Deliver different size <IMG>s at different screen sizes

#4

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



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

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

One SRC to rule all images

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



Art Direction




Art Direction Not simply cropping

Art Direction Images with text

Sign 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

New proposed standards

<picture> srcset src-n

Standards process is still moving forward

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



Get Involved at Responsiveimages.org

In the meantime, pick a hack. My fave is PictureFill.

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

<!-‐-‐ 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>https://github.com/scottjehl/picturefill

https://github.com/scottjehl/picturefill

https://github.com/scottjehl/picturefill

Handle high-density (retina) images very carefully

#5




0

500000

1000000

1500000

2000000

Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina

1861632

465408519360

13008057920

Single image on multiple screens

320x18480x27

960x54 909x51

1818x10

0

500000

1000000

1500000

2000000

Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina

1861632

465408519360

13008057920

Single image on multiple screens

3,214% bigger

320x18480x27

960x54 909x51

1818x10

Apple.com is an anti-pattern.Downloads both standard and retina.

The total size of the page goes from 502.90K to 2.13MB when the retina versions of images are downloaded.

If possible, use CSS for now.

@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);

}

}

Foresight.js

PictureFill User Preference Branch Tap HD/SD to switch image densityhttps://github.com/scottjehl/picturefill/tree/user-prefs

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

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

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

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

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

If I could dream up my ideal solution…

8 guidelines and 1 immutable rule

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

IcoMoon.io makes font icons easy

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

Grumpicon.com helps with SVGBased on open source grunticon

/' // . // |\//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

Encourage people to upload the highest quality source possible#2

Provide an automatic image resizing and compression service#3

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

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

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.

—@adambradley“”

Provide automated output of PictureFill or alternative#5

{"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

PictureFill Markup

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

Markup for all images can be changed in one spot.

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

Integrate image compression best practices#7

jpegtran or jpegoptim

OptiPNG or PNGOUT

far future expires headers

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

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

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.

The only rule for your responsive images implementation:Plan for the fact that it will be deprecated. Make it easy to change.

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

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

Can a one-size !ts all solution…



compete with a tailored experience?

http://www.flickr.com/photos/fronx/2862975043

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

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

Or will it always be TOO BIG?

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.

For most projects, responsive design will be fast enough…

Flickr: Uploaded February 11, 2007 by hawridger

if we roll up our sleeves and build mobile !rst responsive designs.

Thank You!

Special thanks to Scott Jehl, Guy Podjarny, and all of the Flickr users sharing under creative commons.

When responsive web design meets the real world

Technology

Transcript of When responsive web design meets the real world