The number of consumers using smartphones and tablets to access websites, brands are increasing. This had led to reconsidering how to design user experience for various devices. Roughly one out of every four visits to leading e-commerce websites now comes from smartphones and tablets, representing a whopping 138% annual increase. And with reports of year-over-year PC sales declining for the first time in more than a decade2 As companies now need to cater to various devices and their screen sizes, ‘Responsive Design’ is increasingly being used to have a single design catering to various screen sizes.
Advantages of Responsive Design:
It is a solution that allows your website to adapt to any screen size and orientation, providing a more consistent experience across devices. The user’s web browser changes how the page appears for a specific screen size. It is also on client side unlike previously designed pages for mobile, which were on server-side and would transcode web pages on the fly.
The biggest advantage of responsive design is the time and money factor in building a website. As a single design is used (while defining how layout should be changed, content hidden/shown according to device) it helps conserve design resources. Responsive design also makes it easier to develop and maintain than multiple style sheets for various device forms.
As mobile websites increasingly become popular, compared to mobile apps (due to improvements on network speed on the mobile) responsive design has become an industry standard.
Does Responsive Design Create Optimal User Experience?
To a certain extent it does. It can show/hide content based on the device. It also lays out websites to be easy to read and navigate with a minimum of resizing, panning, and scrolling, making websites usable on devices.
However, it does not focus on the ‘Context’, which is the most important factor for defining the user experience. Usable websites do not always sell a product. Meeting the user’s needs and expectation helps sell a product. This is where we need to look beyond ‘responsive design’ and focus on the ‘context’.
Users use mobile sites in a ‘mobile’ context. While desktop sites are used with a fairly ‘specified’ context – focused user, comfortable surroundings, full sized keyboard etc. – mobile sites and apps are ‘mobile’, meaning they can be used anywhere - public space, home or office. This means users will have limited attention due to the various distractions from the surroundings. The connectivity in the surroundings and battery usage provide additional complexity.
With multiple devices in hand, users today use multiple devices to purchase a product. Hence, the same design, even though built responsively, may not work across channels. It is very important to understand user’s behavior for using various devices.
According to Google, majority of users use devices sequentially and not simultaneously. Which means, users research a product on mobile, but make a purchase on desktop (as it allows users to be more focused) and track it on tablet or mobile.
Google has also categorized three types of user behavior on mobile - urgent now (request to find something specific fast, like the directions to an ATM or finding the roadside assistance number), repetitive now (user is someone checking for the same piece of information over and over again, like checking the same stock quotes or weather), and bored now (users who have time on their hands, while on trains or waiting in airports or sitting in cafes).
It is very important that before you design, you should understand the ‘context’ and ‘behavior’ on why and how your customer may use different channels. You can build a journey map (click here to learn how to do a journey map) to understand this.
It may be required to have features, which are unique to different channels and not have a single design rendering ‘responsively’ to various devices.
Are ‘Responsive Design’ and ‘Context Driven Design’ Mutually Exclusive?
Not necessarily. Both can be complimentary.
Before you decide on whether to have to have the same site across all devices or a separate site, it is important to identify the primary device the user will be accessing the application on. Eg: if 70% of users will use the application to check status on mobile, define all the features to aid the user to access it on mobile.
Next, focus on the context they will use on various devices. Eg: A user will mainly use a roadside assistance website to find the roadside assistance number while having a flat tire on mobile instead of signing up for a roadside assistance program. Hence, ensure that the number is displayed upfront instead of sign up button which is focused more on a desktop site. Again, responsive design can be used to hide/show or change the layout of display.