Moving Swiftly: The story of how BBC News fell in love with Responsive Web Design

Slide 1

Slide 1 text

TOM MASLEN

Slide 2

Slide 2 text

PART 1 1997: A TERRIBLE YEAR FOR HUMANITY

Slide 3

Slide 3 text

HTML 48KB 9 IMAGES 46KB HOWEVER: BBC NEWS WAS RELEASED IN 1997

Slide 4

Slide 4 text

THIS IS VERY DIFFERENT TO NOW

Slide 5

Slide 5 text

JS & CSS 362 IMAGES 492 HTML 35 153 HTTP REQUESTS 889kb DOWNLOADED

Slide 6

Slide 6 text

1997 SOLUTION: 94KB DOWNLOAD < 10 HTTP REQUESTS 2012 PROBLEM: SLOW INTERNET CONNECTION PROBLEM: MANY BROWSERS TO SUPPORT SOLUTION: 889KB DOWNLOAD 153 HTTP REQUESTS

Slide 7

Slide 7 text

Chrome Safari Opera IE9 IE10 IE8 IE7 IE6 Firefox CAPABILITIES LEGACY MODERN W3C STANDARDS COMPLIANT LESS BUGGY FASTER RENDERING ENGINES HTML5 & CSS3 TODAY WE HAVE TO SUPPORT MANY BROWSERS

Slide 8

Slide 8 text

MAKING WEBPAGES IS LIKE HAVING A PARTY IE7 FIREFOX OPERA IE9 SAFARI IE8 CHROME GOOD GUESTS BAD GUESTS

Slide 9

Slide 9 text

MAKING WEBPAGES IS LIKE HAVING A PARTY IE7 FIREFOX OPERA IE9 SAFARI IE8 JQUERY MASK CHROME JQUERY MASK WE MAKE THEM BEHAVE USING MANY PLUGINS, E.G. JQUERY

Slide 10

Slide 10 text

WE SUPPORT MANY DEVICES USING MANY PRODUCTS OTHER ISSUES IN 2012:

Slide 11

Slide 11 text

DESKTOP WEBSITE

Slide 12

Slide 12 text

MOBILE WEBSITE

Slide 13

Slide 13 text

IPHONE APP

Slide 14

Slide 14 text

IPAD APP

Slide 15

Slide 15 text

ANDROID PHONE APP

Slide 16

Slide 16 text

ANDROID TABLET APP

Slide 17

Slide 17 text

BBC NEWS ALSO HAS FOREIGN LANGUAGE SITES: RUSSIAN

Slide 18

Slide 18 text

LEFT TO RIGHT LANGUAGE SUPPORT: ARABIC

Slide 19

Slide 19 text

MANY, MANY SITES

Slide 20

Slide 20 text

EVEN KLINGON (JOKE)

Slide 21

Slide 21 text

BROADBAND GPRS EDGE 3G 4G DEVICE EXPLOSION OTHER ISSUES IN 2012: DIVERSE CONNECTION SPEEDS

Slide 22

Slide 22 text

SCREEN SIZE CAPABILITY MOBILE DESKTOP SCREEN SIZE EQUALS CAPABILITY THE OLD MODEL:

Slide 23

Slide 23 text

SCREEN SIZE CAPABILITY MOBILE DESKTOP BROKEN SCREEN SIZE EQUALS CAPABILITY THE OLD MODEL:

Slide 24

Slide 24 text

100m 80m 60m 40m 20m 0m Jan 2011AD Apr 2011AD OTHER ISSUES IN 2012: AVG TRAFFIC: 20M USERS PER DAY 80M USERS IN ONE DAY

Slide 25

Slide 25 text

BBC NEWS MOVED TO C.D.N. DURING JAPANESE TSUNAMI

Slide 26

Slide 26 text

INTERNET PROVIDER ALL RESPONSES ARE THE SAME CACHED CDN THE C.D.N. PROBLEM

Slide 27

Slide 27 text

