Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Choose Your Mobile Adventure

Choose Your Mobile Adventure

Mobile has been described as the wild west of the web. It is untamed. Pitfalls abound. And there are plenty of bad characters ready step between you and your customer to “help” them have a better mobile experience.

Choosing the right path can be daunting, but just like the wild west of old, there’s gold in them there hills.

Dac45089aeda3bca56193072601a49d4?s=128

Jason Grigsby

November 18, 2011
Tweet

Transcript

  1. Choose Your Mobile Adventure Jason Grigsby • @grigs • cloudfour.com

    Slides: bit.ly/grigs-11-18-2011 http://www.flickr.com/photos/paperpariah/4245250519
  2. Follow along @grigs_talks bit.ly/grigs-11-18-2011 After event: @grigs http://www.flickr.com/photos/stevegarfield/4247757731/

  3. More devices every day

  4. e Coming Zombie Apocalypse of Devices

  5. Short Run Problem is Mobile Phones

  6. Content & Services Car sketch: http://www.flickr.com/photos/cloppy/5081768461/ Long Run Problem

  7. How do you deliver the right HTML, CSS and JavaScript

    to browsers?
  8. Responsive Web Design Separate Mobile Site OR

  9. Responsive Web Design http://www.flickr.com/photos/stuart-dootson/4024407198

  10. None
  11. None
  12. None
  13. @media screen and (min-width:480px) { /* CSS Rules */ }

    “screen” media type, we meet again! “min-” is a media query prefix. Rather intuitively, it means we want to query about a minimum width. “width” is a media feature we want to evaluate on the “screen” media type Unsurprisingly, there is also a “max-” prefix. These CSS rules will only get applied if the media query evaluates to TRUE Media Queries
  14. Media Queries in Responsive Web Design

  15. The site in a 960-pixel window e Problem with Fixed

    Layouts
  16. e Problem with Fixed Layouts Left and right columns are

    240 pixels wide...always The site viewed in a 700-pixel window The right column isn’t visible without scrolling
  17. e Problem with Fixed Layouts The site viewed in a

    1200-pixel window The entire width is constrained to 960 pixels
  18. Target Context Result The size of the element in pixels.

    The size of the containing “context,” in pixels. Our new, proportional CSS rule, as a percentage.
  19. 960 pixels 240 pixels 240 pixels 460 pixels 960 pixels

  20. 960 pixels 240 pixels 240 pixels 460 pixels 960 pixels

    Target Context Result
  21. 960 pixels 240 pixels 240 pixels 460 pixels 960 pixels

    240 pixels 960 pixels 25% The columns span a quarter of the page width. So this feels pretty intuitive, right?
  22. 960 pixels 240 pixels 240 pixels 460 pixels 960 pixels

    240 pixels 960 pixels 25% The columns span a quarter of the page width. So this feels pretty intuitive, right? 260 pixels 960 pixels 27.0833333% #main { margin: 10px 260px 0 250px; } 250 pixels 960 pixels 26.0416667% Our current CSS rule
  23. 960 pixels 240 pixels 240 pixels 460 pixels 960 pixels

    240 pixels 960 pixels 25% The columns span a quarter of the page width. So this feels pretty intuitive, right? 260 pixels 960 pixels 27.0833333% #main { margin: 10px 260px 0 250px; } 250 pixels 960 pixels 26.0416667% Our current CSS rule #main { margin: 10px 27.0833333% 0 26.0416667%; }
  24. 960 pixels 240 pixels 240 pixels 460 pixels 960 pixels

    220 pixels 220 pixels
  25. 220 pixels 960 pixels 22.916667% 960 pixels 240 pixels 240

    pixels 460 pixels 960 pixels 220 pixels 220 pixels
  26. 220 pixels 960 pixels 22.916667% 240 pixels 240 pixels 960

    pixels fail! div.main
  27. 220 pixels 960 pixels 22.916667% 240 pixels 240 pixels 960

    pixels fail! div.main
  28. 240 pixels 240 pixels 960 pixels fail! div.main

  29. 240 pixels 240 pixels 460 pixels 960 pixels div.main

  30. 240 pixels 240 pixels 460 pixels 960 pixels div.main 220

    pixels 460 pixels 47.826087% new context: width of div#main, the containing element
  31. img, object { max-width: 100%; } ka-pow! Flexible Images and

    Media
  32. http://www.flickr.com/photos/adventuresof/111667571/ is sounds great. What’s the catch?

  33. None
  34. None
  35. Looks can be deceiving Test mobile performance at http://blaze.io/mobile

  36. Eight JavaScript files for this page. Total size of all

    JavaScript is 351K. Woah! There are 35 images. 2.4MB for images alone. See the pie charts by clicking on Show Statistics on the HAR Viewer page. What’s causing the page to be so slow?
  37. <iframe id="map" width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe> Extremely

    long URL abbreviated This single iframe causes 47 files to be downloaded! Look inside ontap.html to find this code. Did you notice the map?
  38. <iframe id="map" width="300" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe> Extremely

    long URL abbreviated This single iframe causes 47 files to be downloaded! Look inside ontap.html to find this code. @media screen and (max-width:480px) { . . . #map {display:none;} } taps.css 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. Did you notice the map?
  39. 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;} } Same display:none issue with images
  40. Original Resized K Saved % Saved Holmes 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% Flexible images are unnecessarily large images
  41. Well, that’s disappointing. http://www.flickr.com/photos/kalexanderson/5421517469

  42. Mobile First Responsive Web Design Separate Mobile Site OR

  43. Mobile First Responsive Web Design http://www.flickr.com/photos/auyongcheemeng/95769332/

  44. Mobile First Flips RWD Around http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

  45. /* 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.
  46. e absence of support for media queries is in fact

    the rst media query. —Bryan Rieger, Yiibu
  47. Oh come on IE. No love? Because IE 8 and

    below don’t support media queries, IE isn’t getting the CSS rules that create columns.
  48. <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
  49. <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 or use Respond.js (a media query poly ll for IE)
  50. 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; } } Doesn’t work in all browsers. Duplicate downloads are unavoidable if the browser downloads assets if they are inside a media query that doesn’t apply.
  51. What to do about the map?

  52. What to do about the map? <iframe id="map" width="300" height="300"

    frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com..."></iframe> Extremely long URL abbreviated This single iframe causes 47 files to be downloaded! Look inside ontap.html to find this code.
  53. What to do about the map? <script type="text/JavaScript"> var breakpoint

    = 481, id = 'mapcontainer', viewportWidth = window.innerWidth; if (viewportWidth > breakpoint) { var mapElement = document.createElement('iframe'); mapElement.id = 'map'; mapElement.src = 'http://maps.google.com/maps?f=q&s ource=s_q&hl=en&geocode=&q=334+NW+11th+Ave,+Portland,+ OR+97209&aq=&sll=37.0625,-95.677068&sspn=58.164117,80. 332031&vpsrc=0&ie=UTF8&hq=&hnear=334+NW+11th+Ave,+Port land,+Oregon+97209&t=m&ll=45.525472,-122.68218&spn=0.0 1804,0.025749&z=14&output=embed'; document.getElementById(id).insertBefore(mapElement, maplink); } </script>
  54. 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.
  55. http://www.flickr.com/photos/wscullin/3770015203 first load... http://www.slideshare.net/yiibu/muddling-through-the-mobile-web

  56. http://www.flickr.com/photos/wscullin/3770015203 initial request 1 Hmm, Huston - we have a

    problem... ...no idea what we can deliver to this client... HTML JavaScript stylesheets images Flash video fonts http://www.slideshare.net/yiibu/muddling-through-the-mobile-web
  57. None
  58. None
  59. Option 1: Use JavaScript to set screen width in a

    cookie <img src=”small.jpg?large=large.jpg”> Information on location of large file in query string Instead of using query string, some use data attributes
  60. Option 1: Use JavaScript to set screen width in a

    cookie (function( win ){ // Get screen width var sw = win.screen.width, doc = win.document, // Name of cookie cookieName = def.cookieName || “rwd-screensize”, // Cookie value cookieValue = def.cookieValue || sw > 500 ? ( sw > 1000 ? “large” : “medium” ) : “small”, // Cookie options cookieAge = def.cookieAge || 30000, cookieDomain = def.cookieDomain, cookiePath = def.cookiePath || “/”, //record width cookie for subsequent loads recordRes = (function(){ var date = new Date(); date.setTime( date.getTime() + cookieAge ); doc.cookie = cookieName + “=” + cookieValue + “;” + “expires=” + date.toGMTString() + “;” + (cookiePath ? “path=” + cookiePath + “;” : “” ) + ( cookieDomain ? “domain=” + cookieDomain + “;” : “”); })(); })(this);
  61. Option 1: Use JavaScript to set screen width in a

    cookie # ---------------------------------------------------------------------- # Responsive Images # ---------------------------------------------------------------------- # Mobile-First images that scale responsively and responsibly # Copyright 2011, Scott Jehl, Filament Group, Inc # MIT License # ----------------------------------------- # Start Responsive Images # ----------------------------------------- RewriteEngine On #large cookie, large image RewriteCond %{HTTP_COOKIE} rwd-screensize=large RewriteCond %{QUERY_STRING} large=([^&]+) RewriteRule (.*\/).*\.(jpe?g|png|gif|webp) $1%1 #medium cookie, medium image RewriteCond %{HTTP_COOKIE} rwd-screensize=medium RewriteCond %{QUERY_STRING} medium=([^&]+) RewriteRule (.*\/).*\.(jpe?g|png|gif|webp) $1%1 #large cookie, medium image RewriteCond %{HTTP_COOKIE} rwd-screensize=medium RewriteCond %{QUERY_STRING} medium=([^&]+) RewriteRule (.*\/).*\.(jpe?g|png|gif|webp) $1%1 # ----------------------------------------- # END Responsive Images # -----------------------------------------
  62. Option 2: Use noscript to prevent image from loading <noscript

    data-large=”Koala.jpg” data-small=”Koala-small.jpg” data-alt=”Koala”> <img src=”Koala.jpg” alt=”Koala” /> </noscript> File doesn’t download because anything inside noscript tags is not is the DOM if the JavaScript is enabled. $(‘noscript[data-large][data-small]’).each(function(){ var src = screen.width >= 500 ? $(this).data(‘large’) : $(this).data(‘small’); $(‘<img src=”’ + src + ‘” alt=”’ + $(this).data(‘alt’) + ‘” />’). insertAfter($(this)); }); Script assumes jQuery is loaded.
  63. Option 3: Use Sencha.io SRC or similar solution to resize

    images Set the first part of the src to http://src.sencha.io/ After the slash add the full URL of the image you want to have resized. Sencha.io SRC will resize the image to fit the size of the device screen. For example, if an iPhone visits the site, the image will be constrained to its screen size of 320 by 480 pixels. <img src="http://src.sencha.io/http://[DOMAIN]/[PATH]/brews_images/bensons_ bubbler.jpg" alt="Bensons Bubbler"> Replace with your domain and path to the images.
  64. Option 3: Use Sencha.io SRC or similar solution to resize

    images Option 2: Use noscript to prevent image from loading Option 1: Use JavaScript to set screen width in a cookie Which would you choose?
  65. Option 1: Use JavaScript to set screen width in a

    cookie http://blog.yoav.ws/2011/09/Preloaders-cookies-and-race-conditions
  66. Option 1: Use JavaScript to set screen width in a

    cookie Ugh, unreliable. May not work in future. http://blog.yoav.ws/2011/09/Preloaders-cookies-and-race-conditions
  67. Option 2: Use noscript to prevent image from loading <noscript

    data-large=”Koala.jpg” data-small=”Koala-small.jpg” data-alt=”Koala”> <img src=”Koala.jpg” alt=”Koala” /> </noscript> File doesn’t download because anything inside noscript tags is not is the DOM if the JavaScript is enabled.
  68. Option 2: Use noscript to prevent image from loading <noscript

    data-large=”Koala.jpg” data-small=”Koala-small.jpg” data-alt=”Koala”> <img src=”Koala.jpg” alt=”Koala” /> </noscript> File doesn’t download because anything inside noscript tags is not is the DOM if the JavaScript is enabled. Ugh, markup is no longer semantic. We’ve changed HTML to t one and only one solution.
  69. Option 3: Use Sencha.io SRC or similar solution to resize

    images Set the first part of the src to http://src.sencha.io/ After the slash add the full URL of the image you want to have resized. Sencha.io SRC will resize the image to fit the size of the device screen. For example, if an iPhone visits the site, the image will be constrained to its screen size of 320 by 480 pixels. <img src="http://src.sencha.io/http://[DOMAIN]/[PATH]/brews_images/bensons_ bubbler.jpg" alt="Bensons Bubbler"> Replace with your domain and path to the images.
  70. Option 3: Use Sencha.io SRC or similar solution to resize

    images Set the first part of the src to http://src.sencha.io/ After the slash add the full URL of the image you want to have resized. Sencha.io SRC will resize the image to fit the size of the device screen. For example, if an iPhone visits the site, the image will be constrained to its screen size of 320 by 480 pixels. <img src="http://src.sencha.io/http://[DOMAIN]/[PATH]/brews_images/bensons_ bubbler.jpg" alt="Bensons Bubbler"> Replace with your domain and path to the images. Ugh, we’re routing everything through a third party. And how does Sencha.io know what size image to send anyways?
  71. What did the Boston Globe do? http://www.flickr.com/photos/bcymet/3564484236/

  72. None
  73. at’s not going to work.

  74. No code changes. Unplug it when something better appears.

  75. Doing this work does make a difference.

  76. How to handle embedded video? How about content reordering? (Flexbox

    can’t come soon enough) How can we be smart about image and video resizing and converting? What about third-party widgets that aren’t responsive? How do we integrate with content management systems? Mobile First RWD is Difficult
  77. 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 Comparison of Mobile & Desktop RWD Views Few Mobile First RWD Sites
  78. As long as we’re using Sencha, let’s look at device

    detection.
  79. User agent strings are the third rail of web development

    http://www.flickr.com/photos/flashflood/5183622956/
  80. “Browser sniffing is a stupid, error-prone and reviled practice, ‘backed’

    by a decade of failures.” http://www.flickr.com/photos/doug88888/4550561194/
  81. “User agent sniffing must die. Nice job advocating this bad

    practice.” http://www.flickr.com/photos/kayepants/391645870/
  82. URLs should go to content, not mobile home.

  83. Who can forget pages like this? Sadly, this screenshot was

    taken this month.
  84. http://www.flickr.com/photos/brunauto/5062644167/ Our vision of mobile context is often wrong.

  85. 80% during misc downtime 76% while waiting in lines 62%

    while watching TV 69% for point of sale research http://www.flickr.com/photos/missmeng/5327470961
  86. TMI: 39% use phone on the toilet.

  87. http://www.flickr.com/photos/77799978@N00/5351372848/ ese problems lead many to believe separate sites are

    evil.
  88. Mobile developers weren’t blind to the problems with UAs. http://www.flickr.com/photos/sam-wood/3255460999/

  89. We should learn from mobile developers’ experiences before forging our

    own path. http://www.flickr.com/photos/aftab/4214254065/
  90. 25 of 30 sites in Alexa Top 30 use device

    detection Other ve don’t offer mobile sites!
  91. Feels odd defending device detection. http://www.flickr.com/photos/dunechaser/2936397690/

  92. In my ideal world, device detection is unnecessary. http://www.flickr.com/photos/amaynez/2145618222/

  93. And yes, sometimes you feel like you need a shower

    afterwards. http://www.flickr.com/photos/jstar/195805847/
  94. http://www.flickr.com/photos/arguez/2247369944/ But this isn’t religion.

  95. ese are simply tools. http://www.flickr.com/photos/bre/552152780/

  96. Responsible use of device detection. http://www.flickr.com/photos/seven_pillars/3441833846/

  97. [THEMATIC_CONSISTENCY] Ensure that content provided by accessing a URI yields

    a thematically coherent experience when accessed from different devices. is is a realization of the One Web (see 3.1 One Web) principle, whereby content should be accessible on a range of devices irrespective of differences in presentation capabilities and access mechanism. —W3C Mobile Web Best Practices 1.0
  98. Incoming requests are run against a device database Code evaluates

    which device class the device matches based on device data In this hypothetical example, devices are sorted into one of four groups Desktop-like devices Spiffy, newer smartphones Middle-of-the- road smartphones and advanced feature phones Devices that didn’t meet bottom-line requirements The bar is set here (like in chapter 4) Group into as few device classes as possible
  99. * it actually stands for ‘uniform.’ close enough ;-) http://www.flickr.com/photos/laughingsquid/255852260/sizes/o/

    Support every URL on no matter what device.
  100. Device detection means signing up for an arms race. http://www.flickr.com/photos/kyle_slushey_is_awesome/4370958261/

  101. But by not discussing it, we’re missing out on major

    developments that change access to device databases.
  102. http://www.flickr.com/ photos/andresthor/ 3963368371/

  103. None
  104. generate nal markup device database cookie HEAVY LIFTING UA string

    tacit data see Bryan’s Adaptation presentation for greater detail on this technique application logic to determine device screen size to override the odd property based on existing knowledge to identify device and therefore, screen size data images video
  105. No matter how you approach it, we have a lot

    of infrastructure to build http://www.flickr.com/photos/wwworks/2942950081/
  106. thank you. http://www.flickr.com/photos/24311566@N07/4697623122/

  107. http://www.flickr.com/ photos/troyholden/ 5544097948/

  108. None
  109. None
  110. We’re building the future right now http://www.flickr.com/photos/insightimaging/3545443883/

  111. None
  112. http://www.flickr.com/photos/eole/3215868087/

  113. Let’s get to work.

  114. Jason Grigsby • @grigs • cloudfour.com Slides: bit.ly/grigs-11-18-2011 Thanks to

    Flickr users generously publishing under creative commons
  115. bit.ly/hf-mw

  116. Jason Grigsby • @grigs • cloudfour.com Slides: bit.ly/grigs-11-18-2011 Thanks to

    Flickr users generously publishing under creative commons