• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobile First Responsive Design
 

Mobile First Responsive Design

on

  • 12,657 views

Mobile first and responsive web design aren’t simply two great tastes that go great together. No they represent much more than that. Mobile first responsive web design is the responsible way to ...

Mobile first and responsive web design aren’t simply two great tastes that go great together. No they represent much more than that. Mobile first responsive web design is the responsible way to build responsive designs.

Mobile first responsive web design is the best way to build something that is both responsive from a layout AND a performance perspective.

But if mobile first is the right way to do responsive design, then why are so few people doing it? In this presentation, we’ll dig into why mobile first responsive design matters and the five techniques necessary to make it work.

Statistics

Views

Total Views
12,657
Views on SlideShare
12,001
Embed Views
656

Actions

Likes
62
Downloads
191
Comments
5

17 Embeds 656

https://twitter.com 416
http://www.iphone-entreprise.com 166
http://www.linkedin.com 36
http://www.twylah.com 13
https://james-runkle.squarespace.com 4
https://si0.twimg.com 4
http://funaan.com 3
http://twitter.com 3
http://www.elroyjetson.org 2
http://www.redditmedia.com 2
http://getpocket.com 1
https://abs.twimg.com 1
https://mail.google.com 1
http://tweetedtimes.com 1
http://localhost 1
http://design.sf.office.twttr.net 1
http://elroyjetson.org 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Great info, thanks @grigs. As usual, you are on top of the situation!
    Are you sure you want to
    Your message goes here
    Processing…
  • que lindo juego de comedor
    Are you sure you want to
    Your message goes here
    Processing…
  • yo quiero ese equilibrio para mi
    Are you sure you want to
    Your message goes here
    Processing…
  • que binito peluchito
    Are you sure you want to
    Your message goes here
    Processing…
  • Beautiful
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobile First Responsive Design Mobile First Responsive Design Presentation Transcript

    • Mobile First Responsive Design Jason Grigsby • @grigs • jason@cloudfour.com http://www.flickr.com/photos/stuart-dootson/4024407198
    • Follow along @grigs Slides: bit.ly/mf-rwdhttp://www.flickr.com/photos/stevegarfield/4247757731/
    • 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 balanceis more difficult… http://www.flickr.com/photos/superfantastic/50088733/
    • as device diversity increases. http://www.flickr.com/photos/lyza/7382235106
    • Responsive web design offers usfor a sensible way to deal with device diversity. http://www.flickr.com/photos/darrentunnicliff/4232232092/
    • And yet the one question I frequently ask myself is…
    • Can a one size fits all solution… http://www.flickr.com/photos/sldghmmr/6041481069
    • compete witha tailored experience?http://www.flickr.com/photos/helloturkeytoe/4932748746/
    • Important question from many perspectives:
    • Important question from many perspectives: Search engine optimization Context Advertising Performance
    • Search engines?
    • What about mobile context?http://www.flickr.com/photos/brunauto/5062644167/
    • 80% duringmisc downtime76% whilewaiting in lines62% whilewatching TV69% for point ofsale research http://www.flickr.com/photos/missmeng/5327470961
    • TMI: 39% use phoneon the toilet.
    • Advertising? http://www.flickr.com/photos/ sh1mmer/2510487525
    • Performance?
    • http://www.akamai.com/dl/whitepapers/ecommerce_website_perf_wp.pdf
    • Shopzilla improves load time 5 seconds http://velocityconf.com/velocity2009/public/schedule/detail/7709
    • http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf
    • http://www.flickr.com/photos/wesbrowning/5316400258/
    • BBG: Before Boston Globe http://www.flickr.com/photos/69797234@N06/7203485148/
    • Media Queries Hide Problems Original Resized K Saved % SavedHolmes 34.7K 8.1K 26.6K 76.6%Watson 39.0K 8.4K 30.6K 78.4%Mycroft 30.5K 6.7K 23.8K 78.0%Moriarty 43.4K 8.2K 35.2K 81.1% Adler 26.0K 6.6K 19.4K 74.6%Winter 34.7K 7.8K 26.9K 77.5% Total 208.3K 45.8K 162.5K 78.0%
    • Crap, that’s not what I was trying to do. https://twitter.com/ldexterldesign/status/55229350299181057
    • What I meant to say:The way in which CSS media queries have beenpromoted for mobile hides tough problems andgives developers a false promise of a simplesolution for designing for multiple screens.
    • The resounding answer from the community:Mobile First Responsive Web Design
    • Mobile First Responsive Web Designhttp://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
    • “Awesome. We’lldevote a chapter to Mobile First Responsive WebDesign in our book.”
    • “Awesome. We’lldevote a chapter to Mobile First Responsive WebDesign in our book.”Famous last words.
    • Where are the Mobile First RWDs? 106 sites from mediaqueri.es tested 9% 4% 25% 21% 4% 38% Mobile is Larger Same Size Less than 10% Savings 11 to 50% Savings 51% to 100% Savings Greater than 100% Savingshttp://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
    • Guy Podjarny repeated the experiment a year later. 347 sites from mediaqueri.es tested 3% 11% 86% Same size A bit smaller Much smaller A bit smaller = 50%-90% the size Much smaller = <50% the size http://www.slideshare.net/guypod/performance-implications-of-mobile-design
    • http://www.thefoxisblack.com/2012/10/02/the-design-thinking-behind-the-new-disney-com/
    • Thankfully Guy took the tests further…
    • Big site, big waterfall 1600x1200http://www.slideshare.net/guypod/performance-implications-of-mobile-design
    • Small site, big waterfall 320x480http://www.slideshare.net/guypod/performance-implications-of-mobile-design
    • 1398 elements1402 elements 3491 nodes3485 nodes Simplicity not reflected in DOM 1600x1200 320x480 http://www.slideshare.net/guypod/performance-implications-of-mobile-design
    • http://www.flickr.com/photos/beautyredefined/2643858323/
    • http://www.flickr.com/photos/puuikibeach/3654517679
    • Most responsive web designs are…
    • Time to pen another fool’s gold post? http://www.flickr.com/photos/myklroventine/3400040943/
    • https://twitter.com/scottjehl/status/243025352069349377
    • 5 key techniques for responsible responsive design
    • #1 Build Mobile First Responsive Designs http://www.flickr.com/photos/auyongcheemeng/95769332/
    • Different than Mobile First Design Theoryhttp://www.flickr.com/photos/localcelebrity/4831362933/
    • Mobile First Responsive Web Designhttp://bradfrostweb.com/blog/web/mobile-first-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] M ove the mobile media query block } above the desktop media query. By doing this, we’re making S re su the cascading effect of CSfiris /* Mobile/lower-resolution devices */ @media screen and (max-width:480px) { st consistent with our mobile oach. [Mobile layout rules here] progressive enhancement appr }Keep basic styles outside of media queries.
    • The absence of support for mediaqueries is in fact the first media query. —Bryan Rieger, Yiibu
    • Oh come on IE. No love? Because IE 8 and below don’t su media queries, IE isn’t getting t pport CSS rules that create columns. he
    • 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)"><!--[if (lt IE 9)&(!IEMobile)]><link rel="stylesheet" type="text/css" href="layout.css" media="all" /><![endif]--> 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)"><!--[if (lt IE 9)&(!IEMobile)]><link rel="stylesheet" type="text/css" href="layout.css" media="all" /><![endif]--> 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.flickr.com/photos/lintmachine/2306383943/
    • Images with display:none are still downloaded K making it The taps.jpg file is 440.7 . the largest file on the page@media screen and (max-width:480px) { [Other CSS rules are here] .header {display:none;}}
    • Put CSS images inside media queries to prevent extra downloads@media screen and (min-width:481px){ .header { background:URL(images/taps.jpg) repeat-x; height: 300px; }}
    • http://timkadlec.com/2012/04/media-query-asset-downloading-results/
    • #3 Conditionally load JS based on screen size and capabilitieshttp://www.flickr.com/photos/lyza/7382255242/
    • Hiding content with display:none does not prevent it from downloading. Look inside ontap.html to find this code. <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 taps.css @media screen and (max-width:480px) { . les . There are many more ru . 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.
    • https://github.com/paulirish/matchMedia.js
    • http://adactio.com/journal/5429/
    • AJAX Include Pattern<a href="articles/latest/" data-append="articles/latest/fragment" data-media="(min-width: 30em)"> Latest Articles</a> https://github.com/filamentgroup/Ajax-Include-Pattern/
    • #4 Deliver different size <IMG>s at different screen sizes http://www.flickr.com/photos/kk/230544325/
    • One SRC to rule all images On eer labels on thetagThere are 16 b hat use an img Despite the need for multiple versions of this image depending on theTap Now page tr the Bensons Bubbler. screen size, HTML only allows one value for the src. like this one fo <img src="brews_images/bensons_bubbler.jpg" alt="Bensons Bubbler">
    • Things are still moving forward on a standards- based approach for responsive images. http://www.flickr.com/photos/johnlamb/2576062549/
    • http://responsiveimages.org/
    • Add more on current status of spec.
    • Add more on the questions we still need to answer.
    • 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/picturefill
    • Regardless of the img technique you choose,Plan to deprecate it when standards catch up with responsive images.
    • #5 Handle high-density images carefully
    • 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<style> #main { background-size: 400px 250px; } @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); } }</style>
    • CSS image-set new proposed specdiv.dog { background-image: -webkit-image-set(url(dog.jpg) 1x, url(dog-hi-res.jpg) 2x);}
    • Picturefill User Preference Branch https://github.com/scottjehl/picturefill/tree/user-prefs
    • Large JPEGs with Low Quality Settings? http://blog.netvlies.nl/design-interactie/retina-revolution/
    • SOUTH L TIA STREET DE EN LUSS INCEC AX AJ https://github.com/filamentgroup/Southstreet
    • It’s two years later. Let’s revisit the my original question.
    • Can a one size fits all solution… http://www.flickr.com/photos/theyoungthousands/4025421438
    • compete witha tailored experience?http://www.flickr.com/photos/fronx/2862975043
    • Or will we alwaysend up withsomething that istoo big? http://www.flickr.com/photos/haddadi/5971508861
    • Unlikely responsivedesign will ever be as fastas something craftedspecifically 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 performanceis just one factor.
    • For most projects,responsive design can be fastenough to make sense… Flickr: Uploaded February 11, 2007 by hawridger
    • if we do the extra workto make mobile firstresponsive designs.
    • Thank You! Special thanks to Scott Jehl, GuyPodjarny, and all of the Flickr users sharing under creative commons. Jason Grigsby • @grigs jason@cloudfour.com Slides: bit.ly/mf-rwd http://www.flickr.com/photos/sualk61/4083223760/