1997 SOLUTION: 94KB DOWNLOAD < 10 HTTP REQUESTS 2012 PROBLEM: SLOW INTERNET CONNECTION PROBLEM: MANY BROWSERS TO SUPPORT SOLUTION: 889KB DOWNLOAD 153 HTTP REQUESTS NOT ACTUALLY TRUE:

Slide 28

Slide 28 text

IMPOSSIBLE SITUATION MANY BROWSERS TO SUPPORT UNLIMITED NUMBER OF DEVICES VARIABLE DOWNLOAD SPEEDS HUGE RANDOM SPIKES OF TRAFFIC

Slide 29

Slide 29 text

PART 2 SOLVING YOUR GIANT MONKEY PROBLEM

Slide 30

Slide 30 text

SCREEN SIZE CAPABILITY MOBILE DESKTOP SCREEN SIZE EQUALS CAPABILITY BROKEN

Slide 31

Slide 31 text

WHAT IS MOBILE?

Slide 32

Slide 32 text

THIS IS MOBILE

Slide 33

Slide 33 text

THIS IS MOBILE

Slide 34

Slide 34 text

THIS IS NOT MOBILE!

Slide 35

Slide 35 text

MOBILE IS THE JOURNEY

Slide 36

Slide 36 text

2012 MOBILE & TABLET ONLY RESPONSIVE WEBSITE

Slide 37

Slide 37 text

PROGRESSIVE ENHANCEMENT FLUID LAYOUTS #rwd TAKING PERFORMANCE SERIOUSLY + + =

Slide 38

Slide 38 text

PROGRESSIVE ENHANCEMENT ELEMENTS OF #rwd

Slide 39

Slide 39 text

CORE EXPERIENCE All browsers Simple layout XHTML + CSS2-ish Fast Modern browsers only Complex layout HTML5, CSS3 & JS Functional JAVASCRIPT EXPERIENCE PROGRESSIVE ENHANCEMENT

Slide 40

Slide 40 text

