1Monday, 20 May 13

how we built the
responsive site
2Monday, 20 May 13

3Monday, 20 May 13

Screen Size
Capability
mobiles desktop
small big
It used to be simple ..
4Monday, 20 May 13

we built www. & m.
desktop =rich UX
mobile =fast UX
5Monday, 20 May 13

device
EXPLOSION
EXPLOSION
EXPLOSION
6Monday, 20 May 13

7Monday, 20 May 13

8Monday, 20 May 13

9Monday, 20 May 13

Screen Size
Capability
mobiles desktop
small big
b okEr N
10Monday, 20 May 13

Screen Size
Capability
Smart
phones
desktop
small big
tablets
Net books
TVse-readers
feature
phones
it’s complicated ..
Connection speed? Resolution? input method?
11Monday, 20 May 13

Even Google [is] not rich enough
to support all of the different
mobile pla:orms...
“
”Vic Gundotra, VP of engineering at Google
12Monday, 20 May 13

THe
web 13Monday, 20 May 13

client side
detection
server side
client
server WURFL
User agent
sniffing
client
server
XHR
Feature
detecGon
14Monday, 20 May 13

responsive
DESIGN
15Monday, 20 May 13

16Monday, 20 May 13

“Users don’t give a s**t
if your site is responsive”
Brad Frost
17Monday, 20 May 13

responsive’s
dirty
secrets
18Monday, 20 May 13

*
Browser support
19Monday, 20 May 13

20Monday, 20 May 13

21Monday, 20 May 13

Build a simpleweb page
22Monday, 20 May 13

speedthe core experience is fast
1 HTML document
1 image for the first story
2 CSS requests
2 branding images
1 stats web bug
7 requests 30kb~
23Monday, 20 May 13

trash
rubbish
filler
content
nonsense
crap
poppycock
garbage baloney
twaddletomfoolery
tripe
jQuery.js jQueryUI.js Uniform.js
jTextTranslate.js TopUp.js TipTip.js
FullCalendar.js grid.js Uploadify.js
Elastic.js Contactable.js MarkItUp.js
Autotab.js jExpand.js jBreadCrumb.js
Vertical-Scroll-Menu.js Compact-
News-Previewer.js Pull-Out-Content-
Panel.js Mega-Drop-Down-Menu.js
Apple-like-Retina-Effect.js Simple-
Accordion.js gMap.js Stylish-Content- 24Monday, 20 May 13

content
25Monday, 20 May 13

Mobile first
+
progressive enhancement
Crappy
26Monday, 20 May 13

27Monday, 20 May 13

We split devices into
good and bad
core
experience
enhanced
experience
28Monday, 20 May 13

good browser?it cuts the mustardtm
29Monday, 20 May 13

good browser?it cuts the mustardtm
if(
'querySelector' in document &&
'localStorage' in window &&
'addEventListener' in window
){
// party time!
}
30Monday, 20 May 13

good browser?it cuts the mustardtm
Avoids downloading large DOM libraries
Most browsers will sGll pass
Reduces dev Gme on new features
31Monday, 20 May 13

/news
Link to
weather
site
CORE EXPERIENCE
32Monday, 20 May 13

ENHANCED EXPERIENCE
33Monday, 20 May 13

YESTERDAY
7 8
BB OS5
(MANGO)
1.6
TOMORROW
11
29
69
iOS 8
TODAY
10
BB OS6+
(WEBKIT)
2.1+
iOS 6
9
34Monday, 20 May 13

35Monday, 20 May 13

*
Performance
36Monday, 20 May 13

287 requests
2.5MB transferred
37Monday, 20 May 13

requests
transferred ?
287
2.5MB
“86% sites same or
larger than desktop”
Guy Podjarny
38Monday, 20 May 13

39Monday, 20 May 13

how did it get to this ?
40Monday, 20 May 13

Performance is a feature
41Monday, 20 May 13

10SECONDS
ON GPRS
100KB
~
42Monday, 20 May 13

*
images 43Monday, 20 May 13

imagesare big
JS & CSS
362
IMAGES
492
HTML
35
44Monday, 20 May 13

<img src="big-elephant.jpg">
img {
max-width: 100%;
}
100kb
100kb
45Monday, 20 May 13

Core image
Hidden divs
46Monday, 20 May 13

imagesDynamic resizing
<!-- Core image which will be replaced -->
<img
src="http://domain.com/200/foo.jpg"
class="image-replace">
47Monday, 20 May 13

imagesDynamic resizing
<!-- Placeholder image for variable size -->
<div
data-src="http://domain.com/200/bar.jpg"
class="delayed-image-load">
</div>
48Monday, 20 May 13

16k
49Monday, 20 May 13

*
media queries
50Monday, 20 May 13

Mediaqueries
View port size rather than content element
Browsers download all style sheets*
51Monday, 20 May 13

wide.css
cssLoad what you need
core.css
tablet.css
compact
.css
stylesheetLoader.init({
'compact': '(max-width: 640px)',
'tablet' : '(min-width: 641px)',
'wide' : '(min-width: 1056px)'
});
JS
Stylesheet
loader
52Monday, 20 May 13

*
complexity
53Monday, 20 May 13

Simplify
Simplify
Simplify
54Monday, 20 May 13

Render on serverkeep it simple.
Non-­‐JS devices can view content
Keep templates in one place
JS rendering engines are slooooooow
TranslaGons are much easier on the server
55Monday, 20 May 13

Tool up!a helping hand
Curl.js
56Monday, 20 May 13

$rtl: true;
// Flipped Sass - flip
.class {
float: flip(left, right);
}
// Flipped Sass
.class {
#{$padding-left}: 8px;
}
57Monday, 20 May 13

define([
'domLibrary',
'deviceInspector'
],
function(
$,
deviceInspector
){
// module code
});
Define modules and dependencies
Asynchronous calls
Swap out implementaGons
AMD
58Monday, 20 May 13

59Monday, 20 May 13

*
Hiding 60Monday, 20 May 13

Hidden content
61Monday, 20 May 13

Loaded
content
62Monday, 20 May 13

63Monday, 20 May 13

64Monday, 20 May 13

Loadingstrategies
Include Post Batch
65Monday, 20 May 13

66Monday, 20 May 13

<a href="/news/component/top-stories-promo"
id="js-top-stories-promo"></a>
<script>
require(['loader'], function(cl) {
cl.register({
});
});
</script>
"selector":"#js-top-stories-promo",
"loadingStrategy":"batch",
"deviceGroups":["tablet","desktop"]
67Monday, 20 May 13

68Monday, 20 May 13

LAZY LoadFalse economy?
69Monday, 20 May 13

Avoid