Mobile First Responsive Design

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

And yet the one question I frequently ask myself is… http://www.ﬂickr.com/photos/omcoc/6751047205

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Important question from many perspectives:

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

TMI

Slide 18

Slide 18 text

39% use phone on toilet

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

PERFORMANCE

Slide 23

Slide 23 text

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

Slide 24

Slide 24 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 25

Slide 25 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 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 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 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 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-ﬁrst-responsive-web-designs/

Slide 45

Slide 45 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 46

Slide 46 text

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

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Most responsive web designs are…

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 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 58

Slide 58 text

5key techniques for responsible responsive design

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

How do I make this responsive?

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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.

Slide 76

Slide 76 text

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.

Slide 77

Slide 77 text

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.

Slide 78

Slide 78 text

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.

Slide 79

Slide 79 text

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.

Slide 80

Slide 80 text

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.

Slide 81

Slide 81 text

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.