if ( ) { JAVASCRIPT 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window WE CHECK FOR THESE CAPABILITIES TO DETERMINE IF BROWSER IS WORTH GIVING JAVASCRIPT TO

Slide 41

Slide 41 text

if ( ) { JAVASCRIPT 'querySelector' in document && 'localStorage' in window && 'addEventListener' in window WE GAVE IT A NAME:

Slide 42

Slide 42 text

MAKING WEBPAGES IS LIKE HAVING A PARTY JS EXPERIENCE CHROME IE9 SAFARI OPERA FIREFOX IE7 IE8 EVERYONE IS INVITED...

Slide 43

Slide 43 text

MAKING WEBPAGES IS LIKE HAVING A PARTY JS EXPERIENCE CHROME IE9 SAFARI OPERA FIREFOX IE7 IE8 BUT ONLY NICE GUESTS CAN TALK TO NATALIE

Slide 44

Slide 44 text

Link to nav at bottom of page CORE EXPERIENCE

Slide 45

Slide 45 text

JAVASCRIPT EXPERIENCE

Slide 46

Slide 46 text

JAVASCRIPT EXPERIENCE

Slide 47

Slide 47 text

CORE EXPERIENCE JAVASCRIPT EXPERIENCE DEVELOPMENT CONCEPT:

Slide 48

Slide 48 text

Doesn’t cut the mustard Cuts the mustard IE6, IE7, IE8 IE9, IE10 Firefox 3.5 and up Opera 10.5 and up Chrome 4 and up Safari 4 and up BBOS4, BBOS5 Opera Mini Mobile IE9 and below BBOS 6 and up Mobile Firefox Opera Mobile Mobile Safari Mobile IE9.5 Android 2.1 and up

Slide 49

Slide 49 text

#rwd REQUIREMENT: SUPPORT BROAD RANGE OF DEVICES

Slide 50

Slide 50 text

QUESTION: HOW DO YOU GIVE THE SAME CONTENT TO DEVICES WITH MASSIVELY DIFFERENT CAPABILITIES? ANSWER: YOU DON’T

Slide 51

Slide 51 text

DEVELOPMENT CONCEPT: AJAX CONTENT IN TO ENHANCE PAGE

Slide 52

Slide 52 text

/news Link to weather site CORE EXPERIENCE

Slide 53

Slide 53 text

JAVASCRIPT EXPERIENCE ENTER ZIP CODE OR (IF SUPPORT) USE GEOLOCATION WEATHER LINK REPLACED WITH WEATHER WIDGET BY JAVASCRIPT

Slide 54

Slide 54 text

JAVASCRIPT EXPERIENCE WEATHER LINK REPLACED WITH WEATHER WIDGET BY JAVASCRIPT PERSONALISED DATA PERSISTS WHEN YOU COME BACK

Slide 55

Slide 55 text

/news Link to /news/popular/read /news/popular/read CORE EXPERIENCE

Slide 56

Slide 56 text

JAVASCRIPT EXPERIENCE

Slide 57

Slide 57 text

JAVASCRIPT EXPERIENCE

Slide 58

Slide 58 text

TAKING PERFORMANCE SERIOUSLY ELEMENTS OF #rwd

Slide 59

Slide 59 text

IE8 MAKING WEBPAGES IS LIKE HAVING A PARTY WE WANT GUESTS TO HAVE A GOOD TIME

Slide 60

Slide 60 text

IE8 MAKING WEBPAGES IS LIKE HAVING A PARTY BUT GIVE THEM TOO MUCH AND IT GETS OUT OF HAND...

Slide 61

Slide 61 text

IE8 MAKING WEBPAGES IS LIKE HAVING A PARTY YOU NEVER KNOW WHAT MIGHT HAPPEN

Slide 62

Slide 62 text

DO NOT TRUST WEB BROWSERS IE6, 7, 8 & 9 ONLY LOADS THE FIRST 31 CSS FILES IN THE PAGE. 2.3MB PAGE SIZE LIMIT BBOS iOS 3 SAFARI 26KB LIMIT ON FILES IN CACHE

Slide 63

Slide 63 text

DEVELOPMENT CONCEPT: MAKE THE PAGE USABLE WITHIN 10 SECONDS

Slide 64

Slide 64 text

10 SECONDS ON GPRS SOMEWHERE BETWEEN 65KB AND 100KB ==

Slide 65

Slide 65 text

CORE EXPERIENCE CORE EXPERIENCE REQUESTS 8 DOWNLOAD 67KB JS EXPERIENCE JS EXPERIENCE REQUESTS 18 DOWNLOAD 124KB IMAGES NOT INCLUDED

Slide 66

Slide 66 text

DEVELOPMENT CONCEPT: DO NOT BLOCK THE RENDERING OF THE PAGE

Slide 67

Slide 67 text

1 2 3 4 5 6 7 8 DO NOT ADD JS FILES DIRECTLY INTO THE HEAD PRO TIP: html styles.css script1.js script2.js SECONDS 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 DOM READY SCRIPTS RUN NOTE: LATENCY NOT SHOWN IN EXAMPLES

Slide 68

Slide 68 text

SECONDS 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ADDING FILES AT BOTTOM OF BODY IS BETTER html 1 2 3 4 5 6 7 8 9 10 styles.css DOM READY TO USE script1.js script2.js SCRIPTS RUN

Slide 69

Slide 69 text

USE AN AMD LIBRARY TO ASYNCHRONOUSLY LOAD YOUR JS FILES PRO TIP: 1 2 3 4 5 if(cutsTheMustard()) { 6 var s = document.createElement(‘script’); 7 s.src = ‘curl.js’; 8 s.onload = function() { 9 require(‘script1.js’); 10 require(‘script2.js’); 11 }; 12 document.head.insertBefore(s, document.head.childNodes[0]); 13 } 14 15 16 17

Slide 70

Slide 70 text

DOWNLOAD INCLUDES IN PARALLEL html curl.js SECONDS 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 style.css DOM READY TO USE script1.js script2.js SCRIPTS READY TO RUN

Slide 71

Slide 71 text

LOAD YOUR AMD LIBRARY ASYNCHRONOUSLY TOO! PRO TIP: 1 2 3 4 5 if(cutsTheMustard()) { 6 var s = document.createElement(‘script’); 7 s.src = ‘curl.js’; 8 s.onload = function() { 9 require(‘script1.js’); 10 require(‘script2.js’); 11 }; 12 s.async = true; 13 document.head.insertBefore(s, document.head.childNodes[0]); 14 } 15 16 17 18

Slide 72

Slide 72 text

DOWNLOAD INCLUDES IN PARALLEL SECONDS 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 html curl.js style.css DOM READY TO USE script1.js script2.js SCRIPTS RUN

Slide 73

Slide 73 text

DEVELOPMENT CONCEPT: ONLY DOWNLOAD WHAT YOU ARE GOING TO USE

Slide 74

Slide 74 text

DO NOT DOWNLOAD AN IMAGE... PRO TIP:

Slide 75

Slide 75 text

DO NOT DOWNLOAD AN IMAGE THEN REPLACE IT WITH ANOTHER ONE PRO TIP: INCREASES RENDERING TIME WASTES BANDWIDTH WASTES USER’S MONEY

Slide 76

Slide 76 text

Roth rebukes Wikipedia over edit span>

Renowned author Philip Roth...

CORE EXPERIENCE

Slide 77

Slide 77 text

JAVASCRIPT EXPERIENCE

Slide 78

Slide 78 text

JAVASCRIPT EXPERIENCE

Slide 79

Slide 79 text

window.addEventListener('orientationchange', function() { news.pubsub.emit('imageEnhancer:resize'); }, false);  FOR ORIENTATION CHANGES, USE RESIZE EVENT INSTEAD OF ORIENTATION EVENT PRO TIP: window.addEventListener('resize', function() { news.pubsub.emit('imageEnhancer:resize'); }, false); 

Slide 80

Slide 80 text

TASK DESKTOP #rwd DOM Selection jQuery 30KB Micro JS lib “Qwery-mobile” 4KB Events jQuery 30KB Native JS 0KB Animations jQuery 30KB Native CSS Transitions 0KB ALL REQUESTS GZIPPED & MINIFIED

Slide 81

Slide 81 text

DEVELOPMENT CONCEPT: AVOID DOM REDRAWS AS MUCH AS POSSIBLE

Slide 82

Slide 82 text

USE FADE IN/OUT EFFECT INSTEAD OF GROW UP/DOWN EFFECT PRO TIP: BATCH PROCESS ELEMENT INSERTIONS PRO TIP:

Slide 83

Slide 83 text

FLUID LAYOUTS ELEMENTS OF #rwd

Slide 84

Slide 84 text

MAKING WEBPAGES IS LIKE HAVING A PARTY IE7 MOBILE WEB BROWSERS IE8 MOBILE IE IE9 SAFARI OPERA FIREFOX CHROME

Slide 85

Slide 85 text

EVERY PHONE IS DIFFERENT

Slide 86

Slide 86 text

iOS 4x3 aspect ratio

Slide 87

Slide 87 text

Android 16x9 aspect ratio

Slide 88

Slide 88 text

SIXTH DEVELOPMENT CONCEPT: DESIGN FOR INTERACTION BEHAVIOURS, NOT DEVICES

Slide 89

Slide 89 text

USE CSS MEDIA QUERIES TO DEFINE YOUR INTERACTION BEHAVIOURS... WIDE 1056px + COMPACT 320px - 640px TABLET 641px - 1055px

Slide 90

Slide 90 text

IMAGE 50% TEXT 50% COLUMN 100% ... THEN SCALE YOUR INTERFACE TO FIT INDIVIDUAL FORM FACTORS TABLET 641px - 1055px

Slide 91

Slide 91 text

ABC HOWEVER... TEXT IN HTML DOES NOT SCALE SET TO 50% OF BODY WITH 20px FONT-SIZE, THIS TEXT WILL BE 10px HIGH 10px HIGH

Slide 92

Slide 92 text

WHITE SPACE ISSUES APPEAR WITH OUR SCALING INTERFACE WHITE SPACE

Slide 93

Slide 93 text

10% 20% 30% 40% 50% 60% 70% 80% 90% 100% @media (max-width: 912px) { html { font-size: 11px; } } @media (max-width: 836px) { html { font-size: 10px; } } @media (max-width: 760px) { html { font-size: 9px; } } USE MEDIA QUERIES TO SCALE ROOT HTML FONT-SIZE FOR EACH INTERACTION BEHAVIOUR @media (min-width: 641px) and (max-width: 1055px) { html { font-size: 12px; } }

Slide 94

Slide 94 text

EQUAL WHITE SPACE

Slide 95

Slide 95 text

ELEMENTS OF #rwd: PROGRESSIVE ENHANCEMENT TAKE PERFORMANCE SERIOUSLY FLUID LAYOUTS DEVELOPMENT CONCEPTS: CUTTING THE MUSTARD AJAX CONTENT IN TO ENHANCE PAGE MAKE THE PAGE USABLE WITHIN 10 SECONDS AJAX CONTENT IN TO ENHANCE PAGE ONLY DOWNLOAD WHAT YOU ARE GOING TO USE AVOID DOM REDRAWS AS MUCH AS POSSIBLE DESIGN FOR INTERACTION BEHAVIOURS, NOT DEVICES

Slide 96

Slide 96 text

PART 3 AN INCONVENIENT TRUTH

Slide 97

Slide 97 text

"Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work." JAKOB NIELSEN

Slide 98

Slide 98 text

JACKOB NIELSEN IS NOT A GREAT DESIGNER, BUT...

Slide 99

Slide 99 text

"Good mobile user experience requires a different design than what's needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work." JAKOB NIELSEN INCONVENIENT TRUTH: GREAT USABILITY ADVICE

Slide 100

Slide 100 text

Slide 101

Slide 101 text

“Good mobile user experience requires a different design than what's needed to satisfy desktop users.” WE AGREE:

Slide 102

Slide 102 text

MANY BROWSERS TO SUPPORT UNLIMITED NUMBER OF DEVICES VARIABLE DOWNLOAD SPEEDS HUGE RANDOM SPIKES OF TRAFFIC IMPOSSIBLE SITUATION

Slide 103

Slide 103 text

MOBILE FIRST WEBPAGE JAVASCRIPT APPLICATION TAKE PERFORMANCE SERIOUSLY AJAX SECONDARY CONTENT MANY BROWSERS TO SUPPORT UNLIMITED NUMBER OF DEVICES VARIABLE DOWNLOAD SPEEDS HUGE RANDOM SPIKES OF TRAFFIC THIS IS RESPONSIVE WEB DESIGN IMPOSSIBLE SITUATION FLUID LAYOUTS

Slide 104

Slide 104 text

320KB 1092KB 2008 2012 AVERAGE TOTAL DOWNLOAD SIZES 3306KB 2016? WE CANNOT LET THIS HAPPEN

Slide 105

Slide 105 text

MOVE SWIFTLY

Slide 106

Slide 106 text

BBC NEWS TEAM Kate Milner @kmilnr John Cleveley @jcleveley Julian Kirby David Blooman @dblooman Adrian Hall @ade_hall Dan Scotton @danscotton Kaelig @kaelig John Horth @orfy Matt Chadburn @commuterjoy Mark Hurrell @markhurrell Andrew Vos @AndrewVos Tom Maslen @tmaslen http://mobiletestingfordummies.tumblr.com/ http://blog.responsivenews.co.uk/