Before the @mq - Speaker Deck

Slide 1

Slide 1 text

Before the @mq Erik Runyon @erunyon @BDConf July 2013

Slide 2

Slide 2 text

/about/ Erik Runyon Director of Web Communications University of Notre Dame @erunyon weedygarden.net

Slide 3

Slide 3 text

What We’ll Cover I. Why We Optimize II. Articles BBC News III. Carousels WVU IV. In Depth Notre Dame

Slide 4

Slide 4 text

I. Why We Optimize

Slide 5

Slide 5 text

2010 2.6% 3.6% 7.2% 2011 4.4% 8.8% 26.1% 2012 13.3% 17.7% 44.9% ND.edu Admissions Game Day Mobile Trafﬁc

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

January 7, 2013 BCS Bowl Game

Slide 8

Slide 8 text

January 7, 2013 BCS Bowl Game Usually 5.5% each

Slide 9

Slide 9 text

Developer Poll

Slide 10

Slide 10 text

news.cnet.com/2100-1038_3-5172107.html nytimes.com/2005/06/21/technology/21iht-broad.html ﬂickr.com/photos/foolswisdom/108953458/lightbox Broadband began to overtake dial-up in 2004* * In major U.S. Cities

Slide 11

Slide 11 text

http://www.ﬂickr.com/photos/specialkrb/4045683750/ Dial-up EDGE 3G LTE 56 Kbps 384 Kbps 1.2 Mbps 16+ Mbps

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Erik’s personal Bermuda Triangle of AT&T suckage

Slide 18

Slide 18 text

http://www.websiteoptimization.com/speed/tweak/average-web-page/ http://www.webperformancetoday.com/2012/05/24/average-web-page-size-1-mb/ “The size of the average web page of the top 1000 websites has more than tripled since 2008. In the past ﬁve years from 2008 to late 2012 the average web page grew from 312K to 1114K, over 3.5 times larger” – websiteoptimization.com (Nov 11, 2012) “In the past 18 months, the average web page has grown by 50% — from 702 KB in November 2010 to 1042 KB on May 1, 2012. At this rate, the average page will hit 2MB by 2015.” – webperformancetoday.com (May 24, 2012)

Slide 19

Slide 19 text

weedygarden.net

Slide 20

Slide 20 text

Sites used to generate these stats: http://bit.ly/highered-rwd averages for #highered RWD sites 128 sites sampled at full size requests size 61 1.7 MB

Slide 21

Slide 21 text

Sites used to generate these stats: http://bit.ly/highered-rwd averages for #highered RWD sites 128 sites sampled with iPhone UA and narrow screen (to simulate mobile) requests size 57 1.6 MB

Slide 22

Slide 22 text

1-1.9 MB = 50 Sites used to generate these stats: http://bit.ly/highered-rwd averages for #highered RWD sites 128 sites sampled with iPhone UA and narrow screen (to simulate mobile) 2-2.9 MB = 15 3-3.9 MB = 11 > 4 MB = 6

Slide 23

Slide 23 text

Dedicated Mobile vs. RWD 48 schools Dedicated mobile 180 KB RWD 1.4 MB

Slide 24

Slide 24 text

js css images Sites used to generate these stats: http://bit.ly/highered-rwd averages for #highered RWD sites 128 sites sampled with iPhone UA and narrow screen (to simulate mobile) 12 files / 227 KB 7 files / 99 KB 32 files / 1 MB 73% of page size

Slide 25

Slide 25 text

II. Articles - BBC News

Slide 26

Slide 26 text

m.bbc.co.uk/news

Slide 27

Slide 27 text

www.bbc.co.uk/news m.bbc.co.uk/news

Slide 28

Slide 28 text

…build a BBC News website that ﬁts the needs of the maximum of users 3 years in the future. At the moment we have a mobile only responsive website. But eventually it will take over the desktop site. @tmaslen

Slide 29

Slide 29 text

http://www.slideshare.net/bradfrostweb/responsive-design-vs-separate-mobile-sites-presidential-smackdown-edition @brad_frost

Slide 30

Slide 30 text

