#tom maslen

[thatsinterestingkindof]

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

[dragoni]

some really great tips from Tom Maslen.

Responsive Design

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.

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.

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.

There's more! Read LukeW's post