When Responsive Design Meets the Real World

Slide 1

Slide 1 text

http://www.ﬂickr.com/photos/adactio/6153522068 When Responsive Design Meets

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 difﬁcult… 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…

Slide 8

Slide 8 text

Can a one size ﬁts 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

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

Slide 11

Slide 11 text

Search engine optimization

Slide 12

Slide 12 text

Search engine optimization

Slide 13

Slide 13 text

Search engine optimization

Slide 14

Slide 14 text

Search engine optimization

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

http://www.ﬂickr.com/photos/brunauto/5062644167/ What about mobile context?

Slide 20

Slide 20 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/missmeng/5327470961

Slide 21

Slide 21 text

TMI

Slide 22

Slide 22 text

TMI: 39% use phone on the toilet.

Slide 23

Slide 23 text

http://www.ﬂickr.com/photos/ sh1mmer/2510487525 Advertising?

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Performance?

Slide 26

Slide 26 text

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

Slide 27

Slide 27 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 28

Slide 28 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 29

Slide 29 text

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

Slide 30

Slide 30 text

2 CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURES CORE GESTURES Tap )YPLÅ`[V\JOZ\YMHJL^P[OÄUNLY[PW Pinch ;V\JOZ\YMHJL^P[O[^VÄUNLYZHUKIYPUN them closer together. Double Tap 9HWPKS`[V\JOZ\YMHJL[^PJL^P[OÄUNLY[PW Spread ;V\JOZ\YMHJL^P[O[^VÄUNLYZHUKTV]L them apart. Drag 4V]LÄUNLY[PWV]LYZ\YMHJL^P[OV\[SVZPUN contact. Press Touch surface for extended period of time. Flick 8\PJRS`IY\ZOZ\YMHJL^P[OÄUNLY[PW Press+ Tap 7YLZZZ\YMHJL^P[OVULÄUNLYHUKIYPLÅ` [V\JOZ\YMHJL^P[OZLJVUKÄUNLY Mobile browsers offer many ways to navigate desktop web sites. Luke’s fantastic gesture reference: http://www.lukew.com/ff/entry.asp?1071

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

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

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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% Media Queries Hide Problems

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

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

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

Slide 47 text

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

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

No content

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Most responsive web designs are…

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

https://twitter.com/scottjehl/status/243025352069349377

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

5key techniques for responsible responsive design

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

http://www.businessinsider.com/survey-mobile-ﬁrst-bad-strategy-2012-12

Slide 65

Slide 65 text

Growth Constraints Capabilities Opportunity Focus Innovation = = = Luke’s Take on Mobile First http://www.lukew.com/ff/entry.asp?933

Slide 66

Slide 66 text

Mobile First Doesn’t Mean Starting from Scratch

Slide 67

Slide 67 text

How do I make this responsive?

Slide 68

Slide 68 text

How do I make this responsive?

Slide 69

Slide 69 text

http://www.ﬂickr.com/photos/ancphotos_/6728574731

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

What would the mobile version of this form look like?

Slide 73

Slide 73 text

What would the mobile version of this form look like?

Slide 74

Slide 74 text

What would the mobile version of this form look like?

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

How does that map to the current desktop design?

Slide 77

Slide 77 text

How does that map to the current desktop design?

Slide 78

Slide 78 text

How does that map to the current desktop design?

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

This is why Mobile First thinking is so powerful even on projects that are currently implemented on the desktop. Mobile First

Slide 82

Slide 82 text

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

Slide 83

Slide 83 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 84

Slide 84 text

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

Slide 85

Slide 85 text

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.

Slide 86

Slide 86 text

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

Slide 87

Slide 87 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 polyﬁll for IE)

Slide 88

Slide 88 text

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

Slide 89

Slide 89 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 90

Slide 90 text

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

Slide 91

Slide 91 text

@media%all%and%(min4width:%601px)%{ %%%%#test5%{ %%%%%%%%background4image:url('images/test54desktop.png'); %%%%%%%%width:200px; %%%%%%%%height:75px; %%%%} } @media%all%and%(max4width:%600px)%{ %%%%#test5%{ %%%%%%%%background4image:url('images/test54mobile.png'); %%%%%%%%width:200px; %%%%%%%%height:75px; %%%%} } Images scoped within media queries http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Slide 92

Slide 92 text

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

%%%%

#test3%div%{ %%%%background4image:url('images/test3.png'); %%%%width:200px; %%%%height:75px; } @media%all%and%(max4width:%600px)%{ %%%%#test3%{ %%%%%%%%display:none; %%%%} } display:none on parent element

Slide 93

Slide 93 text

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

#test4%{ %%%%background4image:url('images/test44desktop.png'); %%%%width:200px; %%%%height:75px; } @media%all%and%(max4width:%600px)%{ %%%%#test4%{ %%%%%%%%background4image:url('images/test44mobile.png'); %%%%} } Image override with a media query

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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. Hiding content with display:none does not prevent it from downloading.

Slide 96

Slide 96 text

https://github.com/paulirish/matchMedia.js

Slide 97

Slide 97 text

http://adactio.com/journal/5429/

Slide 98

Slide 98 text

Latest Articles AJAX Include Pattern https://github.com/ﬁlamentgroup/Ajax-Include-Pattern/

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

http://www.ﬂickr.com/photos/kk/230544325/ Deliver di erent size s at di erent screen sizes #4

Slide 102

Slide 102 text

One SRC to rule all images

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 103

Slide 103 text

Two most common use cases

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107