Introduction to Responsive Web Design at the BBC - 2014 - Lancaster University

Slides from a presentation I gave at Lancaster University, providing an Introduction to RWD at the BBC

Transcript

1. Responsive Web Design BBC Sport / Live 5th December 2014 Lancaster University
2. Shaun Bent Front End Developer Specialising in CSS for large sites @shaunbent
3. SPORT
4. LIVE
5. Building for the Web What Responsive Web Design? How Responsive Web Design? Responsive Web Design at the BBC Responsive Web Design
6. “The web as a platform is relatively new and we’re still trying to getting to grips with it” Responsive Web Design
7. Building for the Web
8. The Digital Landscape
9. Fixed Photoshop Canvas 960px
10. .site-wrapper { width: 960px; margin: 0 auto; } Fixed CSS Canvas This puts it in the middle
11. “Building for the web was relatively straight forward in terms of supporting different devices”
16. We need to design a better experience for our users on mobile devices
17. Native Apps vs Mobile Site
18. Native Apps Native Apps vs Mobile Site
19. Native Apps
20. Native Apps
21. PROS: Performance Experience Features Customisation Native Apps
22. CONS: Development Availability Compatibility Distribution Native Apps
23. Mobile Websites Native Apps vs Mobile Site
24. Mobile Websites
25. PROS: Development Audience Reach Mobile Websites
26. CONS: Experience Features Customisation Duplication Mobile Websites
27. A case of one or the other? Native Apps vs Mobile Site
28. They both solve different problems really Native Apps vs Mobile Site
29. We had a direction Native Apps vs Mobile Site
31. Source: http://bit.ly/1yldcjv
32. 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 Mac Sales vs iOS Sales Source: http://bit.ly/1yld8Ah
33. This has resulted in a massive shift in how people use the Internet Cultural Change
34. 0% 25% 50% 75% 100% 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 Desktop Non-Desktop iPhone Launched Huge Milestone Desktop vs Non-Desktop Traffic iPad Launched
35. Fixed Photoshop Canvas 960px
36. Fixed Photoshop Canvas 960px 320px
37. Source: http://bit.ly/1yldcjv
38. BBC Sport Viewports
39. Our concept of the fixed canvas is broken Fixed Photoshop Canvas
40. “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.” Source: http://bit.ly/1yldEOC
41. Source: http://bit.ly/1yldEOC
42. The web is a flexible medium by default A Dao of Web Design
43. Embrace the flexibility of the web A Dao of Web Design
44. Source: http://bit.ly/1yldMOn
45. Source: http://bit.ly/1ylegUF
46. “The presentation that launched a thousand redesigns.” A Dao of Flexibility
47. What is Responsive Web Design?
48. A device agnostic, single codebase approach to developing websites Responsive Web Design
49. Change the layout of a page based on the size and capabilities of the device Responsive Web Design
50. Responsive Web Design Desktop
51. Responsive Web Design Desktop Tablet
52. Responsive Web Design Desktop Tablet Mobile
53. Designed around three main principles Responsive Web Design
54. Fluid Grids Fluid Images Media Queries Responsive Web Design
55. Responsive web design has evolved a lot since its conception Responsive Web Design
56. The core principles are still as relevant but they shouldn’t be the only principles we follow Responsive Web Design
57. We shouldn’t be making important design decisions based purely on a single factor Responsive Web Design
58. Device Capabilities Connection Speed Responsive Web Design
59. Responsive Web Design Source: http://bit.ly/1vbcSnP
60. Device Capabilities Connection Speed Environment Responsive Web Design
61. A considered approach to how we implement Responsive Web Design is needed Responsive Web Design
62. Mobile First Responsive Web Design
63. Source: http://bit.ly/1yADC0X
64. Growth Focus Capabilities Mobile First
65. A natural evolution Mobile First
66. Start simple, then work upwards Mobile First
67. The user experience will naturally be more focused Mobile First
68. Short Break Anyone?!?
69. Responsive Web Design
70. Fluid Grids Fluid Images Media Queries Responsive Web Design
71. Fluid Grids Responsive Web Design
72. “…a structure comprising a series of horizontal and vertical lines, used to arrange content” Fluid Grids
74. Columns
75. Gutters
76. Margins
80. 70px 20px
81. 750px 250px 75% 25% <div> <div>
82. Fluid Grids
83. (Target / Context) x 100 = Result 960px
84. (Target / 960) x 100 = Result 720px 220px 20px
85. (720 / 960) x 100 = 75% (20 / 960) x 100 = 2.0833333% (220 / 960) x 100 = 22.916666667%
86. 75% 22.916666667% 2.0833333%
87. Flexible Scalable Proportion Fluid Grids
88. Fluid Images Responsive Web Design
89. Making images flexible is really easy Fluid Images
90. <img src=“kittens.jpg” width=“500” height=“300” alt=“Lovely Kittens” /> Fluid Images
91. <img src=“kittens.jpg” alt=“Lovely Kittens” /> Fluid Images
92. img { max-width: 100%; } Fluid Images
93. Demo Fluid Images
94. “Performance is a fundamental component of the user experience” Fluid Images Source: http://bit.ly/1yB0hKs
95. Fluid Images “75% of mobile users won’t wait longer than 5 seconds for a page to load” Source: http://bit.ly/1yB1cKU
96. Fluid Images “Amazon reduced load time by 100ms and saw a 1% increase in sales” Source: http://bit.ly/1yB1cKU
97. Fluid Images “Firefox reduced load time by 2.2s and saw a 15.4% increase in downloads” Source: http://bit.ly/1yB1CAU
98. Fluid Images “If Google increased load time by 500ms they get 25% fewer searches” Source: http://bit.ly/1yB1CAU
99. “Only download what you need” Fluid Images Source: http://bit.ly/1yB3Ikg
101. BBC Sport Sochi Index File Type Total HTML 1 CSS 6 Javascript 11 Fonts 3 Images 130 Total 151
102. BBC Sport Sochi Index
103. BBC Sport Sochi Index
104. BBC Sport Sochi Index
105. ‘Lazy Load’ hidden images BBC Sport Sochi Index
106. 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
107. Media Queries Responsive Web Design
108. Conditional statements in CSS Media Queries
109. Width (Min & Max) Height (Min & Max) Orientation Resolution Colour Media Queries
110. Hover Touch Luminosity Connection Speed* Script Media Queries
111. Media Queries .foo { color: red; } @media (min-width: 700px) { .foo { color: blue; } }
112. Media Queries .foo { color: red; } @media (max-width: 700px) { .foo { color: blue; } }
113. Demo Media Queries
114. When do I use a ‘Media Query’? Media Queries
115. Breakpoints Major & Minor Device Specific Breakpoints Media Queries
116. Source: http://bit.ly/1yldcjv
117. Media Queries “Apply breakpoints at the limits of a design, not a device” Source: GEL Responsive Foundation
118. Responsive Web Design
 at the BBC
