by Sanjay Shamdasani

Is it time for the corporate world to embrace Responsive Web Design?

With the plethora of mobile devices in the marketplace today comes the challenge of having to design and develop instances of traditional web properties for a multitude of different screen sizes, screen resolutions and platforms.

The exposure of being in the app store and lure of releasing popular apps has driven corporations to embrace the design of custom apps for the iPhone & iPad. Further custom apps for other device platforms have followed… Android, Blackberry, Windows 7 etc.

Designing custom apps allows one to take advantage of native device features and interactions to provide rich platform specific experiences. However, as more devices come onto the market, the platforms themselves evolve, and the features that corporations want to offer on their web properties increase, is the approach of designing for each device sustainable? Can corporations really afford to support every platform? If not, how do they decide which ones to support?

Enter stage – Responsive Web Design: The device and platform agnostic approach to web design.

What is Responsive Web Design?

Responsive Web Design relates to designing sites so the content scales to display gracefully within a browser at any screen resolution. Through thoughtful coding using percentage calculations, breakpoints, and media queries, content can be made to respond immediately to the resizing of a browser window and re-presented in a more optimal manner within a new window size.

One can now design a single web property that automatically responds to any device’s screen size and resolution on any platform presenting a user experience that’s tailored to the browser on that device.

The approach still requires a solid understanding of the various devices and screen resolutions, and rigorous testing, but offers significant maintenance advantages for the mobile channel – a single build will apply to all current mobile devices/platforms (tablet and phone) and any future devices. Any upgrades would in turn apply to all devices and platforms.

Companies Are Slow to Respond

Responsive Web Design is by no means new but hasn’t really been embraced by corporations yet. There are, in fact, limited examples of its application by major brands. The most notable example is The Boston Globe – a truly responsive content site. The examples below demonstrate the shifts in layout and navigation, all of which require decisions to be made regarding content prioritization, as well as design and development.

Boston Globe for PC

The Boston Globe for PC

Boston Globe for Tablets

The Boston Globe for Tablets

Boston Globe for Smartphones

The Boston Globe for Smartphones

Barack Obama’s site is another good example. The following screenshots make clear that the Obama campaign considers building their contact list a top priority, making that front and center across devices.

BarackObama.com for PC

BarackObama.com for PC

BarackObama.com for Smartphone

BarackObama.com for Smartphones

Illy Coffee is using responsive web to good effect on one of its mini-sites – illyissimo – but not on its core web site property. A marketing mini-site has less content to optimize and maintain, making it an easier undertaking and a good example of how companies can move gradually toward Responsive Web Design. (More on that later.)

Illyissimo for Tablets

Illyissimo for Tablets

Illyissimo for Smartphones

Illyissimo for Smartphones

Sony is often cited as an example but only the home page of their corporate site is actually responsive. Dive any deeper into the site and you are presented with regular defined width pages resulting in a rather odd experience on a mobile device.

There are of course several reasons why corporations may have held off so far, including the often-intimidating requirements that a successful implementation demands:

  • Design Overhauls
    The essence of responsive web requires that the core web property be redesigned and re-thought using a mix of flexible grids and layouts, images, and intelligent use of CSS, with specific breakpoints that reformat content at certain screen resolutions. Implementing it involves a complete redesign of all of the corporations’ web properties and that’s no minor undertaking.
  • Organizational Changes
    Determining appropriate screen breakpoints is somewhat difficult when your web property includes complex functionality and workflows, forms and tables. This requires that a holistic long-term strategy be adopted across all business and technology organizations which, again, is no minor undertaking.
  • Strategic Alignment
    Presenting certain components consistently, (like ads, which some firms rely on), becomes challenging under a responsive model. As the screen resolution shrinks, many components are typically re-positioned, moved to the bottom of the page, or just excluded. Difficult decisions must be made across a multitude of stakeholders regarding content prioritization.
  • Talent
    It takes a certain skill set and knowledge level that is not widely available to design and develop effective responsive web solutions.

Companies Must Take On Responsive Web Design.

So why do I feel that now is the time for corporations to embrace Responsive Web Design?

1.   Cost savings opportunities will be significant

Given the rise in use of tablets and smartphones, it would be prudent to consider how the design of any new website or application appears on those devices. Yet it is becoming increasingly expensive to effectively design and support multiple devices and platforms. So alternatives will need to be considered to compete in a growing mobile market and Responsive Web Design seems to fit the bill. If done right, upfront investments in and changes to design and processes will be more cost-effective than developing and maintaining specific tablet apps.

2.   Feasible implementation options exist

A full HTML re-architecture of the core web site property does not necessarily have to occur and the changes can be done in stages – it doesn’t have to be an all or nothing approach. For example, a Responsive Web Design effort could be developed for mobile properties only, using the same design standards of the core web site. This could result in significant savings in maintenance costs within the mobile domain.

Another approach is to stage the evolution of a web site. As new components of a site are designed or existing ones redesigned, those components alone could be built in a responsive manner. In the short-term, the components would be framed into existing apps. The longer-term vision involves the entire site evolving into a responsive state in phases.

3.   Customer expectations increasingly demand it

It’s gradually becoming just as likely that your website will be accessed from a phone or tablet as on a desktop. 2011 was the first year in which smartphone sales exceeded PC sales worldwide, a trend that is expected to continue.  In 2011, Forrester predicted that tablet sales would eclipse laptop sales by 2015, a projection that is being realized.  With this increase in sales come inevitable shifts in usage patterns that rely more heavily on mobile devices.

Companies cannot rely on existing assumptions regarding customer behaviors as the traditional contextual models applied to mobile usage are ever evolving. For example, most assume that mobile users are on the go and as such are only likely to retrieve limited information on their device. This assumption results in significant functionality being dropped from a mobile app. However, there are many instances that contradict these assumptions. For example, when watching TV, despite having a laptop or iPad close by, people will reach into their pockets and use their phone to browse the web. In this context, it’s very likely the user is expecting access to everything the site has to offer. A responsive design approach makes it a lot easier to provide this level of access, helping corporations best adapt to the changing patterns and usages of mobile devices.

So what do you think? Is it time for the corporate world to embrace Responsive Web Design?