3 minute read.

One size fits all is rarely a perfect fit.

Paul Anthony / April 9, 2012

Posted in: Archive

There is a recent trend in the web design community that you’ll find it hard to avoid. Responsive design is the latest ‘must adhere to’ development philosophy. For those of you unfamiliar with the term, responsive design allows a developer to build one website which works across multiple mediums, as the site design adjusts itself according to the client device viewport size.

In essence, it prevents you having to develop multiple different versions of a website for different devices. To see how it works, grab the edges of the browser window for this site, and make it smaller. You’ll see straight away that if viewing from a mobile browser, there is no need to scroll left or right as the text simply flows to the browser width.

Although this makes life easier for webdesigners – and indeed saves money for a client, it has further exacerbated a negative trend in the design community. Particularly on mobile devices.

Just making things work.

Mobile design shouldn’t be just about ‘making content just fit’ into a particular viewport width and height. It should be about hand crafting a beautiful mobile experience.

Few if any implementations that I’ve seen using this technique take the care and attention of precise placement of mobile elements, the removal of non essential ones, nor the persistance of them inside the interface at critical points to make life easier for the user. It’s become about ‘whereever the design elements fit and fall’, well, that’s your mobile design.

Squashing elements to fit in a viewport, is not building a great experience.

I know that people in glass houses shouldn’t throw stones – and I’ll be the first to admit that there’s nothing spectacular in design about the theme I’m currently running here, nor its responsive design – but I do know a number of things. Mobile users need taken care of, and provided with a design appropriate to their needs. For blogs, and content heavy sites such as the Boston Globe which is being held in high esteem as a poster child of responsive design, we can get away with it, as the focus is just viewing the content.

For others, including sites such as e-commerce, and task focused applications with an end goal, and conversions to measure- I’m not so sure you are going to see things work quite as elegantly. There’s the dreaded image bloat problem, which without ugly javascript and server side hacks is going to see you requesting 550px wide jpegs for a screen resolution that only supports a maximum width of 320px. There’s also the issue of loading additional HTML for unused elements which you are likely going to hide with a CSS style to trim down the mobile version.

In our pursuit of the cross platform holy grail we’ve had to compromise on code bloat.

For e-commerce sites particularly, load times are everything, and could make the difference between a user completing the site goals or not. With mobile devices typically being on a skinny connection, that problem is even more pronounced.

Sometimes, there’s absolutely a reason for serving a different version for different users. The perfect mobile experience may mean striping away added extras, it may mean serving appropriate images, it may mean persisting particular design elements and ultimately it may mean starting with ‘mobile first’ design – which depending on UX design – may or may not allow you to use the same code and markup as your full fat desktop version.

  • mobile
  • mobile device
  • responsive design
  • UX