Responsive Web Design at the BBC - 2015 - Lancaster University

Slides from my 2015 - Responsive Design at the BBC lecture at Lancaster University.

Transcript

1. Responsive Web Design
2. Shaun Bent Front End Developer Specialising in CSS for large sites @shaunbent
3. SPORT
4. LIVE
7. A short history lesson What Responsive Web Design? How Responsive Web Design? Responsive Web Design at the BBC
8. “The web as a platform is relatively new and we’re still trying to getting to grips with it”
9. A short history lesson
11. 960px
12. .site-wrapper { width: 960px; margin: 0 auto; } This puts it in the middle
13. “Building for the web was relatively straight forward”
16. We need to design a better experience for our users on mobile devices
17. Native Apps vs Mobile Site
18. A case of one or the other?
19. They both solve different problems really
20. This gave us direction
22. Source: http://bit.ly/1yldcjv
23. Units sold 27 million 53 million 80 million 107 million 133 million 160 million Year’s since launch 1 4 7 10 13 16 19 22 25 28 Mac Devices iOS Devices Outrageous Adoption Source: http://bit.ly/1yld8Ah
28. This has fundamentally changed how people use the Internet
29. 0% 25% 50% 75% 100% 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 Desktop Non-Desktop iPhone Launched Huge Milestone iPad Launched
30. 960px
31. 960px 320px
32. Source: http://bit.ly/1yldcjv
33. Our concept of the fixed canvas is broken
34. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility.” John Allsop Source: http://bit.ly/1yldEOC
35. Source: http://bit.ly/1yldEOC
36. The web is a flexible medium by default
37. Embrace the inherit flexibility of the web
38. Source: http://bit.ly/1yldMOn
39. Source: http://bit.ly/1ylegUF
40. “The presentation that launched a thousand redesigns”
41. What is Responsive Web Design?
42. A device agnostic, single codebase approach to developing websites
43. Change the design of a page based on the size and capabilities of the device
44. Desktop
45. Desktop Tablet
46. Desktop Tablet Mobile
47. The 3 principles of RWD
48. Fluid Grids Fluid Images Media Queries
49. RWD has evolved a lot
50. The core principles are still as relevant but they shouldn’t be the only principles we follow
51. We shouldn’t be making important design decisions based purely on a single factor
52. Source: http://bit.ly/1vbcSnP
53. A considered approach to how we implement RWD is needed
54. Mobile First
55. Source: http://bit.ly/1yADC0X
56. Growth Focus Capabilities
57. A natural evolution
58. Short Break Anyone?!?
59. Responsive Web Design
60. Fluid Grids Fluid Images Media Queries
61. Fluid Grids
62. “…a structure comprising a series of horizontal and vertical lines, used to arrange content”
64. Columns
65. Gutters
66. Margins
70. 70px 20px
71. 750px 250px 75% 25% <div> <div>
72. Fluid Grids
73. (Target / Context) x 100 = Result 960px
74. (Target / 960) x 100 = Result 720px 220px 20px
75. (720 / 960) x 100 = 75% (20 / 960) x 100 = 2.0833333% (220 / 960) x 100 = 22.916666667%
76. 75% 22.916666667% 2.0833333%
77. Flexible Scalable Proportion
78. Fluid Images
79. Making images flexible is really easy
80. <img src=“kittens.jpg” width=“500” height=“300” alt=“Lovely Kittens” />
81. <img src=“kittens.jpg” alt=“Lovely Kittens” />
82. img { max-width: 100%; }
83. Demo
84. “Performance is a fundamental component of the user experience” Source: http://bit.ly/1yB0hKs
85. “75% of mobile users won’t wait longer than 5 seconds for a page to load” Source: http://bit.ly/1yB1cKU
86. “Amazon reduced load time by 100ms and saw a 1% increase in sales” Source: http://bit.ly/1yB1cKU
87. “Firefox reduced load time by 2.2s and saw a 15.4% increase in downloads” Source: http://bit.ly/1yB1CAU
88. “If Google increased load time by 500ms they get 25% fewer searches” Source: http://bit.ly/1yB1CAU
89. “Only download what you need” Source: http://bit.ly/1yB3Ikg
91. BBC Sport Sochi Index File Type Total HTML 1 CSS 6 Javascript 11 Fonts 3 Images 130 Total 151
92. BBC Sport Sochi Index
93. BBC Sport Sochi Index
94. BBC Sport Sochi Index
95. ‘Lazy Load’ hidden images
96. BBC Sport Sochi Index File Type Total HTML 1 CSS 6 Javascript 11 Fonts 3 Images 130 Total 151 File Type Total HTML 1 CSS 6 Javascript 11 Fonts 3 Images 46 Total 67 Before After
97. Media Queries
98. Conditional statements in CSS
99. Width (Min & Max) Height (Min & Max) Orientation Resolution Colour
100. Hover Touch Luminosity Connection Speed* Script
101. .foo { color: red; } @media (min-width: 700px) { .foo { color: blue; } }
102. .foo { color: red; } @media (max-width: 700px) { .foo { color: blue; } }
103. Demo
104. When do I use a ‘Media Query’?
105. Breakpoints Major & Minor Device Specific Breakpoints
106. Source: http://bit.ly/1yldcjv
107. “Apply breakpoints at the limits of a design, not a device” Source: GEL Responsive Foundation
108. RWD @ the BBC
110. HOMEPAGE SEARCH TV TRAVEL LIVE ACADEMY FOOD
112. Responsive Design Principles www.bbc.co.uk/gel/guidelines/how-to-design-for-the-web
113. 1. Responsive Web Design
114. 2. Consider the context At home At the park On the train
115. 3. Accessible content for everyone
116. 4. Separate content from form 1 1 2 3 2 3
117. 5. Design for minimal first Enhanced Experience Core Experience
118. 6. A flexible grid for a 
 flexible experience Main article headline Article headline Article headline on a story page Story subtitle Ghost columns
119. Responsive Grid
120. 12 & 24 Columns Fluid Columns Fixed Gutters & Margins Changes across breakpoints
121. Group 1 12 columns at 8.333% 8px gutter 8px margin Viewport range: 0px - 399px
122. 12 columns at 8.333% 8px gutter 16px margin Viewport range: 400px - 599px Group 2
123. 12 columns at 8.333% 16px gutter 16px margin Viewport range: 600px - 1007px Group 3
124. Group 4 12 columns at 8.333% 16px gutter 16px margin Viewport range: 1008px max.
125. 7. Apply breakpoints at the limits 
 of a design, not a device. Article header Article header Article header Article header Images would become to large Component-level breakpoint Global Breakpoints 0 1008+
126. xs - 240px - 399px s - 400px - 599px m - 600px - 899px l - 900px - 1007px xl - 1008px - 1279px xxl - 1280px+
127. 8. Behaviours and interactions should be native to touch
128. 9. Design for modularity Article headline on a story page Article headline on a live event page
129. 10. Strive for consistency across resolutions
130. Implementing RWD at the BBC
131. “We have ~80 significant browsers/operating system combinations regularly using our application across the globe and a long tail of hundreds more.” Source: http://bit.ly/1yBcS03
132. Capabilities Upgrade cycle Audience expectation
133. How do we continue to support the vast number of older and less capable devices while delivering a world class experience tailored to smart phones and larger resolutions?
134. Two-tiered responsive solution
135. Core Experience
136. Audience Speed
137. Core Experience
138. Enhanced Experience
139. Responsive Layout Technology Experience Rich Media
140. Enhanced Experience
141. Enhanced Experience
142. Enhanced Experience
143. Enhanced Experience
144. So, who gets what?
145. Cut the Mustard Source: http://bit.ly/1yBcS03
146. if(‘querySelector’ in document && ‘localStorage’ in window && ‘addEventListener’ in window) { // Congrats, you’ve cut the mustard }
147. Development Testing Speed Technology Support
148. Core Experience (Simple Layout, Fast, All Browsers) 8 7 9 10+ iOS 6 iOS 7+ 1.6 2.1+ BB OS5
 (MANGO) BB OS5
 (WEBKIT) Opera Mobile
149. Core Experience (Simple Layout, Fast, All Browsers) 7 1.6 BB OS5
 (MANGO) Enhanced Experience (Complex Layout, Functional, Modern Browsers) 8 9 10+ iOS 6 iOS 7+ 2.1+ BB OS5
 (WEBKIT) Opera Mobile
150. Thank You Any Questions?
151. Digital Media Graduate Scheme http://bbc.in/1oTchm0