Posts Tagged ‘responsive’

4 ideas for Details in Responsive Design

Posted on: August 29th, 2012 by Fransgaard No Comments

The original version of this article can be seen at the award-winning Capgemini – Capping IT Off blog.

I have previously covered what this new trend in digital called “Responsive Design” is, but I have since been thinking about how granular a responsive design can be and it can be quite detailed.

Here are four ideas I have been toying around with:

1: Responsive imagery

Images is a big part of websites and brands so presenting these in the best manner is important. One way to make images responsive is changing the width and height of the images depending on how big the user’s screen is.

This requires imagery which are optimised for the largest expected size and then scaled down visually. However, while the image might fit on a mobile phone using this technique it will still drain the bandwidth as if the image was full-size.

A better option is a server-side system that feeds correct images depending on what device is being used.

This can also work in favour the other way by raising the quality of the images to meet the opportunities presented by a new generation of screens with much higher resolution led by Apple’s retina display.

2: Responsive typography

Just because a website doesn’t repurpose it’s design grid depending on the user’s screen resolution doesn’t mean we can’t make the experience better for large screen users. One way of doing so is by making the typography responsive.

As people with bigger screens tend to sit further back making the font-size larger even in a fixed width scenario seems like a perfectly helpful solution.

Bigger text is also helpful on mobile devices. iPhones have the “Reader” function in its browser allowing users to convert websites into a much more legible format using bigger text size.

This is good for usability but not so good for the website owners as it takes the users away. This leakage can be prevented by the websites themselves providing equally strong typography on mobile devices.

3: Responsive copy

People on mobiles generally don’t like to read as much (it seems news sites are the odd ones out in this) as such it might be worth developing two copy sets; One that’s more summary based, shorter and punchier for mobile devices and one that is more detailed for bigger screens.

In fact, the two could probably be written in clever fashion to work together on bigger screens… maybe every other paragraph is removed from the mobile version.

4: Responsive link labeling

While I have previously argued that “Click here” is not necessarily bad for usability there are still some elements to consider such as; how do you ‘click’ on a touch pad?

With responsive design the link labels could be updated depending on device adding an extra little detail to the overall user experience.

…And other responsive ideas

I’ve been thinking about other ideas; Responsive sitemaps, responsive navigation, responsive colouring (if I can measure amount of sunlight hitting the screen) etc.

At the end of the day the question is: When does it stop being commercially sensible to maintain a single super responsive website over multiple, channel-specific sites?

I don’t have the answer to this yet, but I am excited about where responsive design is taking us as I think for the first time digital is fully breaking away from it’s print-based heritage.