119. NEWS SPORT LIVE WEATHER SEARCH HOMEPAGE ABOUT THE BBC TRAVEL MUSIC Bitesize ARTS FOOD NEWSBEAT PROGRAMMES
120. GEL
121. Global Experience Language
128. GEL Breakpoints RWD at the BBC
129. XSmall (240px - 399px) Small (400px - 599px) Medium (600px - 899px) Large (900px+) GEL Breakpoints
130. Demo GEL Breakpoints
131. “Add component breakpoints where the content demands it” Source: GEL Responsive Foundation GEL Breakpoints
132. Source: GEL Responsive Foundation GEL Breakpoints
133. GEL Responsive Grid RWD at the BBC
134. 12 & 24 Columns Fluid Columns Fixed Gutters & Margins Changes across breakpoints GEL Responsive Grid
135. BRAND Margins: 8px Gutters: 8px Group 1 (240px - 399px) GEL Responsive Grid
136. Group 2 (400px - 599px) GEL Responsive Grid BRAND Margins: 16px Gutters: 8px
137. Group 3 (600px - 1008px) GEL Responsive Grid BRAND Margins: 16px Gutters: 16px
138. Implementing Responsive Design at the BBC RWD at the BBC
139. RWD at the BBC “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
140. Capabilities Upgrade cycle Audience expectation RWD at the BBC
141. 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? RWD at the BBC
142. Two-tiered responsive solution RWD at the BBC
143. Core Experience RWD at the BBC
144. Audience Speed Core Experience
145. Core Experience
146. Enhanced Experience RWD at the BBC
147. Responsive Layout Technology Experience Rich Media Enhanced Experience
148. Enhanced Experience
149. Enhanced Experience
150. Enhanced Experience
151. Enhanced Experience
152. Who gets what? RWD at the BBC
153. Cuts the Mustard RWD at the BBC
154. if(‘querySelector’ in document && ‘localStorage’ in window && ‘addEventListener’ in window) { // Congrats, you’ve cut the mustard } RWD at the BBC
155. Development Testing Speed Technology Support RWD at the BBC
156. 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
157. 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
158. Thank You Any Questions?
159. Digital Media Graduate Scheme http://bbc.in/1oTchm0
160. Come and join us!