Absolute Orange

Responsive web development

Written on Fri, 4th May 2012
By Amy Varga

Responsive Web Development is a front end web development approach for building websites that look good on all devices.

The Responsive approach to building a website begins with the development of the website for a lowest common denominator. The lowest common denominator's core experience is based on a Mobile First approach. It focuses on being fast and lightweight and independent of JavaScript or CSS media queries. Once this website has been built and tested, one can begin to optimise the website experience.

Device groups

Browser features enable us to determe what device the user is using. Ultimately the device and browser will determine the website experience. Browser features can be detected using a device description repository (DDR) e.g. WURFL and / or client side JavaScript.

In my prototype I have used AJAX to initially return to the server the browser screen width, screen height and orientation. These features determine what content and stylesheets to include in the page.

Browser features include:

• Screen width and height
• Viewport width and height
• Device orientation (flase, 0, 90 or -90)
• Mouse or touch capabilities
• HTML4 or HTML5 (determined by testing JavaScript methods available in the browser)
• Local storage
• Geo-location

HTML4 vs HTML5

Whilst HTML5 can be made backwards compatible with HTML4 through the use of JavaScripts (polyfills) this approach is not ideal for small mobile devices as the addition of scripts increases the weight of the page and slows performance. For this reason we differentiate between HTML4 and HTML5 on mobile devices. BBC implement this approach using JavaScript. They call it Has The Mustard and it is based on whether the following methods are available to the browser:

1. Document.querySelector
2. Window.localStorage
3. Window.addEventListener

A DDR like WURFL includes a device capability is_wireless_device which would enable us to determine whether a device is mobile or not. Without access to this capability, we will need to assume a device's mobility by its size.

AMD Loaders

To further improve performance of our website we use AMD (asynchronous module definition) loaders. AMD loaders enable JavaScript, CSS, text and il8n:

• to load in parallel improving the overall speed of a website page
• encourages a modular structure of scripts based on dependencies which is easily maintainable
• follows a well defined and standardised approach in keeping with the prospective ES-Harmony migration path

Interesting insights:

• The CSS media query for orientation is currently not widely supported for example, it does not work in iPhone 4 (iOS 4.3.3). As such my thinking is that the orientation of the device is not required so long as I ensure my stylesheets include styles, using width media queries, for any viewport changes.
• Dynamically removing and adding stylesheets with JavaScript puts considerable strain on the browser as documented by Stubbornella. For this reason, I use AJAX to determine the appropriate stylesheets to include in my web page.

Technologies I have used

• RequireJS (AMD Loader and JavaScript and CSS optimiser)
• {Less} (Dyanmic style sheet language)
• Almond (minimal AMD API implementation for optimised builds)
• Apache Ant (compiler)