Desktop, Mobile and Responsive Website. Which One is Better for Usability?
By Rawan Bahmid
91% of Internet users use laptop/PC whereas 80% of them use smartphones (Smart Insights, 2015) which mean that most of Internet users use both devices to surf websites. Mobile dedicated and desktop websites are the website types that users browse on their desktop and mobile devices. However, they have some usability issues.
Desktop Sites Usability Issues
Full (desktop) sites are the websites that are designed to be used on desktop and not optimal for mobile use. Using desktop sites on different devices leads to usability issues and hence poor user experience. Because different devices have different screen sizes, page content does not fit all devices width. Which makes some content not appear, text too small and hardly legible and buttons small, adjacent and very close together.
Vivianna Day Spa website illustrates the trouble of using desktop site on other portable devices (cropped pages, not displayed content, small text and buttons).
Some desktop websites have Inappropriate layout when resizing the browser, even though they were used on a desktop device. Their components are not fully displayed and some of them are not shown so their depiction becomes unusable.
This brief video shows a non-user friendly website of Waterloo University. It shows that zooming in on a desktop site gives the same effect on a mobile.
Mobile Sites Usability Issues
Mobile-dedicated sites are websites designed for mobile phone use only and usually use the m.* subdomain. Such as https://m.sephora.com/
Making different versions of the same website has some issues. Since the two websites have been implemented separately, they look different and the user has to figure out and learn how to use each. For simplicity purposes and designers' assumptions, some features and functions are not available on mobile sites. And in order to access and use them a user has to be redirected to the desktop version, which takes extra time along with the issues of using desktop sites on mobile devices.
Sun Life Financial has two separate websites. The mobile site has only one option which is “sign in”. User can not register, read about the provided services or at least change the password when forgotten it.
All these issues of desktop and mobile websites can be solved by using Responsive Web Design.
Responsive Web Design (RWD)
RWD is an approach that makes websites equally viewable and usable on desktop computers, tablets and smartphones. Such sites can easily adapt to differences in height, width, resolution, and orientation, and also display slightly different content based on the used device. Such sites also adapt as the user shrinks and grows the browser in size. The quality and resolution of images and videos can depend on the internet connection. If a device is connected to a fast internet connection the media will be displayed in the higher resolution. In contrast to slow internet connection satiations where the resolution of the downloaded media will be low. A RWD site has one URL which makes the website easier to share, interact with, and link.
The following are key concepts in RWD:
- Responsive Media: Image sizes change based on the screen size, video and image resolution modulate based on internet connection speed.
- Prioritized, reshuffled and hidden components: The same content appears, but with different structure.
- Changed Actions: Some functions are changed to suit the used device. For example, “send a massage” and” send an email” on computer will be replaced by “call now” on a mobile phone.
- Enabled Functions: New functions would be shown and enabled on mobile phones only. Such as “find us” and “download our app”.
uOttawa website is an example of a good responsive design. The 5 buttons in the top on the desktop version grouped and change into a menu button on reduced browsers and mobile devices. The options on the bottom reshuffle. And a new function” find Us” appears.
The shown weather page is a bad application of responsive design. The content reshuffles but is not prioritized. The “breadcrumbs” navigation covers a lot of the screen and too many details are display; hence users have to scroll a lot through the page to find what they are looking for.
Inappropriate implementation of RWD could affect usability. To implement a good RWD, a designer has to:
- Implement fully responsive site and avoid doing this on a page-by-page basis.
- Prioritize content make sure that un-needed details and information are hidden (accessible via an icon that allows expansion).
- Omit complex graphs, charts and long tables
- Remove functionality that is rarely needed on mobile
- Provide access to the hidden items by displaying a summarized version of them, combining and comparing similar categories, putting them on stand-alone pages or by providing a search box to look for them.