Mobile First Responsive Web Design — BD Conf Oct 2013

Mobile First Responsive Design Jason Grigsby • @grigs • cloudfour.com

Follow along at @grigs_talks http://bit.ly/grigs-2013-10-21

The web has always been a balancing act… p://www.ﬂickr.com/photos/classblog/5136926303

with many competing priorities. http://www.ﬂickr.com/photos/tudor/4324056624/

Finding that balance is more diﬃcult… http://www.ﬂickr.com/photos/superfantastic/50088733/

as device diversity increases. http://www.ﬂickr.com/photos/lyza/7382235106

Responsive web design oﬀers us for a sensible way to deal with device diversity. http://www.ﬂickr.com/photos/darrentunnicliff/4232232092/

And yet the one question I frequently ask myself is…

Can a one size fits all solution… http://www.ﬂickr.com/photos/sldghmmr/6041481069

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

Important question from many perspectives: Search engine optimization Context Advertising Performance

PERFORMANCE

People demand fast web sites. http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf

Slow sites mean real dollars are lost. Privacy and cookie policy Log In Subscribe Subscribe Basket Reports Contact Us Training Events i am looking for... Jobs Blog More Browse by topic Home / Blog 67% of consumers cite slow websites as the main cause of basket abandonment by David Moth Tweet 236 06 December 2012 11:40 3 8 comments Like 14 Daily Pulse Newsletter Get our free Daily Pulse Newsletter to keep informed about the latest news and insights in Digital Marketing. Register for our free Daily Pulse Print Share 20 Everyone hates slow loading websites, and a new survey highlights just how damaging a slow site can be to the user experience. The study by Brand Perfect found that two thirds of UK consumers (67%) cite slow loading times as the main reason they would abandon an online purchase. It’s a topic we’ve looked at in more detail in our post 'Site speed: case studies, tips and tools for improving your conversion rate', with stats showing that slow loading websites are losing businesses up to £1.73bn a year. ADVERTISE HERE »

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. http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf

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

Many ways to navigate desktop web sites on mobile. Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071

There are no gestures that can make a web site faster. http://www.ﬂickr.com/photos/stephenjohnbryde/384095768/

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

http://www.ﬂickr.com/photos/wesbrowning/5316400258/

BBG: Before Boston Globe http://www.ﬂickr.com/photos/69797234@N06/7203485148/

Original Resized K Saved % Saved Original Resized K Saved % Saved 34.7K 8.1K 26.6K 76.6% 43.4K 8.2K 35.2K 81.1% 39.0K 8.4K 30.6K 78.4% 26.0K 6.6K 19.4K 74.6% 30.5K 6.7K 23.8K 78.0% 34.7K 7.8K 26.9K 77.5%

Original Resized K Saved % Saved Original Resized K Saved % Saved 34.7K 43.4K 8.1K 26.6K 76.6% 8.2K 35.2K 81.1% Original Resized K Saved % Saved 39.0K 8.4K 30.6K 78.4% 26.0K 6.6K 19.4K 74.6% Total 208.3K 45.8K 162.5K 78.0% 30.5K 6.7K 23.8K 78.0% 34.7K 7.8K 26.9K 77.5%

The resounding answer from the community: Mobile First Responsive Web Design

Mobile First Responsive Web Design http://bradfrostweb.com/blog/web/mobile-ﬁrst-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.

Where are the Mobile First RWDs? 106 sites from mediaqueri.es tested 4% 9% 25% 21% 4% 38% Mobile is Larger Same Size Less than 10% Savings 11 to 50% Savings 51% to 100% Savings Greater than 100% Savings http://blog.cloudfour.com/where-are-the-mobile-ﬁrst-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/

http://www.ﬂickr.com/photos/beautyredeﬁned/2643858323/

http://www.ﬂickr.com/photos/puuikibeach/3654517679

Most responsive web designs are…

Time to pen another fool’s gold post? http://www.ﬂickr.com/photos/myklroventine/3400040943/

“ 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

#1 Build Mobile First Responsive Designs http://www.ﬂickr.com/photos/auyongcheemeng/95769332/

Diﬀerent than Mobile First Design Theory http://www.ﬂickr.com/photos/localcelebrity/4831362933/

Mobile First Responsive Web Design is a technical approach for responsive designs. http://bradfrostweb.com/blog/web/mobile-ﬁrst-responsive-web-design/

http://www.ﬂickr.com/photos/gumption/3639682201/

http://www.businessinsider.com/survey-mobile-ﬁrst-bad-strategy-2012-12

