Mobile First Responsive Design

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

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

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

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

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

http://www.ﬂickr.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…
http://www.ﬂickr.com/photos/omcoc/6751047205

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:

http://www.ﬂickr.com/photos/andercismo/2349098787 Search engine optimization

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

http://www.ﬂickr.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

39% use phone on toilet

Advertising http://www.ﬂickr.com/photos/powerbooktrance/267059283

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 slow websites as the main cause of basket abandonment 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 ADVERTISE HERE » by David Moth 06 December 2012 11:40 8 comments Print Tweet Tweet 236 3 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. Privacy and cookie policy Home / Blog Subscribe Reports Training Events Jobs Blog More Browse by topic Like 14 Share Share 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.ﬂickr.com/photos/stephenjohnbryde/384095768/ There are no gestures that can make a web
site faster.

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

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

http://www.ﬂickr.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% Original Resized K Saved % Saved

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% Original Resized K Saved % Saved Original Resized K Saved % Saved Total 208.3K 45.8K 162.5K 78.0%

The resounding answer from the community: 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 Larger Same
Size Less than 10% Savings 11 to 50% Savings 51% to 100% Savings Greater than 100% Savings Where are the Mobile First RWDs? 106 sites from mediaqueri.es tested http://blog.cloudfour.com/where-are-the-mobile-ﬁrst-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.ﬂickr.com/photos/beautyredeﬁned/2643858323/

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

Most responsive web designs are…

http://www.ﬂickr.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

5key techniques for responsible responsive design

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

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

Mobile First Design Principles Mobile First Responsive Design Forwarded by
Luke Wroblewski Technical Approach for Responsive Design

*FIRST Content First Structure First Performance First API First Command
Line First

http://www.ﬂickr.com/photos/leah8691/2184863624/

COFFEE FIRST! http://www.ﬂickr.com/photos/leah8691/2184863624/

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

But we’ve already got a desktop design and we can’t
start over.

How do I make this responsive?

Many say responsive design won’t work for apps https://twitter.com/freediverx/status/354698695041744896

Responsive design for apps is inevitable. http://blog.cloudfour.com/responsive-design-for-apps-part-1/

Lines between device classes are blurring Model Type Size Size
Display Resolution Resolution Viewport Viewport W H W H W H Samsung Galaxy Note 2 Phone 3.17” 5.95” 5.5” 720 1280 360 640 Motorola RAZR HD Phone 2.67” 5.19” 4.7” 720 1280 360 519 Motorola Atrix HD Phone 2.75” 5.26” 4.5” 720 1280 540 812 HTC Droid DNA Phone 2.78” 5.5” 5” 1080 1920 360 640 Nexus 7 Tablet 4.72” 7.81” 7” 800 1280 600 793 Kindle Fire Tablet 4.72” 7.44” 7” 600 1024 600 819 Kindle Fire HD Tablet 5.4” 7.6” 7” 800 1280 533 731

640 px 600 px 519 px 640 px 622 px
533 px 812 px Which are phones and which are tablets?

iPad, iPad Mini, iPad Air x 480 320 x 568
320 x 667 375 x 736 414 x 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.

iPad, iPad Mini, iPad Air 480 320 568 320 667
375 736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.

736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum.

736 414 768 1024 iPhone - iPhone 4s iPhone 5 iPhone 5c iPhone 5s iPhone 6 iPhone 6 Plus Even iOS is now a continuum. The Magic 32 pixels

https://twitter.com/_munter_/status/511770590123143168

http://www.flickr.com/photos/geatchy/8489505999

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?

This is why Mobile First thinking is so powerful even
on existing projects.

Frequent concern for this project: How something will scale to
desktop.

Frequent concern for this project: How something will scale to
desktop. Actual times this has been a problem when mobile has been solid already: 0

Small screen assets Large screen assets Progressive enhancement based on
screen size Mobile First Responsive Web Design is a technical approach for responsive designs.

Mobile First Responsive Design Starts Simple: Reorder media queries so
cascade goes from small to large screens

/* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules
here] /* Desktop layout styles */ [Desktop rules here] /* Mobile (small screen) styles */ @media screen and (max-width: 480px) { [Mobile layout rules here] } Typical Desktop First Responsive CSS Likely the original CSS. Added for mobile.

here] /* Desktop layout styles */ [Desktop rules here] /* Mobile (small screen) styles */ @media screen and (max-width: 480px) { [Mobile layout rules here] }