http://www.slideshare.net/bradfrostweb/responsive-design-vs-separate-mobile-sites-presidential-smackdown-edition @brad_frost

Slide 31

Slide 31 text

requests size css js images www.bbc.co.uk/news Launched 1997 m.bbc.co.uk/news Launched 2012 196 1.4 MB 10 files / 64.4 KB 71 files / 419 KB 114 files / 823 KB DESKTOP requests size css js images 8 34 KB 3 files / 16.4 KB — 4 files / 4.9 KB BASIC only one content image requests size css js images 59 224 KB 5 files / 37.6 KB 8 files / 70.2 KB 41 files / 84.1 KB SMARTPHONE

Slide 32

Slide 32 text

HTML5 browsers IE9+ Firefox 3.5+ Opera 9+ and probably further back Safari 4+ Chrome 1+ (I think) iPhone and iPad iOS1+ Android phone and tablets 2.1+ Blackberry OS6+ Windows 7.5+ new Mango version Mobile Firefox all the versions we tested Opera Mobile all the versions we tested HTML4 browsers IE8- Blackberry OS5- Nokia S60 v6- Nokia S40 all versions All other Symbian variants Windows 7 phone pre-Mango …and many more that are too numerous to mention. http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

Slide 33

Slide 33 text

if('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // bootstrap the application } “Cutting the Mustard” http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

Slide 34

Slide 34 text

A large part of any JS library is its DOM selector. If the browser has native CSS selecting then it removes the need for a DOM selector. QuerySelector has been available in Firefox since 3.5 at least and has been working in webkit for ages. It also works in IE9. document.querySelector http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

Slide 35

Slide 35 text

Although we are not using it yet, we are planning on making considerable use of it. Imagine that if you ﬁrst came to the mobile site we downloaded all the stories straight away and stored them in localStorage. They’d then be available to use while you are going through an areas of sketchy bandwidth. window.localStorage http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

Slide 36

Slide 36 text

Another large part of any JS library is event support. Every browser made in the last 6 years (except IE8) supports DOM level 2 events. If the browser supports this then we know it has better standards support than IE8. window.addEventListener http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

Slide 37

Slide 37 text

8 requests 34 KB 59 requests 224 KB

Slide 38

Slide 38 text

! ! ! Germany-Turkey diplomatic row erupts ! ! !

21 June 2013

Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.

Germany-Turkey diplomatic row erupts

2 hours ago

Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.

Slide 39

Slide 39 text

! ! ! Germany-Turkey diplomatic row erupts ! ! !

21 June 2013

Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.

Germany-Turkey diplomatic row erupts

2 hours ago

Germany summons the Turkish ambassador in a row over Turkey's bid for membership of the European Union.

Slide 40

Slide 40 text

! !

Slide 41

Slide 41 text

widths = [96, 130, 165, 200, 235, 270, 304, 340, 375, 410, 445, 485, 520, 555, 590, 625, 660, 695, 736] http://responsivenews.co.uk/post/50092458307/images “We made an arbitary decision to add a breakpoint every 30px from 96px up to 736px… informed more by the image sizes that ﬁt into the old grid system available in BBC’s GEL layout guide.”

Slide 42

Slide 42 text

96px 96px = 2 KB 200px = 5 KB 235px 200px = 3 KB 235px = 4 KB 590px = 29 KB Viewport ~ 240px wide

Slide 43

Slide 43 text

96px 96px = 2 KB 200px = 5 KB 235px 200px = 3 KB 235px = 4 KB 590px = 29 KB x27 Viewport ~ 240px wide

Slide 44

Slide 44 text

“At the moment making the choice based on element size is the best ﬁt for us, as element widths do not correlate to viewport widths. We use images in many different contexts, stretched across columns, left aligned, etc, so we have to use element width.” http://responsivenews.co.uk/post/50092458307/images

Slide 45

Slide 45 text

240px wide 670px wide 970px wide 86.7 KB 113.9 KB 134.6 KB

Slide 46

Slide 46 text

The site records around 40 million unique users a week https://en.wikipedia.org/wiki/BBC_News_Online http://www.digitalspy.com/media/news/a437075/us-election-brings-bbc-news-website-trafﬁc-high.html Coverage of the (2012 U.S.) election… brought 16.4 million unique browsers across the BBC website and mobile services on November 7.

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

III. Carousels - WVU

Slide 49

Slide 49 text

www.WVU.edu

Slide 50

Slide 50 text

http://bradfrostweb.com/blog/post/carousels/

Slide 51

Slide 51 text

News/Sports

Slide 52

Slide 52 text

News/Sports

Slide 53

Slide 53 text

News/Sports

Slide 54

Slide 54 text

News/Sports

Slide 55

Slide 55 text

News/Sports

Slide 56

Slide 56 text

News/Sports

Slide 57

Slide 57 text

Entertainment

Slide 58

Slide 58 text

Entertainment

Slide 59

Slide 59 text

Entertainment

Slide 60

Slide 60 text

Entertainment

Slide 61

Slide 61 text

Technology

Slide 62

Slide 62 text

Technology

Slide 63

Slide 63 text

Technology

Slide 64

Slide 64 text

Technology

Slide 65

Slide 65 text

HigherEd

Slide 66

Slide 66 text

HigherEd

Slide 67

Slide 67 text

HigherEd

Slide 68

Slide 68 text

HigherEd

Slide 69

Slide 69 text

HigherEd

Slide 70

Slide 70 text

HigherEd

Slide 71

Slide 71 text

HigherEd

Slide 72

Slide 72 text

HigherEd

Slide 73

Slide 73 text

HigherEd

Slide 74

Slide 74 text

HigherEd

Slide 75

Slide 75 text

HigherEd

Slide 76

Slide 76 text

HigherEd

Slide 77

Slide 77 text

HigherEd

Slide 78

Slide 78 text

HigherEd

Slide 79

Slide 79 text

HigherEd

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

weedygarden.net/2013/07/carousel-interaction-stats 1.07% of visitors clicked on a feature

Slide 82

Slide 82 text

Typical click-through rates of 1-3% weedygarden.net/2013/07/carousel-interaction-stats

Slide 83

Slide 83 text

Notre Dame

Slide 84

Slide 84 text

Notre Dame

Slide 85

Slide 85 text

Notre Dame

Slide 86

Slide 86 text

Notre Dame

Slide 87

Slide 87 text

Notre Dame

Slide 88

Slide 88 text

Notre Dame

Slide 89

Slide 89 text

Notre Dame

Slide 90

Slide 90 text

Notre Dame

Slide 91

Slide 91 text

Notre Dame

Slide 92

Slide 92 text

Notre Dame

Slide 93

Slide 93 text

Notre Dame

Slide 94

Slide 94 text

Notre Dame

Slide 95

Slide 95 text

Notre Dame

Slide 96

Slide 96 text

Notre Dame

Slide 97

Slide 97 text

http://www.ﬂickr.com/photos/errolyucel/4966109357/

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

"…keeping the designer focused on achievable solutions at speciﬁc screen sizes by not trying to optimize one code base for everything and leveraging server-side solutions rather than force templating logic onto the front-end." @dmolsen

Slide 101

Slide 101 text

RESS (responsive design + server-side components) www.lukew.com/ff/entry.asp?1392

Slide 102

Slide 102 text

Wait, isn’t browser detection evil?

Slide 103

Slide 103 text

wtfmobileweb.com

Slide 104

Slide 104 text

wtfmobileweb.com

Slide 105

Slide 105 text

wtfmobileweb.com

Slide 106

Slide 106 text

wtfmobileweb.com

Slide 107

Slide 107 text

wtfmobileweb.com

Slide 108

Slide 108 text

http://xkcd.com/1174/ “If I click 'no', I've probably given up on everything, so don't bother taking me to the page I was trying to go to. Just drop me on the homepage. Thanks.”

Slide 109

Slide 109 text

http://www.ﬂickr.com/photos/dipster1/1403240351/ WURFL: wurﬂ.sourceforge.net 51degrees: 51degrees.mobi Device Atlas: deviceatlas.com OpenDDR: openddr.org

Slide 110

Slide 110 text

github.com/dmolsen/Detector

Slide 111

Slide 111 text

"The basic premise being that 90% of the mark-up and styles are the same on all browsers but some get just a little tweak here and there based on their browser's UA and supported properties. The primary images that we tweak are the carousel images. They're by far our biggest resource hog. By looking for mobile UAs we serve much smaller width/height imagery." @dmolsen

Slide 112

Slide 112 text

Completely different carousels Mobile: Flexslider www.woothemes.com/ﬂexslider Desktop: Supersized buildinternet.com/project/supersized

Slide 113

Slide 113 text

Code Differences

Slide 114

Slide 114 text

CSS Mobile Desktop

Slide 115

Slide 115 text

CSS Mobile Desktop

Slide 116

Slide 116 text

JS Mobile Desktop

Slide 117

Slide 117 text

JS Mobile Desktop

Slide 118

Slide 118 text

Mobile

… Read More
… Read More
… Read More
… Read More
… Read More

HTML

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

Desktop

HTML jQuery(function($){ $.supersized({ slide_interval : 30000, transition : 1, transition_speed : 500, keyboard_nav : 0, slide_links : 'blank', slides : [ {image : 'images/slideshow/69.jpg', title : "…", thumb : 'images/slideshow/thumbs/69.jpg'}, {image : 'images/slideshow/64.jpg', title : "…", thumb : 'images/slideshow/thumbs/64.jpg'}, {image : 'images/slideshow/71.jpg', title : "…", thumb : 'images/slideshow/thumbs/71.jpg'}, {image : 'images/slideshow/70.jpg', title : "…", thumb : 'images/slideshow/thumbs/70.jpg'}, {image : 'images/slideshow/72.jpg', title : "…", thumb : 'images/slideshow/thumbs/72.jpg'} ] }); });

Slide 121

Slide 121 text

Images

HTML

Slide 122

Slide 122 text

No content

Slide 123

Slide 123 text

HTML Controls

Slide 124

Slide 124 text

HTML Controls

Slide 125

Slide 125 text

HTML Controls

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

requests transferred css js images 25 400 KB 1 files / 21 KB 5 files / 63.4 KB 18 files / 309 KB requests transferred css js images 37 994 KB 1 files / 14 KB 5 files / 68 KB 30 files / 903 KB MOBILE DESKTOP

Slide 128

Slide 128 text

github.com/dmolsen/lazyBlock

Slide 129

Slide 129 text

gist.github.com/erunyon/5073909

Slide 130

Slide 130 text

http://www.ﬂickr.com/photos/thomasstrosse/5803681875/

Slide 131

Slide 131 text

IV. In Depth - Notre Dame

Slide 132

Slide 132 text

www.ND.edu

Slide 133

Slide 133 text

Jan 2001 - Aug 2007

Slide 134

Slide 134 text

Jan 2001 - Aug 2007

Slide 135

Slide 135 text

August 2007 - July 2011

Slide 136

Slide 136 text

August 2007 - July 2011

Slide 137

Slide 137 text

August 2007 - July 2011

Slide 138

Slide 138 text

“I wanted to share my opinion of the new ND web site with you - in a word, it's awful. Quite frankly, I am unable to ﬁnd anything about the site that is positive. It is not clear why the change was made but the individual that came up with the idea should be ﬁred along with the individual(s) that approved the change. Contrary to the old site - I make every effort to avoid using the new site.”

Slide 139

Slide 139 text

36 KB 2.2 MB (1.7 MB Flash)

Slide 140

Slide 140 text

July 2011 - Feb 2012

Slide 141

Slide 141 text

Feb 2012 - March 2012

Slide 142

Slide 142 text

April 2012 - Present

Slide 143

Slide 143 text

Create an “in-depth” experience that conveys the feeling of visiting campus

Slide 144

Slide 144 text

Mobile Tablet Desktop

Slide 145

Slide 145 text

Mobile Tablet Desktop Phablet

Slide 146

Slide 146 text

UA-Parser github.com/tobie/ua-parser

Slide 147

Slide 147 text

$ua->isMobile $ua->isTablet $ua->isDesktop

Slide 148

Slide 148 text

Mobile-Detect github.com/serbanghita/Mobile-Detect

Slide 149

Slide 149 text

Long homepage is long

Slide 150

Slide 150 text

Long homepage is long x9 x11

Slide 151

Slide 151 text

Cached external feeds 35 https://github.com/erunyon/FeedCache

Slide 152

Slide 152 text

www.nd.edu/news-and-events/ www.nd.edu/about/ www.nd.edu/academics/ www.nd.edu/admissions/ www.nd.edu/faith-and-service/

Slide 153

Slide 153 text

Long homepage is long

Slide 154

Slide 154 text

Long homepage is long

Slide 155

Slide 155 text

No content

Slide 156

Slide 156 text

No content

Slide 157

Slide 157 text

2.something iPhone screens tall and 12% of the size

Slide 158

Slide 158 text

No content

Slide 159

Slide 159 text

No content

Slide 160

Slide 160 text

context features can dictate content

Slide 161

Slide 161 text

260 KB 2.4 MB 405 KB

Slide 162

Slide 162 text

But what if we didn’t?

Slide 163

Slide 163 text

One small issue with RESS

Slide 164

Slide 164 text

User-Agent: Amazon CloudFront

Slide 165

Slide 165 text

Circling back to the desktop

Slide 166

Slide 166 text

25 requests 260 KB

Slide 167

Slide 167 text

132 requests 2.4 MB 117 images

Slide 168

Slide 168 text

The What

Slide 169

Slide 169 text

Reduce the initial download for large screen visitors

Slide 170

Slide 170 text

The Why

Slide 171

Slide 171 text

132 requests 2.4 MB 117 images

Slide 172

Slide 172 text

News and Events 24 Images (646.5 KB) Viewed by 21.4% of visitors

Slide 173

Slide 173 text

About 6 Images (208.3 KB) Viewed by 8.9% of visitors

Slide 174

Slide 174 text

Academics 14 Images (406.9 KB) Viewed by 6.5% of visitors

Slide 175

Slide 175 text

Admissions 4 Images (140 KB) Viewed by 4.1% of visitors

Slide 176

Slide 176 text

Faith & Service 9 Images (328.1 KB) Viewed by 3.5% of visitors

Slide 177

Slide 177 text

Tour Flyout 26 Images (169 KB) Viewed by 0.25% of visitors

Slide 178

Slide 178 text

The How

Slide 179

Slide 179 text

Approach #1: 1x1 gif Doesn’t scale proportionally without javascript If width/height is set to “auto” in CSS, reverts to 1x1 http://codepen.io/erunyon/pen/uqypx http://www.456bereastreet.com/archive/201306/how_to_proportionally_scale_images_that_have_dimension_attributes/

Slide 180

Slide 180 text

Approach #2:

Doesn’t scale proportionally without javascript

Slide 181

Slide 181 text

Our Solution Replace as many images as possible with solid PNG’s and load actual image when necessary.

Slide 182

Slide 182 text

Set Image Properties fakeImage('/path/to/the/image.jpg', array( 'alt'=>'Description', 'width'=>420, 'height'=>310, 'resize'=>true ) );

Slide 183

Slide 183 text

Create the PNG $img = ($attr['resize'] === true) ? "http://src.sencha.io/{$prepend}{$img}" : $img ;

Slide 184

Slide 184 text

ob_start(); imagepng( imagecreatetruecolor($width, $height), NULL, 9); $imgdata = 'data:image/png;base64,'. base64_encode(ob_get_clean()) ;

Slide 185

Slide 185 text

No content

Slide 186

Slide 186 text

Load Stuff Load images as user scrolls (or exposes the image in other ways)

Slide 187

Slide 187 text

What if javascript is off?

Slide 188

Slide 188 text

Slide 189

Slide 189 text

No content

Slide 190

Slide 190 text

A Little Bit o’CSS .no-js .img-replace {display:none;}

Slide 191

Slide 191 text

No content

Slide 192

Slide 192 text

The Result 38 requests * 393 KB * (down from 130 requests and 2.4 MB) * Varies by day and browser