Mobilism 2013: A story of how we built Responsive BBC News
-
Upload
john-cleveley -
Category
Technology
-
view
7.310 -
download
3
description
Transcript of Mobilism 2013: A story of how we built Responsive BBC News
![Page 1: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/1.jpg)
1Monday, 20 May 13
![Page 2: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/2.jpg)
how we built the
responsive site
2Monday, 20 May 13
![Page 3: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/3.jpg)
3Monday, 20 May 13
![Page 4: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/4.jpg)
Screen Size
Capa
bility
mobiles desktop
small big
It used to be simple ..
4Monday, 20 May 13
![Page 5: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/5.jpg)
we built www. & m.
desktop =rich UX
mobile =fast UX
5Monday, 20 May 13
![Page 6: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/6.jpg)
deviceEXP
LOSION
EXPLOSIONEXPLOSION
6Monday, 20 May 13
![Page 7: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/7.jpg)
7Monday, 20 May 13
![Page 8: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/8.jpg)
8Monday, 20 May 13
![Page 9: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/9.jpg)
9Monday, 20 May 13
![Page 10: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/10.jpg)
Screen Size
Capa
bility
mobiles desktop
small big
b okEr N
10Monday, 20 May 13
![Page 11: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/11.jpg)
Screen Size
Capa
bility Smart
phones
desktop
small big
tablets
Net books
TVse-readersfeature
phones
it’s complicated ..
Connection speed? Resolution? input method?
11Monday, 20 May 13
![Page 12: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/12.jpg)
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
![Page 13: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/13.jpg)
THeweb
13Monday, 20 May 13
![Page 14: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/14.jpg)
client side
detectionserver side
client
server WURFL
User agent sniffing
client
server
XHR
FeaturedetecGon
14Monday, 20 May 13
![Page 15: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/15.jpg)
responsiveDESIGN
15Monday, 20 May 13
![Page 16: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/16.jpg)
16Monday, 20 May 13
![Page 17: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/17.jpg)
“Users don’t give a s**t if your site is responsive”
Brad Frost
17Monday, 20 May 13
![Page 18: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/18.jpg)
responsive’sdirty
secrets
18Monday, 20 May 13
![Page 19: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/19.jpg)
*
Browser support
19Monday, 20 May 13
![Page 20: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/20.jpg)
20Monday, 20 May 13
![Page 21: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/21.jpg)
21Monday, 20 May 13
![Page 22: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/22.jpg)
Build a simpleweb page
22Monday, 20 May 13
![Page 23: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/23.jpg)
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
![Page 24: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/24.jpg)
trashrubbish
filler
conten
tnonsense
crap
poppycock
garbage baloneytw
addle
tom
foolery
tripejQuery.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-Slider.js jQuery-Confirm-Dialog.js
24Monday, 20 May 13
![Page 25: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/25.jpg)
conten
t25Monday, 20 May 13
![Page 26: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/26.jpg)
Mobile first +
progressive enhancement
Crappy
26Monday, 20 May 13
![Page 27: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/27.jpg)
27Monday, 20 May 13
![Page 28: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/28.jpg)
We split devices into good and bad
coreexperience
enhancedexperience
28Monday, 20 May 13
![Page 29: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/29.jpg)
good browser?it cuts the mustardtm
29Monday, 20 May 13
![Page 30: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/30.jpg)
good browser?it cuts the mustardtm
if( 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window){ // party time!}
30Monday, 20 May 13
![Page 31: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/31.jpg)
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
![Page 32: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/32.jpg)
/news
Link to weather
site
CORE EXPERIENCE
32Monday, 20 May 13
![Page 33: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/33.jpg)
ENHANCED EXPERIENCE
33Monday, 20 May 13
![Page 34: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/34.jpg)
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
![Page 35: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/35.jpg)
35Monday, 20 May 13
![Page 36: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/36.jpg)
*
Performance36Monday, 20 May 13
![Page 37: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/37.jpg)
287 requests2.5MB transferred
37Monday, 20 May 13
![Page 38: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/38.jpg)
requests transferred ?
2872.5MB
“86% sites same or larger than desktop”
Guy Podjarny
38Monday, 20 May 13
![Page 39: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/39.jpg)
39Monday, 20 May 13
![Page 40: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/40.jpg)
how did it get to this ?
40Monday, 20 May 13
![Page 41: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/41.jpg)
Performance is a feature41Monday, 20 May 13
![Page 42: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/42.jpg)
10SECONDS ON GPRS
100KB~42Monday, 20 May 13
![Page 43: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/43.jpg)
*
images43Monday, 20 May 13
![Page 44: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/44.jpg)
images are big
JS & CSS362
IMAGES492
HTML35
44Monday, 20 May 13
![Page 45: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/45.jpg)
<img src="big-elephant.jpg">
img { max-width: 100%;}
100kb
100kb
45Monday, 20 May 13
![Page 46: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/46.jpg)
Core image
Hidden divs
46Monday, 20 May 13
![Page 47: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/47.jpg)
images Dynamic resizing
<!-- Core image which will be replaced --><img src="http://domain.com/200/foo.jpg" class="image-replace">
47Monday, 20 May 13
![Page 48: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/48.jpg)
images Dynamic resizing
<!-- Placeholder image for variable size --><div data-src="http://domain.com/200/bar.jpg" class="delayed-image-load"></div>
48Monday, 20 May 13
![Page 49: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/49.jpg)
16k
49Monday, 20 May 13
![Page 50: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/50.jpg)
*
media queries50Monday, 20 May 13
![Page 51: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/51.jpg)
Mediaqueries
View port size rather than content element
Browsers download all style sheets*
51Monday, 20 May 13
![Page 52: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/52.jpg)
wide.css
cssLoad what you need
core.csstablet.css
compact.css
stylesheetLoader.init({ 'compact': '(max-width: 640px)', 'tablet' : '(min-width: 641px)', 'wide' : '(min-width: 1056px)'});
JSStylesheet
loader
52Monday, 20 May 13
![Page 53: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/53.jpg)
*
complexity53Monday, 20 May 13
![Page 54: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/54.jpg)
Simplify Simplify Simplify
54Monday, 20 May 13
![Page 55: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/55.jpg)
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
![Page 56: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/56.jpg)
Tool up!a helping hand
Curl.js
56Monday, 20 May 13
![Page 57: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/57.jpg)
$rtl: true;
// Flipped Sass - flip.class { float: flip(left, right);}
// Flipped Sass.class { #{$padding-left}: 8px;}
57Monday, 20 May 13
![Page 58: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/58.jpg)
define([ 'domLibrary', 'deviceInspector' ], function( $, deviceInspector ){ // module code });
Define modules and dependencies
Asynchronous calls
Swap out implementaGons
AMD
58Monday, 20 May 13
![Page 59: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/59.jpg)
59Monday, 20 May 13
![Page 60: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/60.jpg)
*
Hiding60Monday, 20 May 13
![Page 61: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/61.jpg)
Hidden content
61Monday, 20 May 13
![Page 62: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/62.jpg)
Loaded content
62Monday, 20 May 13
![Page 63: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/63.jpg)
63Monday, 20 May 13
![Page 64: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/64.jpg)
64Monday, 20 May 13
![Page 65: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/65.jpg)
Loadingstrategies
Include Post Batch
65Monday, 20 May 13
![Page 66: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/66.jpg)
66Monday, 20 May 13
![Page 67: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/67.jpg)
<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
![Page 68: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/68.jpg)
68Monday, 20 May 13
![Page 69: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/69.jpg)
LAZY LoadFalse economy?
69Monday, 20 May 13
![Page 70: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/70.jpg)
Avoid����������� ������������������ waking����������� ������������������ the����������� ������������������ radio!
70Monday, 20 May 13
![Page 71: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/71.jpg)
*
testing71Monday, 20 May 13
![Page 72: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/72.jpg)
Manual tes<ng72Monday, 20 May 13
![Page 73: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/73.jpg)
Automated tests
PhantomJS -‐ fast
WebDriver -‐ real
73Monday, 20 May 13
![Page 74: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/74.jpg)
UI regression tests74Monday, 20 May 13
![Page 75: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/75.jpg)
page.viewportSize = { width: 320, height: 5000 };
compare -fuzz 20% -highlight-color blue #{base} #{compare} #{output}
page.open(url, function() { page.render(image_name);});
75Monday, 20 May 13
![Page 76: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/76.jpg)
Perf testsHttp Archive (HAR)
phantomjs netsniff.js "http://foo.com" > foo.har
https://code.google.com/p/harstorage/
76Monday, 20 May 13
![Page 77: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/77.jpg)
Perf testsHttp Archive (HAR)
DOH!
77Monday, 20 May 13
![Page 78: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/78.jpg)
Protec<ng the servers
78Monday, 20 May 13
![Page 79: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/79.jpg)
We Cache nearly everything
79Monday, 20 May 13
![Page 80: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/80.jpg)
Front-‐end
contextannotations
Load Balancer
Service
Varnish
Cache-C
ontrol:
max-ag
e=12
0
80Monday, 20 May 13
![Page 81: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/81.jpg)
varnishcontext aware
Some personalisaGons
Country of user
What device they are on
81Monday, 20 May 13
![Page 82: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/82.jpg)
varnishhit / miss ratios
doh!82Monday, 20 May 13
![Page 83: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/83.jpg)
100m
80m
60m
40m
20m
0mJan 2011AD Apr 2011AD
CDNFTW!
losecontext
83Monday, 20 May 13
![Page 84: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/84.jpg)
84Monday, 20 May 13
![Page 85: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/85.jpg)
remember
the little guy85Monday, 20 May 13
![Page 86: Mobilism 2013: A story of how we built Responsive BBC News](https://reader034.fdocuments.net/reader034/viewer/2022051609/547b256eb4af9f306c8b47bc/html5/thumbnails/86.jpg)
we’re always looking for great talent to join us, get in touch!
@jcleveley
86Monday, 20 May 13