Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Follow along at @grigs_talks http://bit.ly/grigs-respond2014

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

http://www.flickr.com/photos/darrentunnicliff/4232232092/ Responsive web design offers us for a sensible way to deal with device diversity.

Slide 8

Slide 8 text

And yet the one question I frequently ask myself is…

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

PERFORMANCE

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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.

Slide 16

Slide 16 text

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/

Slide 17

Slide 17 text

http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf Mobile users don’t care that their network is slow.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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%

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/ Mobile First Responsive Web Design

Slide 34

Slide 34 text

“Awesome. We’ll devote a chapter to Mobile First Responsive Web Design in our book.”

Slide 35

Slide 35 text

“Awesome. We’ll devote a chapter to Mobile First Responsive Web Design in our book.” Famous last words.

Slide 36

Slide 36 text

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-first-responsive-web-designs/

Slide 37

Slide 37 text

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ Guy Podjarny repeated the experiment 2013: 476 sites from mediaqueri.es tested

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

http://www.flickr.com/photos/beautyredefined/2643858323/

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Most responsive web designs are…

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

5key techniques for responsible responsive design

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Mobile First Design Principles

Slide 55

Slide 55 text

Mobile First Design Principles Mobile First Responsive Design

Slide 56

Slide 56 text

Mobile First Design Principles Mobile First Responsive Design * FIRST Content First Structure First Performance First API First Command Line First

Slide 57

Slide 57 text

Mobile First Design Principles Mobile First Responsive Design * FIRST Content First Structure First Performance First API First Command Line First Coffee First

Slide 58

Slide 58 text

http://www.flickr.com/photos/gumption/3639682201/

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

How do I make this responsive?

Slide 61

Slide 61 text

How do I make this responsive?

Slide 62

Slide 62 text

How do I make this responsive?

Slide 63

Slide 63 text

http://www.flickr.com/photos/ancphotos_/6728574731

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

What would the mobile version look like?

Slide 67

Slide 67 text

What would the mobile version look like?

Slide 68

Slide 68 text

What would the mobile version look like?

Slide 69

Slide 69 text

How does that map to desktop design?

Slide 70

Slide 70 text

How does that map to desktop design?

Slide 71

Slide 71 text

How does that map to desktop design?

Slide 72

Slide 72 text

How does that map to desktop design?

Slide 73

Slide 73 text

How does that map to desktop design?

Slide 74

Slide 74 text

How does that map to desktop design?

Slide 75

Slide 75 text

How does that map to desktop design?

Slide 76

Slide 76 text

How does that map to desktop design?

Slide 77

Slide 77 text

How does that map to desktop design?

Slide 78

Slide 78 text

How does that map to desktop design?

Slide 79

Slide 79 text

How does that map to desktop design?

Slide 80

Slide 80 text

How does that map to desktop design?

Slide 81

Slide 81 text

How does that map to desktop design?

Slide 82

Slide 82 text

How does that map to desktop design?

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

IE8 and below don’t support media queries.

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

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?

Slide 95

Slide 95 text

The conditional comment repeats the line above it ensuring desktop IE sees our layout.css file. IE conditional comments

Slide 96

Slide 96 text

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 polyfill for IE)

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

http://timkadlec.com/2012/04/media-query-asset-downloading-results/
       
#test3  div  {        background-­‐image:url('images/ test3.png');        width:200px;        height:75px; } @media  all  and  (max-­‐width:  600px)   {        #test3  {                display:none;        } } display:none on parent element

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

@media screen and (max-width:480px) { . . . #map {display:none;} } 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. Hiding content with display:none does not prevent it from downloading. Extremely long URL abbreviated This single iframe causes 47 files to be downloaded!

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

         Latest  Articles AJAX Include Pattern https://github.com/filamentgroup/Ajax-Include-Pattern/ Use AJAX to bring more content into the page as the viewport width gets bigger

Slide 107

Slide 107 text

Behavioral Breakpoints

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

One SRC to rule all images 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.

Slide 110

Slide 110 text

Two most common use cases

Slide 111

Slide 111 text

https://www.flickr.com/photos/whitehouse/8491445521

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

http://www.flickr.com/photos/barackobamadotcom/5795228030/

Slide 114

Slide 114 text

Art direction http://www.flickr.com/photos/barackobamadotcom/5795228030/

Slide 115

Slide 115 text

http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

Slide 116

Slide 116 text

http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

Slide 117

Slide 117 text

http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

Slide 118

Slide 118 text

http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

Slide 119

Slide 119 text

http://www.flickr.com/photos/barackobamadotcom/5795228030/ Art direction

Slide 120

Slide 120 text

Not simply cropping

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

No good solutions

Slide 123

Slide 123 text

Things are still moving forward on a standards- based approach for responsive images. http://www.flickr.com/photos/johnlamb/2576062549/

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

No content

Slide 126

Slide 126 text

       
       
       
       
                                               
Picturefill JavaScript Library https://github.com/scottjehl/picturefill

Slide 127

Slide 127 text

#5 Handle high-density images carefully

Slide 128

Slide 128 text

A single image on multiple screens

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

@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

Slide 132

Slide 132 text

No content

Slide 133

Slide 133 text

Picturefill User Preference Branch https://github.com/scottjehl/picturefill/tree/user-prefs

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

Eights guidelines and one immutable rule

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

Topics: accessibility css icon design javascript Bulletproof Accessible Icon Fonts Posted by Zach on 01/13/2014 Care must be taken when implementing icon fonts to ensure a great experience for all users. What happens when your font doesn’t load? What happens when @font-face isn’t supported in the browser? We’ll show you how to implement bulletproof font icons. In our never-ending quest to build sites more efficiently and effectively for our clients, the lowly font has been proposed many times as an option to easily implement vector icons. While we typically prefer (and recommend) using SVG for vector icons for some of the reasons Ian Feather of Lonelyplanet.com has documented in his blog post, we sometimes collaborate with other teams who have already implemented icon fonts. For those cases we decided to research how to best implement icon fonts in a universally accessible way. What we do What we've done What we're thinking Who we are

Slide 139

Slide 139 text

IcoMoon App Premium Icons Font CDN Browse 3800+ Free Vector Icons Import Your Own Vectors to Make Fonts Generate Custom & Crisp Icon Fonts Generate CSS Sprites with any size 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 Web Services Easily Update Your Icon Fonts Production (Cached) Links Starting at $1.60/Month IcoMoon IcoMoon Custom Built and Crisp Icon Fonts, Done Right Home App Icon Packs Font CDN Demo Documentation Blog About

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

No content

Slide 142

Slide 142 text

#2 Encourage people to upload the highest quality source possible

Slide 143

Slide 143 text

#3 Provide an automatic image resizing and compression service

Slide 144

Slide 144 text

Example from Sencha IO SRC. Define height, width or both. My constrained image #4 Images can be resized to any size with URL parameters

Slide 145

Slide 145 text

No content

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

       
       
       
       
                                               
#5 Provide automated output of PictureFill or alternative

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

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

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

#! The only rule for your responsive images implementation.

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

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

Slide 159

Slide 159 text

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

Slide 160

Slide 160 text

And performance is just one factor.

Slide 161

Slide 161 text

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

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

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