here] /* Desktop layout styles */ [Desktop rules here] /* Mobile (small screen) styles */ @media screen and (max-width: 480px) { [Mobile layout rules here] } Reorder CSS to Make it Mobile First

/* Mobile (small screen) styles */ @media screen and (max-width:
480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] /* Desktop layout styles */ [Desktop rules here] Reorder CSS to Make it Mobile First

480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] /* Desktop layout styles */ [Desktop rules here]

480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] /* Desktop layout styles */ Add wide screen media query [Desktop rules here]

/* Desktop layout styles */ /* Mobile (small screen) styles
*/ @media screen and (max-width: 480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] Add wide screen media query [Desktop rules here]

*/ @media screen and (max-width: 480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] Add wide screen media query [Desktop rules here] @media screen and (min-width: 481px) {

*/ @media screen and (max-width: 480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] Add wide screen media query [Desktop rules here] @media screen and (min-width: 481px) { } The cascade is working for us: small to large.

*/ @media screen and (max-width: 480px) { [Mobile layout rules here] } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] [Desktop rules here] @media screen and (min-width: 481px) { }

here] /* Desktop layout styles */ /* Mobile (small screen) styles */ @media screen and (max-width: 480px) { [Mobile layout rules here] } [Desktop rules here] @media screen and (min-width: 481px) { }

here] /* Desktop layout styles */ /* Mobile (small screen) styles */ @media screen and (max-width: 480px) { [Mobile layout rules here] } [Desktop rules here] @media screen and (min-width: 481px) { } /* Baseline styles (e.g., reset, typography, colors) */ [Baseline rules here] Important to 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.

Fallback for browsers w/o media queries

Mobile First RWD = Fallback for browsers w/o media queries
Mobile Fallback (More accurately, a baseline fallback)

IE conditional comments <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css"
href="layout.css" media="all and (min-width: 481px)">

IE conditional comments <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css"
href="layout.css" media="all and (min-width: 481px)">  or use Respond.js (a media query polyfill for IE)

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

@media screen and (max-width: 550px) { #content .homepage_background { display:
none; } }

none; } } Images with display:none are still downloaded

none; } } Images with display:none are still downloaded downloaded and never displayed! 185K

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; } } #1: Images scoped within media queries http://timkadlec.com/2012/04/media-query-asset-downloading-results/ Only one rule can apply at any time.

http://timkadlec.com/2012/04/media-query-asset-downloading-results/ <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; } } #2: display:none on parent element

http://timkadlec.com/2012/04/media-query-asset-downloading-results/ <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; } } #2: display:none on parent element Why have extra markup in the DOM?

http://timkadlec.com/2012/04/media-query-asset-downloading-results/ <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: Image override with a media query

http://dev.w3.org/csswg/css-images-3/#image-set-notation http://blog.cloudfour.com/the-forgotten-responsive-images-spec-image-set/ background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x, "foo-print.png" 600dpi
); The forgotten responsive image solution: image-set()

http://dev.w3.org/csswg/css-images-3/#image-set-notation http://blog.cloudfour.com/the-forgotten-responsive-images-spec-image-set/ background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x, "foo-print.png" 600dpi
); The forgotten responsive image solution: image-set() Important for resolution switching use cases

VOTE image-set()

http://www.ﬂickr.com/photos/lyza/7382255242/ #3 Conditionally load JS based on screen size and
capabilities

<div id="map-holder"> <div id="map"></div> </div> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js…"> </script> <script>
[Maps JavaScript here] </script>

[Maps JavaScript here] </script> #map-holder { display: none; }

[Maps JavaScript here] </script>

