Discussing User Experience: responsive design patterns


How can we provide good user experiences on any device? The UX Book Club met to discuss the issue of responsive design patterns.

A session on responsive design

Every once in a while, the UX Book Club Switzerland meets to discuss a book on user experience and usability. Be it expert or amateur, everyone interested in User Experience is invited to participate and take part in stimulated discussions to expand their knowledge. As robots are welcome too, one of our crew members was present at the latest meeting of the book club, to gather information and share outer space opinions.

The latest session took place in the hometown of our rocket base, Bern, and was focused on discussing an excerpt of Ethan Marcotte’s “Responsive Web Design” which treats the issue of responsive design patterns. What impact does the smaller screen of a mobile device have on for instance the navigation of a website? An evening of inspiring discussions on the topic provided interesting insights and attempts to deal with finding solutions which work on smart phones and desktop computers.

Content, navigation and responsive design

Providing a good overview over the content of your website is of course crucial if you want visitors to discover all the treats you are offering. But what is the easiest and best way to ensure the users find the information they are looking for? A search function, a detailed navigation, a listing of related articles? There are many options, yet generally, users seem to prefer navigating by quick clicks rather than by typing key words into a search field. Another thing that’s for sure is that the content available in the mobile and in the desktop version ought to be the same - the compilation however, might need to be different.

A first step towards a successful result on both desktop and mobile it the “content over navigation” approach. It blends out the screen size and emphasises the content. This implies separating the content from the presentation and paying attention to detailed descriptions, so that the same content can be reused in a variety of contexts.

Responsive design is another key word: an optimal viewing experience with a minimum of resizing and scrolling across a wide range of devices thanks to flexible elements, which don’t depend upon fixed but relative units, changing for instance in accordance with the screen width. Responsive design enhances the quality of a website, as unnecessary things such as advertisements can be removed. However, it’s probably just a matter of time until advertisement gains enough importance in the mobile world and new challenges arise.

Future developments in the mobile area

The mobile field is still fairly young and best practices have to be found yet. At any rate, further thinking and rethinking is inevitably needed to cover additional future devices and applications, such as for example websites on smart TV. Furthermore, it may not alway be a question of simply adapting products to a smaller screen. It’s about finding the best solution fitting the device used and thus providing a good User Experience.