featured Demo UX Cases

User Experience Report: Is Responsive Design the Answer to the Growth in Mobile Devices?

Mobile devices are on the rise, we can see it all around us. Mobile traffic alone rose 81% in 2013. Most of us already own a smart- or iPhone, but tablets are becoming increasingly popular as well (rising 68% in the past year).

This presents a problem for websites. Traditionally there was only a single method of viewing them – via desktops – but a rise in smaller screen sizes presents new challenges. Sites need to be optimized to suit all devices: To suit touch and mouse. Handheld screens and TVs.

A solution to this problem is to create a separate mobile website alongside the desktop version. However, with the ranging widths of all the different mobile devices out there, and with most of them having their own unique screen sizes, a mobile site wouldn’t be able to address to all of their needs. Responsive Web Design however, can.

A website designed to be responsive automatically adjusts to whatever screen it is being viewed on. This is a very cost effective method compared to the creation and maintenance of a separate mobile website.

The Test

All this sounds good on paper, but does it actually hold up? In order to examine this we conducted a study using Usabilla Survey in order to find out what the effect of Responsive Web Design is of three different news websites on User Experience. The websites analyzed were Time News, The Boston Globe and Dutch Daily News. The results led to some interesting finds.

Our test Involved four different questions per home page, and one final (comparison) at the end. Participants were between 15 and 75 years of age and had an average familiarity with Responsive Design of 2.9 on a scale ranging from 1 = very familiar to 5 = not familiar at all.

See below for our full report on Responsive Web Design, or download it here:

Highlights

25% of our participants visit a news site with their mobile phone

Our participants preferred visiting a news website with their desktop, followed by tablet and only then by mobile phone. However, when asked what they end up using mobile phone use actually surpassed tablet use.

Images can blot out important content

When a responsive news site is visited on a small device such as a mobile phone, large images can take up valuable space better used for important content.

Mobile phone layout retains too much content

When a responsive news site changes layout, the mobile phone layout often retains too much content, which as a result hinders easy navigation.

Collapsing navigation bars can be found confusing

The collapsing of the navigation bar of a responsive website can be found confusing, notably by people who are used to displaying news websites on their desktop and switch to mobile phone.

Repositioning content can be an issue

Repositioning content when changing to a smaller layout must be done with care or it can result in less important sections being put in a more prominent place than actual important content.

Trust elements of a news site can be harder to find with smaller layouts

News websites are trusted by its name or logo, but also by information provided in the footer such as copyright or contact information. When resized to smaller layouts this information becomes increasingly difficult to find.

Prior knowledge can change people’s opinion regarding importance

Prior knowledge of larger layouts of a responsive website can change what people find important on a smaller layout.

3 comments

  1. Davide De Maestri

    Nice report, i don’t take these as completely exhaustive but some things (such as the “right arrow next to section”) are really interesting. Thanks again from Italy.

  2. Mahesh

    Please explain exactly which type of customers should use responsive web site?

  3. John McCarthy

    Nice report but how does it relate to the original question:

    Is Responsive Design the Answer to the Growth in Mobile Devices?

    What’s the conclusion?

Leave a Reply

Your email address will not be published. Required fields are marked *