In the mobile web world there is a constant battle around responsive web vs dedicated mSites. So what is a responsive website? Why would I want one? Or why should I avoid it? Responsive web design at its simplest is designing a single web page that when resized to tablet dimensions or mobile phone dimensions adjusts its styling to provide a good user experience. It is possible, although not typically a the 'responsive way' for the content in the page to reduce as the dimensions change. Responsive web design (RWD) relies on scaling dimensions and the CSS3 @Media Rule.

There are some key benefits to responsive web design:

  • One web page to build.
  • One 'code base' to maintain.
  • No mobile device sniffing / redirection.

The idea of a single code base is the utopia for any multi channel development, it implies reduction in the cost of development and maintenance. Unfortunately this is typically not the case with many RWD projects. Lets take a look at the challenges...

  • Advertising media is not responsive.
  • iOS, Android, WinPhone and Blackberry render HTML and CSS with unique interpretations.
  • Different Android implementations (HTC / Samsung / Sony) handle javascript and advanced CSS (specifically animation) with different degrees of success.
  • To deliver the intended design on desktop the page weight on mobile can become overwhelming for a 3G connection.
  • There may be a need for mobile targeted content.
  • Touch and mouse interfaces are different and require different design.
  • Highly restrictive interaction design to achieve cross platform compatibility

My experience, and this is shared by numerous web UI developers and designers I have spoken to is that RWD is a great approach, but has its place and its limitations.

If we check out Twitter or Facebook two of the most visited mobile websites in the world, we see they have opted for a two dedicated sites - m.twitter.com and twitter.com. This approach allows for the design and real estate to make the most of each channel dimension. The mSite page size is kept low for a faster experience over 3G. The techniques used in the Javascript and allows the mSite to have a very different interaction design to that of the desktop site.

So far I am sounding anti-RWD, this is not the case I have been in projects that have successfully used RWD but typically the use was for simple "brochure" pages where a restrictive desktop design was helpful not a hinderance.

In summary, be very careful before adopting RWD for a project, I have seen it back fire and waste significant effort and money. Understand the restrictions and realise the cost of development will NOT be reduced as testing across multiple channels will drive the development hours up sky high.

Personally, for any site beyond a brochure, I would opt for two views for your site. The mSite can itself be responsive to handle larger mobile screens or even tablets. The mSite is optimised for touch interaction and low bandwidth connectivity. The desktop site can have a richer interaction design and maximize the screen real estate with additional content to support the user. The development time can be reduced through use of server side technology such as MVC with multiple Views.

Posted
AuthorDave Martin