Strategies for creating a responsive design with HTML5, CSS and JavaScript

A responsive design is one that looks good on any sized screen, whether it's a desktop monitor or a seven inch tablet. But how do you create a responsive design, and what is the best approach? Here we go beyond simple CSS and HTML5 and find out what the experts are doing.

One of the biggest challenges facing development teams, who are increasingly becoming tasked with the job of targeting their applications to a multitude of different devices, is how to create the best user experience without overburdening their teams with an excessive amount of work, and intimidating costs for future application maintenance. After all, gone are the days when everyone in the office had a seventeen inch screen supporting 1024x768 resolution, and every new hire was given the same RIM device sporting the exact same screen resolution. Now, in the BYOD world (Bring Your Own Device), UI developers have to develop applications that will render properly on a variety of different devices with a variety of different screen sizes.

It has always been a challenge to create websites that render well on a variety of screen resolutions, but the proliferation of tablets and smart-devices of varying sizes has greatly complicated the issue. In October of 2012, for the first time ever, tablets represented the largest percentage of all computer products sold in North America, and that means a flood of unpredictably sized devices, from six inch minis to twelve inch monsters, both of which can render both horizontally and vertically, will be entering the workplace. So how can developers deliver applications that can keep up with this maelstrom of device types and screen resolutions? In many cases, responsive design is the answer.

Responsive designs to the rescue

"A responsive layout, or responsive design as it's known, is basically where you design something to handle different device sizes," says Nate Cavanaugh, Liferay's director of UI engineering and one of the creators of the powerful JavaScript library AlloyUI. When viewing a web page that employs a responsive design, you would have no idea that the page is designed to render differently on different devices. On a desktop with a high resolution, the web application will look like any other, full featured, rich web application. But as the screensize changes, the view will dynamically adjust and transform itself.

"You have different breakpoints by which the design changes as it scales down," says Nate. On the desktop, the page is full featured. "But as you squeeze down a device size, the application might start removing some features or putting other features down at the bottom giving priority to more important pieces of content."

Developing responsive designs

So how are developer creating responsive designs?

One way to achieve this effect is by using media queries. "Basically, it's a feature of CSS. You can target different device sizes or different aspects of the device and have CSS properties only apply there, so your design can drastically change depending on device width, the size of the window and other things like that," says Nate.

The other approach is to simply use JavaScript. "You can just detect the size of the screen via JavaScript and as the window changes, the JavaScript can go and update the CSS styles and apply the CSS just to that particular size."

Of course, you don't have to go and create your own JavaScript framework to implement a responsive design. Bootstrap, a JavaScript library built at Twitter but now distributed under Apache License v2.0, is perhaps one of the most popular libraries in existence for delivering a responsive effect. Similarly, some developers are effectively creating responsive designs with other JavaScript libraries like AlloyUI, using AlloyUI's Viewport component and other parts of the library to create flexible and transformative layouts.

The reality is, with so many devices on the market, UI developers have to find some middle-ground when it comes to developing pages that target specific devices and device types. It's simply not reasonable to re-write every application for every screen resolution on the market. But with technologies like media queries and JavaScript libraries such as bootstrap.js, developing applications with a responsive design is now a more compelling approach than ever.


Dig Deeper on Software programming languages