Scale and adapt: A story of how we built Responsive BBC News Life used to be easy. We created sites to work on a few browsers and when we had time we asked the new guy to build a half baked mobile version. Then the device explosion ruined our cozy happy dev life. My talk will discuss how BBC News met this challenge at scale. How we support as many devices as possible using responsive design Why performance is key to our success and how we managed to keep the site lean How we scale to serve BBC News to the masses What tools we use to help us along the way John Cleveley John is Tech Lead at BBC News and currently migrating the News site to a dynamic platform. Concentrating on building features mobile first using responsive web design all the way up to desktop. BBC News has a truly global audience, delivering some of the only unbiased journalism available in some parts of the world. This has reinforced his passion for device support and producing sites that absolutely fly. Loves canoeing, ale and Radiohead - preferably all at the same time :) Find me here @jcleveley.

1. 1Monday, 20 May 13

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

3. 3Monday, 20 May 13

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

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

6. device
EXPLOSION
EXPLOSION
EXPLOSION
6Monday, 20 May 13

7. 7Monday, 20 May 13

8. 8Monday, 20 May 13

9. 9Monday, 20 May 13

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

11. 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

12. 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

13. THe
web 13Monday, 20 May 13

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

15. responsive
DESIGN
15Monday, 20 May 13

16. 16Monday, 20 May 13

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

18. responsive’s
dirty
secrets
18Monday, 20 May 13

19. *
Browser support
19Monday, 20 May 13

20. 20Monday, 20 May 13

21. 21Monday, 20 May 13

22. Build a simpleweb page
22Monday, 20 May 13

23. 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

24. 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

25. content
25Monday, 20 May 13

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

27. 27Monday, 20 May 13

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

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

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

31. 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

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

33. ENHANCED EXPERIENCE
33Monday, 20 May 13

34. 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

35. 35Monday, 20 May 13

36. *
Performance
36Monday, 20 May 13

37. 287 requests
2.5MB transferred
37Monday, 20 May 13

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

39. 39Monday, 20 May 13

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

41. Performance is a feature
41Monday, 20 May 13

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

43. *
images 43Monday, 20 May 13

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

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

46. Core image
Hidden divs
46Monday, 20 May 13

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

48. 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

49. 16k
49Monday, 20 May 13

50. *
media queries
50Monday, 20 May 13

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

52. 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

53. *
complexity
53Monday, 20 May 13

54. Simplify
Simplify
Simplify
54Monday, 20 May 13

55. 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

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

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

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

59. 59Monday, 20 May 13

60. *
Hiding 60Monday, 20 May 13

61. Hidden content
61Monday, 20 May 13

62. Loaded
content
62Monday, 20 May 13

63. 63Monday, 20 May 13

64. 64Monday, 20 May 13

65. Loadingstrategies
Include Post Batch
65Monday, 20 May 13

66. 66Monday, 20 May 13

67. <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

68. 68Monday, 20 May 13

69. LAZY LoadFalse economy?
69Monday, 20 May 13

70. Avoid

71. waking

72.
the

73. radio!
70Monday, 20 May 13

74. *
testing
71Monday, 20 May 13

75. Manual tesng
72Monday, 20 May 13

76. Automated tests
PhantomJS -­‐ fast
WebDriver -­‐ real
73Monday, 20 May 13

77. UI regression tests
74Monday, 20 May 13

78. 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

79. Perf testsHttp Archive (HAR)
phantomjs netsniff.js
http://foo.com foo.har
https://code.google.com/
p/harstorage/
76Monday, 20 May 13

80. Perf testsHttp Archive (HAR)
DOH!
77Monday, 20 May 13

81. Protecng the servers
78Monday, 20 May 13

82. We Cache nearly
everything
79Monday, 20 May 13

83. Front-­‐end
context
annotations
Load
Balancer
Service
Varnish
Cache-Control:
max-age=120
80Monday, 20 May 13

84. varnishcontext aware
Some personalisaGons
Country of user
What device they are on
81Monday, 20 May 13

85. varnishhit / miss ratios
doh! 82Monday, 20 May 13

86. 100m
80m
60m
40m
20m
0m
Jan 2011AD Apr 2011AD
CDN
FTW!
lose
context
83Monday, 20 May 13

87. 84Monday, 20 May 13

88. remember
the little guy
85Monday, 20 May 13

89. we’re always
looking for great
talent to join us,
get in touch!
@jcleveley
86Monday, 20 May 13