LinkedIn Facebook Twitter bemoko blog bemoko technical pages
Tel: +44 1256 581028 Email: info@bemoko.com

Bemoko blog

6

Mar

Responsive Design – Client or Server side?

Posted By Mat Diss Tuesday, March 6, 2012. 1 Comment

It looks like everyone is waking up to the fact that creating a website which works across all platforms, with all their different capabilities and form factors, is not the same as creating a PC site.

A variety of solutions to this problem are appearing all the time, from the basic screen scraping of PC site content, through mobile site ‘builders’ which let you drag and drop code, to full web development frameworks like Ruby On Rails, Grails and, of course, our own bemokoLive.

There is a lot of buzz around responsive design at the moment – this basically entails using advanced CSS and web dev techniques to allow the client to decide on how best to display the site depending on its capabilities.  This is a good approach, but depends on the client being able to support the techniques required and it also assumes you want to display the same content on all devices.  As Bryan Reiger says in his excellent presentation, 2/3 of people in the US do not have a smartphone – client side responsive design will not work for these consumers.  Client side responsive design also involves sending more data to the device than it might need – using unnecessary bandwidth and making the customer wait longer for their page.  Imagine a restaurant where you sit down and the waiter gives you a plate with every meal the restaurant serves on it, you then choose to eat only the food you want.  This is clearly an ineffective solution.  Many of the pages I have seen that have been touted as responsive design ‘icons’ are over 1MB in size.  This is a poor user experience for someone on a mobile data network – people won’t wait that long for your site to load and will move on.

There is another way to support the benefits of responsive design – server side responsive design.  This method lets the web framework on the server decide on the best optimisation for the device in question, sending optimised markup and content.  The device only gets what it needs.  Going back to the restaurant analogy, the server only sends you a plate containing the food you want.  Luke Wroblewski make some strong points for taking responsive design server side in his blog.

Server side responsive design is guaranteed to support all devices and leaves the heavy lifting to the server rather than requiring the relatively low powered device to do all the work.  There are advantages to client side design in some situations where you can avoid page reloads on, say, a change of orientation.

The best approach, then, is to use a mix of both server side and client side responsive design to ensure the user gets the best experience, whichever device they are on. This technique is becoming known as RESS and, again, LukeW has done a good write up on the differences between the methods.

The bemokoLive platform provides a framework for delivering server side responsive design whilst allowing the easy management of the code required for client side responsive design.  Because the framework already provides comprehensive device detection and segmentation it is easy to deliver certain CSS only to certain groups of devices, for example you might decide that only devices which support AJAX get a certain version of the CSS and the Javascript required.  It is much easier to manage this on the server using the device categories rather than create ever more complex media queries in the page.  The server side approach saves on development time and also saves on code management and extension once the initial site has been created, with less risk of introducing bugs and the ability to target devices based on fine grained device detection.

We use our platform along with HTML5 and responsive design techniques to deliver our customers a rich, flexible user experience whichever device they are using.

http://www.lukew.com/ff/entry.asp?1403
Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Posted in: mobile, mobile design, mobile UX, mobile web

Comments

Leave a Comment

Name (required)

Email (will not be published) (required)

Comment