Responsive Design: One Website, Many Devices

Jack Simpson

Head of Marketing and Communications

Clapton is god

By now you have probably noticed – we have a new website! Our excitement is not only because of its newness, but because of its responsive design. In lay terms, this means that the appearance of the website changes according to the screen resolution of the device/browser you are using. I found out more from the man behind the new website: Ian Munro.

Responsive design is the use of the @media extension rule in CSS (Cascading Style Sheets) which allows for a flexible web design that responds to user viewing areas, most specifically the browser resolution. This allows for a better viewing experience ranging from desktop to mobile.

The design uses fluid proportional-based grids and flexible images. Understanding key elements expected by users is important when planning a responsive design; the website has to react smoothly to touchscreen gestures as well as mouse movements. Consideration has to be made for mobile data bandwidth and speed compared to fixed line broadband as responsive pages load the same content for desktops and mobiles. It is vital that the design and content of the website are as streamlined as possible. High levels of caching both server side and client side are utilised to overcome this problem.

Cross browser compatibility has always been a developer’s worst nightmare; due to technical limitations and differences in browser interpretations of HTML and CSS, it is extremely difficult to create a completely cross browser compatible website. Huge amounts of testing was carried out by Ian, using various tools such as IETester, during our website’s development to fine tune the design for a clean cross browser experience.

Javascript and the JQuery framework play a huge part in any modern website and were a great help with the responsive design. JQuery’s User Interface and Touch Library’s increased productivity and reduced complexity assisted with identifying the difference between a mouse click/hover to a touch on a touchscreen.

At 1280×1024 resolution the website uses a lot more Javascript for visual effects whereas at 640×960 (iPhone 4S), the Javascript is unbound from elements which don’t require it. Some elements use a completely different set of actions at a lower resolution, allowing for complete flexibility and meeting the end user’s expectations.

Apart from looking great at all times, Ian tells me there are functional benefits to responsive design too. The website supports all modern browsers and devices as the appearance is determined by screen resolution rather than the browser’s user-agent identity. At the same time, it is easier to maintain as all content is from a single source.

Try it yourself on your phone, tablet and PC or by changing the size of your browser window!