Responsive design refers to an aesthetic and technical approach to making websites that are device agnostic. The idea is that one website can be built to be viewed on any device whether that be a desktop, tablet, or mobile. Responsive Design is a solution that is an alternative to building a separate desktop site and a separate mobile site.
Responsive Designs allows the content such as text and images to move around and change to a format and layout that is best viewing for the device. This is possible as images scale automatically depending on the device used. For mobile devices, content often becomes stacked vertically rather than horizontally. Sometimes elements on the page change design altogether to best suit the device. For example, a main menu displayed horizontally on a desktop might then be made available on a mobile device within a menu button which then reveals all the menu options.
The following are 2 examples of Responsive Designs to more clearly demonstrate how the design changes and adapts in ‘Response’ to the design used.
Example 1: Responsive Design - Boston Globe
Responsive design is a very elegant solution for information based websites such as the Boston Globe. This is because text and images are very flexible in their presentation. Text and images can increase and decrease in size. Text can appear in any format, such as wide paragraphs (for desktop) or skinny columns (for mobile).
A Responsive design is convenient as the right amount of content appears at the right size that is appropriate for the device. On the mobile the user can scroll to view all the content on the homepage. The main menu on the desktop is available from the ‘sections’ button and reveals a vertical list of the main menu buttons instead of a horizontal list.
|FIG 1: Mobile||FIG 2: Desktop|
Example 2: Responsive Design - Skinny Ties
Skinny Ties is a good example of an e-commerce website. Users are not only interested in information but also to perform an action – such as making a purchase. Task orientated websites such as this can be more complicated to build and can have more sophisticated functionality.
In FIG 3 and FIG 4, the user is about to purchase a blue skinny tie. The design for both pages is exactly the same, same text, graphics and functionality, but presented in a different layout.
|FIG 3: Mobile||FIG 4: Desktop|
But haven’t we been doing this already?
Before Responsive Design appeared on the scene, techniques such as a ‘liquid’ based layout and ‘Elastic’ based layout were used, and still are, which achieve a very similar experience in terms of the contents of the page being able to move about and change format. These also allow the user to see the presentation of a website on multiple screen sizes. There are a host of technical differences I could delve into, but for the purpose of this article I’m only interested what the user experiences specifically.
‘Mobile Optimised’ sites were created to provide an optimal experience for mobile, therefore a separate website would be created for the Desktop. These days one now has a choice with their approach, whether to make a Responsive website (that can appear on desktop or mobile) or a Desktop website and Mobile Optimised website.
For a better understanding of what is ‘Mobile Optimised’, if the user types in ‘RealEstate.com.au’ on their mobile, they will get redirected to ‘http://m.realestate.com.au’. Realestate.com.au have made the decision to make their ‘mobile optimised’ website the default mobile experience. There is then a link available on the homepage to that the user can select to view the ‘Desktop Site’.
Example 3: Non-Responsive - Realestate.com.au
Realestate.com.au is an example of a website that is not responsive. The Mobile Optimised website and the Desktop website is different. The following images demonstrate this.
On the Mobile the user is presented with two options ‘Buy or Rent’ FIG 5, then the option to complete a search form, FIG 7. The next screen (which is not provided) provides a list of Search Results.
The Desktop experience differs as users perform the same tasks on different pages. The option to select ‘Rent’ and conduct an initial Search is all available from the home page (FIG 6), and then the next page provides the option for the user to conduct further refinement and the search listings available on the same screen (FIG 8).
The key difference with this approach is that the user is provided an alternative experience between Desktop and Mobile. The functionality is very similar, but different. This is why some people describe a ‘Responsive Design’ as offering a ‘consistent’ experience, and might have the opinion that that this is preferable.
|FIG 5: Mobile||FIG 6: Desktop|
|FIG 7: Mobile||FIG 8: Desktop|
Does a Responsive Design matter to the user? Responsive VS Mobile Optimised
We define a good user experience with regards to user satisfaction and whether or not users can achieve the purpose of their visit. A Responsive Design does not automatically trump a ‘Mobile Optimised’ website on this criteria alone.
A good user experience is also about providing a consistent user experience, but what does this mean exactly? We define a consistent user experience as one that offers a seamless and un-interrupted experience. A consistent experience means that users never feel lost or abandoned.
Mobile Optimised websites are criticised for not offering a consistent experience which we feel is unjustified. There are two reasons for this.
1. The user accesses a desktop URL on a mobile or tablet which is redirected to the Mobile Optimised URL. We have conducted user testing on mobile optimised websites, and users are not at all concerned about a URL redirect (in fact most people don’t even notice).
2. The functionality can differ greatly between desktop and mobile which is criticised therefore to offer an inconsistent user experience. As long as the functionality offers what the user needs and expects, it doesn’t matter if it is different.
Responsive Designs have generated a lot of excitement and enthusiasm because they can offer some very stimulating, engaging and exciting experiences. Many Responsive Design websites have incorporated Parallax scrolling which offers lightweight graphics that animate in response to user behaviour – very cool!
Responsive Design is appropriate for websites where the content and features on each screen are appropriate regardless of the device. For these websites a Responsive Design is great solution in order to create one website that is device agnostic. For many websites the mobile experience needs to be designed specifically for mobile and therefore a Responsive Design is not appropriate. This is really where the decision making stems from as to whether or not to adopt a Responsive Design.
Picking one approach over the other will not inherently promise a good user experience. If you want to entertain your users and offer a stimulating and fun experience - go for it!, but make sure you provide your users with a good user experience by ensuring they can successfully complete the purpose of their visit!