Bringing your design beyond the desktop with responsive design

Users expect the same level of user experience as they consume your web content from any kind of computer devices, either for desktop or mobile use. But how can we then keep-up designing web interfaces for a constantly growing number of computer/mobile devices with different screen sizes, different resolutions, and different orientations?

Users expect the same level of user experience as they consume your web content from any kind of computer devices, either for desktop or mobile use. But how can we then keep-up designing web interfaces for a constantly growing number of computer/mobile devices with different screen sizes, different resolutions, and different orientations?

Although it is preferable to design for the main two to three kinds (desktops, mobile phones, tablets) because use-cases vary considerably according to the context of use, budgets don’t always allocate for this to happen. So if the kind of project you’re working on allows it, you may consider adopting a responsive design approach.

Responsive design is a term that Ethan Marcotte* developed to describe a design that responds according to the medium that is used to view it. It isn’t a matter of just making the layout flexible as we use to do, but it is more about creating a fluid grid on which images and text behave appropriately. For example, instead of scaling down an image to the point where it loses its relevance, the trick is to hide or reveal portion of an image as you minimize the screen size. It is also about reordering and re-stacking navigation items and boxes of content on the flexible grid instead of scaling everything down. You can achieve this using a flexible grid-based layout, context-aware images and media queries (CSS3 module) to style the pages according to specific rules.

Here are some examples:
http://bostonglobe.com/
http://colly.com/
http://foodsense.is/

This technique works in most modern browsers (Safari (desktop, iPhone, iPad), Chrome, Internet Explorer (8+), Opera) and unsurprisingly degrades in other browsers, such as IE7 and under.

To find out more about this topic:
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
http://www.alistapart.com/articles/responsive-web-design

Reference:
*Ethan Marcotte is a Web Designer and Developer based in Boston

Digital news!

Are you as digitally addicted as we are? We can supply you with a regular dose of digital news. Simply sign-up, or click to Follow us online.

About the author

Nathalie Raux-Copin
Nathalie Raux-Copin

User Experience Specialist / Designer at Blue-Infinity, Geneva