Luke’s Take on Mobile First Growth = Opportunity Constraints = Focus Capabilities = Innovation http://www.lukew.com/ff/entry.asp?933

How do I make this responsive?

http://www.ﬂickr.com/photos/ancphotos_/6728574731

Ok, let’s start from a clean slate http://www.ﬂickr.com/photos/salendron/5569020488/

What would the mobile version look like?

How does that map to desktop design?

Can this desktop version be better using what we’ve learned from the mobile version?

Mobile First This is why Mobile First thinking is so powerful even on projects that are currently implemented on the desktop.

Mobile First Responsive Web Design is a technical approach for responsive designs. http://bradfrostweb.com/blog/web/mobile-ﬁrst-responsive-web-design/

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] } */ e the mobile media query block Mov ry. above the desktop media quesure By doing this, we’re making S is the cascading effect of CSfirst consistent with our mobile oach. progressive enhancement appr Keep basic styles outside of media queries.

“ The absence of support for media queries is in fact the first media query. —Bryan Rieger, Yiibu

IE8 and below don’t support media queries.

What do you see if your browser doesn’t support media queries? Desktop First Responsive Web Design = Desktop Fallback Mobile First Responsive Web Design = Mobile Fallback

IE conditional comments <link rel="stylesheet" type="text/css" href="taps.css" /> <link rel="stylesheet" type="text/css" href="layout.css" media="all and (min-width: 481px)">  The conditional comment repeats the line above it ensuring desktop IE sees our layout.css file.

IE conditional comments <link rel="stylesheet" type="text/css" href="taps.css" /> <link rel="stylesheet" type="text/css" href="layout.css" media="all and (min-width: 481px)">  The conditional comment repeats the line above it ensuring desktop IE sees our layout.css file. or use Respond.js (a media query polyfill for IE)

#2 Keep CSS images in their place http://www.ﬂickr.com/photos/lintmachine/2306383943/

Images with display:none are still downloaded @media screen and (max-width:480px) { [Other CSS rules are here] .header {display:none;} } ing it aps.jpg file is 440.7K mak The t the largest file on the page.

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

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

#3 Conditionally load JS based on screen size and capabilities http://www.ﬂickr.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> This single iframe causes 47 files to be downloaded! Extremely long URL abbreviated @media screen and (max-width:480px) { . . . re many more rules There a in the css file. #map {display:none;} } The iframe has an id of map. This rule hides the Google Maps iframe by setting the display to none.

In JS, use matchMedia() or a polyfill for it to test a media query https://github.com/paulirish/matchMedia.js

AJAX Include Pattern Use AJAX to bring more content into the page as the viewport width gets bigger <a href="articles/latest/" data-‐append="articles/latest/fragment" data-‐media="(min-‐width: 30em)"> Latest Articles </a> https://github.com/ﬁlamentgroup/Ajax-Include-Pattern/

Behavioral Breakpoints

#4 Deliver different size <IMG>s at different screen sizes http://www.flickr.com/photos/kk/230544325/

One SRC to rule all images n r labels on the Og There are 16 bee at use an img ta h Tap Now page tr the Bensons Bubbler. like this one fo 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">

Two most common use cases

https://www.ﬂickr.com/photos/whitehouse/8491445521

Resolution Switching Includes high-density (retina) images. https://www.ﬂickr.com/photos/whitehouse/8491445521

http://www.ﬂickr.com/photos/barackobamadotcom/5795228030/

Art direction http://www.ﬂickr.com/photos/barackobamadotcom/5795228030/

Not simply cropping

Art direction: Images with text Search Features New Arrivals Show Off Tees Backpacks Tech Toys 2/$30 & 2/$40 PINK Favorites Spin the Panty Wheel Tops All Tops Hoodies & Crews Tees & Tanks Bottoms All Bottoms Sweats Shorts Yoga PINK Loves Yoga Panties 5/$26 Styles 3/$33 Styles Shop by Style Bras All Bras Bandeaus & Bralettes 2/$42 Wear Everywhere Bras Bras 101 Swim Sign In Account Get Email Español Shopping Bag

No good solutions

Things are still moving forward on a standardsbased approach for responsive images. http://www.ﬂickr.com/photos/johnlamb/2576062549/

New proposed standards <picture> srcset Too early to use any of them src-n

Picturefill JavaScript Library <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> https://github.com/scottjehl/pictureﬁll

#5 Handle high-density images carefully

A single image on multiple screens

