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.

RWD Attributes

The following are key concepts in RWD:

•  Fluid Grid: Column width is defined using percentages instead of pixels. For example, when the browser size is reduced to 70%, the content will be displayed in only two columns rather than three which is the case of 100% screen size.
• 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.

Further Resources

 Bevan, N. (1997). Usability issues in web site design. Advances in Human Factors/Ergonomics, 21, 803-806.

BUDIU, R. (2016, February 14). Nielsen Norman Group. Retrieved February 24, 2016, from https://www.nngroup.com/articles/mobile-vs-responsive/

Cartwright, S. (2014, May 21). Differences Between Responsive Website Design and Non-Responsive Designs . Retrieved February 26, 2016, from https://website-designs.com/website-design/the-differences-between-responsive-and-non-responsive-designs-2/

Davi, B. (2014, February 17). 10 websites that aren't responsive (and probably should be). Retrieved February 26, 2016, from https://econsultancy.com/blog/64349-10-websites-that-aren-t-responsive-and-probably-should-be/

FREITAG, G. (2014, November 19). 5 Ways Your Site Might Fail Google's Mobile-Friendly Test. Retrieved February 25, 2016, from https://www.portent.com/blog/seo/dont-fail-googles-mobile-friendly-test.htm

Majid, E. S. A., Kamaruddin, N., & Mansor, Z. (2015). Adaptation of usability principles in responsive web design technique for e-commerce development. 2015 International Conference on Electrical Engineering and Informatics (ICEEI), 726-729. doi:10.1109/ICEEI.2015.7352593

MOYNIHAN, T. (2014, July 08). WTF Just Happened: My Phone Won’t Let Me View Full Websites. Retrieved February 25, 2016, from http://www.wired.com/2014/08/wtf-mobile-websites/

Papuc, I. (n.d.). The Vital Guide to Web Design Interviewing. Retrieved February 26, 2016, from https://gooroo.io/GoorooTHINK/Article/16354/The-Vital-Guide-to-Web-Design-Interviewing/19441#.VtEpUjbnbLY

Schade, A. (2014, May 04). Nielsen Norman Group. Retrieved February 07, 2016, from https://www.nngroup.com/articles/responsive-web-design-definition/

Taylor, J. (2013, December 26). 3 Reasons Why Responsive Web Design is the Best Option For Your Mobile SEO Strategy. Retrieved February 25, 2016, from https://searchenginewatch.com/sew/how-to/2253965/3-reasons-why-responsive-web-design-is-the-best-option-for-your-mobile-seo-strategy