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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- A good mobile experience requires a different design than the desktop.
- This isn’t mobile Web design or desktop Web design, it’s responsive Web design.