<div id="map-holder"> <div id="map"></div> </div> @media all and (min-width: 768px)
{ #map-holder, #map-logo { display: block; } } <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js…"> </script> <script> [Maps JavaScript here] </script>

<div id="map-holder"> <div id="map"></div> </div> @media all and (min-width: 768px)
{ #map-holder, #map-logo { display: block; } } <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js…"> </script> <script> [Maps JavaScript here] </script> Hiding content with display:none does not prevent it from downloading.

if (matchMedia('only screen and (max-width: 480px)').matches) { // small-screen related
dom scripting } Use matchMedia() JS to test media query matchMedia() polyfill for older browsers: https://github.com/paulirish/matchMedia.js

<h2 data-after="demo-content/links.html" data-media="(min-width: 40em)"> <a href="demo-content/links.html"> Related External Links </a>
</h2> AJAX Include Pattern https://github.com/ﬁlamentgroup/Ajax-Include-Pattern/

Behavioral Breakpoints

Behavioral Breakpoints <div id="menu-trigger">Menu</div>

Behavioral Breakpoints <div id="menu-trigger">Menu</div> @media screen and (min-width: 40em) {
#menu-trigger { display : none; } }

#menu-trigger { display : none; } } switch (display) { case 'block': menu.on(); break; case 'none': menu.off(); break; }

#menu-trigger { display : none; } } switch (display) { case 'block': menu.on(); break; case 'none': menu.off(); break; } Breakpoints only in your CSS. Not repeated in JavaScript. http://cloudfour.github.io/offCanvasMenu/ http://blog.cloudfour.com/behavioral-breakpoints/

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

One SRC to rule all IMGs http://www.ﬂickr.com/photos/vermininc/3182396114/

Two most common use cases

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

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

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

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

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

Not simply cropping

Art direction: Images with text Sign In Account Get Email
Español Shopping Bag 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 Search

No good solutions

The standards process is slow moving but… http://www.ﬂickr.com/photos/johnlamb/2576062549/

picture specification

<picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 18em)" srcset="med.jpg"> <img
src="small.jpg" alt="The president giving an award."> </picture> The picture element

Srcset and Sizes This is what you should use 75%
of the time! http://blog.cloudfour.com/dont-use-picture-most-of-the-time/

Srcset and Sizes <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg
320w" sizes="(min-width: 36em) 33.3%, 100%" alt="A rad wolf" /> Picture standard does not require you to use the picture element. This is what you should use 75% of the time! http://blog.cloudfour.com/dont-use-picture-most-of-the-time/

http://ericportis.com/posts/2014/srcset-sizes/

Responsive images are in some browsers NOW! Coming soon! Under
consideration Unknown

Picturefill Picturefill A responsive image polyfill Download Getting Started Examples
API Browser support Contributing The picture element and associated features are W3C standard HTML features that allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill is a JavaScript file (or a polyfill to be more specific) that enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today! Picturefill is developed and maintained by , with help from the members of the Responsive Images Community Group and the developer community at large. For Picturefill version 2, a special thanks goes to Shawn Jansepar for all his work on polyfilling the new spec. Contributing, Bug Reports, and More information For more information on the development of Picturefill, and how you can file bugs or contribute fixes, check out the the code project site on Github : Picturefill on Github. Downloading Picturefill Downloading Picturefill Picturefill Version 2.0.0 http://scottjehl.github.io/pictureﬁll/

#5 Handle high-density images carefully

A single image on multiple screens

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

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

@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

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

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

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

Eights guidelines for responsive images

#1 Use vector-based images whenever you can

A Compendium of SVG Information Published*July*22,*2014*by*Chris*Coyier CSS-TRICKS Grow your CSS
skills. * THE LODGE A*huge*pile*of*information*about SVG. How to Use SVG These*are*overview*articles covering*lots*of*stuff*relating*to SVG.*Why*to*use*it*and*the*basics of*how*to*use*it.*Mostly:* ,* ,* , <img> background-image <svg> ™ Learn*HTML,*CSS,*and*how*to*build iPhone*apps*at*Treehouse.*Their library*of*over*1,000*current*training FORUMS SNIPPETS ALMANAC VIDEOS BLOG http://css-tricks.com/mega-list-svg-information/

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

Media queries INSIDE SVG? http://www.ﬂickr.com/photos/deleatur/3051737237

http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes

#2 Encourage people to upload the highest quality source possible

#3 Provide an automatic image resizing and compression service

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" /> #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" /> #4 Images can be resized to any size with URL parameters Unique URLs are imperative to play nice with caching.

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

#5 Provide automated output of Picture and PictureFill <picture> <source
media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 18em)" srcset="med.jpg"> <img src="small.jpg" alt="The president giving an award."> </picture>

Responsive Images Markup Function

{ "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 }, ] } Responsive Images Markup Function Templates contain breakpoint info only.

{ "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 }, ] } Responsive Images Markup Function Responsive Images Markup Function Templates contain breakpoint info only. Markup for all images can be changed in one spot.

{ "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 }, ] } Responsive Images Markup Function Responsive Images Markup Function PictureFill Markup Templates contain breakpoint info only. 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

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. #8 Bonus: Detect support for WebP image format and use it

It’s three years later. Let’s revisit 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.

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

Mobile First Responsive Design

More Decks by Jason Grigsby

Other Decks in Technology

Featured

Transcript