Responsive web interfaces (Part 1)

By the Scruff

The web has evolved from the old days when most web sites were built to a max width of 800px to a state where the number of resolutions that must be considered by a designer is too large to count.

Some don’t understand this idea or don’t care about it enough and build exclusively for the desktop environments and the larger screens. iPads and iPhones have built up a market share too large to be ignored.

There are various ways and various approaches to building cross-platform web applications. One site and one html can be supplied to mobile and dektop environments, but may look completely different when looked at in the different browsers.

In this series I will review different websites and approaches to making your website work on different devices.

Example one: The bbc responsive news prototype site.

  • Technology: a mixture of CSS and JavaScript that makes the website adapt to the new resolution instantly on load and on screen size adjustment.
  • Hazards of this method: unless extreme care is taken when writing JavaScript functions, large and JavaScript-intensive websites will chew through RAM faster than the developer would like to admit. The reason behind this is the fact that the DOM tree has to be rewritten on every resize. Another thing to consider is the fact that not all parts of the website and not all JavaScript behaviours will be required on every resolution. The functions that are reused throughout are subject to heavy variable changes. Meaning that the user-side cache is likely to be flooded with temporary stuff, resulting in reduced performance in browsers where localStorage is not available.
  • Benefits of this method: Most popular resolutions can be easily targeted using only one line of code and a completely different set of styles may be served to that resolution. A seamless experience, the user visits one site and it is rendered appropriately to their device, no need to configure any settings or to use separate addresses for the mobile site, the old bbc mobile news site is a great example:
  • BTS Responsive Test score: 8/10 (on 22/11/11, we fully understand that the website is still in development and will review again when it goes live)

Here’s a video recording of the website adapting to resolution changes: