In his Moving Swiftly: The story of how BBC News fell in love with Responsive Web Design talk in Dallas, TX Tom Maslen walked through why the BBC used responsive Web design for their new mobile site and the principles they applied along the way. Here's my notes from his talk:
- BBC News site was released in 1997. It was only 94KB and less than 10 http requests. The problem to support was slow connections.
- Today, the site consists of 153 http requests and 889KB. Only 35 are HTML, 362 are CSS & Javascript files. The problem to support was lots of different browsers.
- Browsers supported: legacy (IE6-8) and modern (W3C standards compliant, less bugs, render faster, and support HTML5 and CSS3). Browsers are like a cityscape, the taller the building (more use) the more important to support.
- Making Web pages is like having a party: you invite people you like (the browsers you like to develop for). But you never know who will show up.
- Today we have a device explosion: tablets, smartphones, TVs, diverse screens, connection speeds, input types. The way we support all these devices is even more complex.
- The previous model for supporting mobile was: small screen, few capabilities. Today that model is broken and creates a lot of new problems.
- The CDN (content delivery network) issue: Internet providers go to locally cached version on CDN not to your site. These services don’t provide different responses to different devices. They always serve the same cached file.
- Mobile is the journey not the context in which you access content. It is the way people access your content throughout the day: mobile across devices. Move from TV to smartphone to tablet to desktop, etc.
Responsive Design
- The new BBC mobile site is a responsive design for smartphones and tablets. There is a lot more content on the desktop site. The team is working on creating content parity between the two experiences over the next year. As a result, there are no redirects just separate domains.
- Progressive enhancement + take performance seriously + fluid layout = a responsive Web site.
- Progressive enhancement: support all browsers with a simple layout, XHMTL + CSS2-ish, and be fast. Javascript asks the browsers what capabilities it has and then enhances the pages as it can. BBC uses this feature detection to split browsers into two groups. The modern group gets a Javascript enhanced experience. The other gets the baseline experience.
- How do you put the same content on devices that are drastically different? The BBC doesn’t do it. Instead, they use Ajax to add in additional content as they can.
Performance
- Taking performance seriously: BBOS has a 2.3 MB page size limit, iOS3 Safari has a 26KB limit on files in the cache. You have to care about performance.
- Make the page load in 10 seconds. This is somewhere between 65KB and 10 requests over GPRS.
- Downloading isn’t the only performance issue to consider. Do not add JS files into the head. CSS does not block loading of a page but Javascript files do block loading so add them at the bottom of the body instead or use an AMD library to asynchronously load your JS file. You can even load your AMD asynchronously too.
- Only download what you are going to use. The right way to do design is mobile first except for images. Don’t download a mobile image first and then download a larger image next.
- BBC only serves one image in the core experience then uses data elements on DIVs to load in additional images using Javascript.
- Be wary of the orientation event to detect orientation changes as it isn’t well supported. Instead use the resize event. It is more widely supported.
- If you qualify browsers up front, you can use smaller Javascript libraries that do simple tasks. These “micro-libraries” are really tiny. You can also use native Javascript in modern browsers.
- Avoid redrawing the DOM as much as possible. Instead of making elements grow and shrink, use faded events instead. Grow/shrink causes every frame to redraw the DOM. Fade in/out is only one redraw. This results in smoother faster/animations.
- Be wary of looping through elements to add to a page. Instead use a batch process and add all the elements in at one time.
Fluid Layouts
- Every device can be slightly different, so you need fluidity to manage these differences.
- Avoid designing for specific devices, design for interaction behaviors instead. Use media queries to define interaction behaviors. Compact, tablet, wide devices have different interface form factors.
- Block level elements scale but text size does not. Use media queries to scale root HTML font-size for each interaction behavior. This allows the font to scale with the rest of the interface.
Inconvenient Truth
- A good mobile experience requires a different design than the desktop.
- But if we start from mobile, create a mobile first design, then take performance seriously, use Javascript to add in additional content, and always use fluid layouts, we can create an experience that works on mobile and desktop.
- This isn’t mobile Web design or desktop Web design, it’s responsive Web design.