Moving Swiftly: The story of how BBC News fell in love with Responsive Web Design
An in-depth presentation about the reasons for moving a global news website to a responsive codebase with examples of the development concepts that were followed.
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
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
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
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
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
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
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
"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
"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
"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: BAD DESIGN ADVICE
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
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/