Image Resolution 2000000 1818x1024 1861632 1500000 1000000 960x541 519360 500000 320x181 57920 0 Blackberry Curve 909x512 iPhone Retina Macbook 465408 480x271 130080 iPhone Macbook Retina

Image Resolution 2000000 1818x1024 1861632 er g 1500000 4% 1 ig b ,2 3 1000000 960x541 519360 500000 320x181 57920 0 Blackberry Curve 909x512 iPhone Retina Macbook 465408 480x271 130080 iPhone Macbook Retina

JPEG Compressed (k) 200 172 150 100 80 63 50 22 12 0 Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina

JPEG Compressed (k) 200 172 150 er g 3% 43 1, 100 ig b 80 63 50 22 12 0 Blackberry Curve iPhone iPhone Retina Macbook Macbook Retina

Downloads both standard and retina images Apple.com as an anti-pattern 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/

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

Picturefill User Preference Branch https://github.com/scottjehl/pictureﬁll/tree/user-prefs

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

Responsive Video

How do you provide the right video codec? http://www.longtailvideo.com/html5/

Multiple sources with Flash Fallback <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

How do you maintain the aspect ratio? • 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 right resolution and bitrate?

How do you send right resolution and bitrate? http://www.longtailvideo.com/html5/

You will need a video streaming service.

Why spend so much time on images?

Images are 61% of the average page Source: httparchive.org

If I could dream up my ideal solution for images… http://www.ﬂickr.com/photos/fuzzylittlemanpeach/4633972431/

Eights guidelines and one immutable rule

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

Home App Icon Packs Font CDN Demo Documentation Blog About IcoMoon Custom Built and Crisp Icon Fonts, Done Right IcoMoon App Premium Icons Font CDN Browse 3800+ Free Vector Icons 1200+ Vector Icons & Counting Serve Custom-Built Fonts Import Your Own Vectors to Make Fonts Handcrafted on a 16×16 grid Powered by Amazon Web Services Generate Custom & Crisp Icon Fonts Generate CSS Sprites with any size or color Basic Glyph Editing Several Different Formats Optimized for Icon Fonts Free Updates Easily Update Your Icon Fonts Production (Cached) Links Starting at $1.60/Month

Grumpicon.com based on Grunticon What Is This Issues? /' // . // |//7 /' " . . . | ( _ _ - -_ | '._ ' __ _/ '-' _ __ // _/ | | || | / / | / |VV ||--__________/-||-/| || || || || { } { } { }{ } Drag & Drop ur SVGs on the Grumpicon plz.

#2 Encourage people to upload the highest quality source possible

#3 Provide an automatic image resizing and compression service

#4 Images can be resized to any size with URL parameters Example from Sencha IO SRC. Define height, width or both. <img src="http://src.sencha.io/320/http:// sencha.com/files/u.jpg" alt="My constrained image" />

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

#5 Provide automated output of PictureFill or alternative <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>

Responsive Images Markup Function templates contain breakpoint information { "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}, ] } Sample s yntax. Do n’t get hung up on details. Responsive Images Markup Function PictureFill Markup Markup f or all ima ges can be ch anged in o ne spot.

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

#7 Integrate image compression best practices jpegtran or jpegoptim OptiPNG or PNGOUT far future expires headers learn from mod_pagespeed or use it

#8 Bonus: Detect support for WebP image format and use it The average WebP file size is 25% - 34% smaller compared to JPEG file size. WebP compresses 34% better than libpng, and 26% better than pngout for loseless images.

#! The only rule for your responsive images implementation.

#! 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 the my original question.

Can a one size fits all solution… http://www.ﬂickr.com/photos/theyoungthousands/4025421438

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

http://www.flickr.com/photos/haddadi/5971508861 Or will it always be TOO BIG?

Unlikely responsive design will ever be as fast as something crafted specifically for a device. http://www.ﬂickr.com/photos/quarenta/3256329577

But web design is a balancing act. http://www.ﬂickr.com/photos/kalexanderson/6266452817

And performance is just one factor.

For most projects, responsive design can be fast enough to make sense… Flickr: Uploaded February 11, 2007 by hawridger

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

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

Mobile First Responsive Web Design — BD Conf Oct 2013

by Jason Grigsby, Mobile and Web Strategist, Co-Founder at Cloud Four on Oct 21, 2013

Statistics

Views

Actions

1 Embed 54

Accessibility

Categories

Upload Details

Usage Rights

Report content

Mobile First Responsive Web Design — BD Conf Oct 2013 Presentation Transcript