As platforms proliferate and staff and consumers become more demanding about their choice of personal device, IT departments are looking for ways to make Web design more responsive to this. This is especially so as Web products have to span across multiple screens and devices — everything from widescreen TVs to desktops, tablets and smartphones.
The initial response to the desktop/mobile Web dichotomy was the build separate m.dot sites. Often the mobile sites were derivatives — providing only a sample of the functionality of the original.
More recently, the emergence of native apps has spawned a whole new discipline of development. These provide a much better user experience, as well as a ready-made distribution channel. But native phone apps also deliver further fragmentation — and the cost and complexity of managing those new and discrete environments.
Worse still, with the smartphone market still emerging, and consolidation of platforms still some years away, IT departments are having to pick winners between iPhone, Android, Blackberry and Windows machines.
Responsive design is an emerging Web development approach that will allow developers to build applications for desktop, tablets and smartphones, while maintaining a single code base, and without the need to align to any one phone manufacturer.
The phase was first coined by Ethan Marcotte in an article on A List Apart website that was published in May 2010. Marcotte described a solution to two basic problems with Web design.
The first problem is anchored in the tradition of print media design — the idea that design needs to be static and immutable just like the interface to the customer, in this case a printed page.
The second is a response to emerging technologies like smartphones and tablets — basically a recognition that it is impractical to try design and maintain different websites for multiple form factors.
In the article Marcotte writes, “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive Web design.”
So what exactly is responsive Web design?
In Marcotte’s words, “Fluid grids, flexible images, and media queries are the three technical ingredients for responsive Web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.”
For IT departments, responsive design holds out problems and offers a better customer experience, across ubiquitous devices, all off a single code base.
CIO Australia spoke with Ruchir Punjabi, managing director of Web development company Langoor, about this emerging field and the kinds of issues IT managers need to consider.
“Responsive design is a still an emerging field. We are currently working on seven responsive websites — that’s out of the total of 300 sites we have built. It is evolving quickly but the market is not quite there yet,” Punjabi says.
“Basically, the way responsive design works is that you design your layout across a fluid grid system and there are triggers associated with that grid. These triggers allow your layout to reorganize itself depending on the screen.”
Responsive design uses the capabilities of CSS3 and HTML 5 along with Java script to manage the transitions, says Punjabi. “In principle the idea is fantastic — because now you start designing for screens rather than for devices or browsers or operating systems.”
Punjabi says that while there is no doubt that this is the future of Web design early adopters do need to be aware of the limitations. Total optimisation across platforms still has a way to go, and this discourages larger companies from committing completely, he says.
“For instance if your desktop site size is 2 megabytes or more and you are loading that on a mobile you still have to load all 2 MBs even if you are only showing 1/2 a MB of that That is a large limitation, but no doubt it will be resolved in due time.”
Punjabi says that when advising clients the important thing to do is to understand the context of the development. “If the lifetime value of your current applications is close to its end you should really consider investing in responsive design — be it your internal systems or your external websites. You should do this even though the optimised version may not be perfect because the optimisation is only going to improve.”
Another big limitation of responsive design is the smartphone market not being fully matured yet and the variability between smartphone take up across different geographies. This is especially important for international products, or start-up with international aspirations, especially in the developing world.
“Responsive Web design means you have to start considering tablets and phone devices. Normal Web development for desktops is fine because you are used to focusing on four browsers, but on tablets or phone devices and especially phone devices you've got to consider things like whether Java script is enabled. Smartphones are starting to dominate this space very quickly, but there’s still a massive chunk of the market not smartphones.
“You have to think about how your site will work — and that might mean you have to create a separate version or a stripped down version for phones.
“We operate substantially in the developing world — this is the biggest challenge at the moment.”