Responsive design of web-sites, which improves user experience - Literature review Example

- Responsive Design Improves User Experience Starbucks and Mashable are now built with responsive web design. These websites are only a few of those redesigned “... to provide an optimal viewing experience across a wide range of devices” (Umbrell, 2013). The Northern Illinois University (NIU) defined responsive design as “… designing content so it can respond to the environment”. This environment is based on screen size, platform and orientation (Knight, 2011). That is to say that a website is developed and designed to respond to different screen sizes. To understand the concept better, a responsive web design is developed to proportionally and “… gracefully fit on [the] desktop, tablet, and smartphone browsers” (Steimle, 2013), without cropping the content of the web page. The layout of the element changes as a web page is displayed on different devices in a way that “important information is presented in a user readable way” (Nimesh, 2012). In addition, videos or photos published on a website are scaled according to the screen they are displayed in (NIU, n.d.). For instance, if a student browses the NIU official website using a desktop computer, the student can enjoy the full view of the homepage particularly the beautiful slide shows. When the web browser is restored down, the responsive website will automatically resize to fit on the small browser window and the student can enjoy the full view of the homepage without the need to scroll to see the slide shows. On the same hand, the images are automatically scaled to fit on the new dimension. Alternatively, if the student decides to use an Android tablet to browse the web page, the web page will automatically resize according to the screen size of the Android tablet and the resolution will change, as well. This is possible because NIU has a “technology” that “… automatically respond to the user’s preferences” (Knight, 2011). This technology is used to convert HTML, CSS and Javascript responsive, among others. Responsive Design Uses Fluid Grids Fluid grids is one of the backbones of a responsive website. The fluid grids automatically resize the contents of a website to fit on different screen sizes and resolutions. In other words, the fluid grid applies the concept of how water “take[s] the shape of its container” (ScienceWeb, 2013). Fluid designs will seamlessly flow and adapt to the size of different devices use to browse web pages. In addition, fluid grids are based on percentage based designs (Nimesh, 2012). Unlike pixel based designs, percentage web designs will change the heights and widths of the elements to proportionally scale according to the size and resolution of the device used in browsing web pages. For instance, the images displayed in the slideshows on the website of NIU are scaled proportionally. In other words, the slide shows contain images that are not cropped nor stretched (Kolam, 2014). Responsive Design Uses Media Queries Another important element of a responsive web design is media query. Media queries allow designers to target device properties such a width, height, orientation, and so on (Powers, 2011; Mozilla Developer Network, 2014). Importantly, while media queries aimed to present web content compatible to different devices, the content itself is not changed (Mozilla Developer Network, 2014). In other words, the information that can be obtained in browsing by using smartphones and tablets is the same as one browses traditional desktop devices with bigger screens and wider resolutions. Is Responsive Web Design Better than Unresponsive Design? This is a careful scrutiny of both responsive and unresponsive designs used by many web developers today. While it is obvious that many well-known sites have been upgraded to adapt to the rapidly increasing number of mobile users who are browsing the internet (USAToday, 2014), there are still a number of websites that are built on unresponsive platforms. For instance, Croker (2012) presented screenshots of a responsive and a traditional website. Evidently, based on the visual results, a responsive website would definitely give an optimal browsing experience. Figure 1: Venveo.com was displayed on a mobile device with unresponsive and responsive web design respectively (Croker, 2012). Almost Unreadable Texts on Unresponsive Website When a website is loaded in a small screen, the entire page would render on screen with small fonts (Croker, 2012). Obviously, the user has the option to zoom in and out the web page, and then scroll the page vertically and horizontally to find the information the user wanted to consult (Lauyan Software, n.d.). Nevertheless, in an actual experience, this is time consuming and would less likely improve user experience. Presentable Layouts and Readable Texts With the technologies used in building a responsive website, the presentation is tailored to deliver the most important information to the user in a readable way (Nimesh, 2012). Fluid grids and media queries will examine the device’s properties and the user’s preferences and automatically renders information in a natural way possible. Hence, an image is displayed in its exact proportion with readable texts. The user has two options, scrolling the page up and down without having to zoom in because everything is readable (Lauyan Software, n.d.). Why or Why Not Website Needs Responsive Design? As argued by Steimle (2013), if a company depends on its website to transact business with its customers, then a responsive web design is vital to keep the customers and get an even larger share of the pie. As a number of internet users who are more preferred in browsing websites using mobile devices are increasing rapidly (USAToday, 2014), incorporating the website with the latest technologies of responsive design is indeed vital in keeping the business growing. As predicted, “the future is mobile” and if a business ignores the importance of the technologies behind responsive websites, customers would bounce off from a website without responsive layout and they would go to the competitors’ (Steimle, 2013). However, as discussed by Vuuren (2012), a responsive design may not be the best solution for business aiming to deliver innovative experiences to customers that does not limit on content alone. While responsive design is good in delivering content to users, responsive design limits the important designs needed to give users interactive experiences to a particular web application similar to the dilemma experienced by LinkedIn (Vuuren, 2012). In other words, if a user’s main purpose in visiting a website is to access helpful information – a responsive design may be the best solution. In Addition, a responsive design works best on content-based website wherein a user does more reading than interacting on different functionalities. As concluded by Prasad, the head of mobile development at LinkedIn, responsive design does not work with HTML5 (Vuuren, 2012). For instance, the LinkedIn’s iPad App is complicated as it aims to give different user experience other than providing content to its users. HMTL5 is the new version of HTML 4.01 and XHTML 1.0 coding system used by developers and supported by major browsers today, like Mozilla Firefox, Google Chrome and Internet Explorer (Kyrnin, n.d.; Conger, 2011). Moreover, the rapidly growing number of mobile users today suggests that they are using mobile devices for different end (Vuuren, 2012). Notwithstanding, websites that are responsive are subsets of the traditional web. In order to understand the concept, according to Meriam-Webster, a subset is a “group of things… that is part of a larger group”. In other words, a responsive design is not a standalone mobile application that can give a different experience that people are seeking today – responsive design is used to give a user an option to access the information of a traditional web using a mobile device, wherein it could stand alone on its own. Similarly, banks used unresponsive platform or web technology to give their clients distinct experiences in using mobile applications. For instance, a user can take a picture of a check and deposit it in his bank account using a mobile application (Vuuren, 2012). Obviously, this function is device-specific, an experience distinct than a user visit the bank traditional web. This application is not considered as a subset, but a whole and new mobile technology to deliver a better banking experience for the user. Thereby, responsive design is applicable when the users specific purpose in browsing the web using smartphones or tablets is to access helpful information other than doing specific tasks or actions like depositing a check to his bank account. Such specific functions require complex technologies that are best handled by unresponsive platform. Then again, highly authoritative websites that are built on responsive platform today like Starbucks, Mashable and NIU are aimed to improve user experience (Umbrell, 2013; NIU, n.d.) Responsive Navigation Menu Improves User Experience One of the most important facets of a website is the navigation menu. Friedman (2008), explained that a navigation menu is “the most significant element in a web design”. A website is an intangible object without a physical representation that will guide users where to find relevant information. A website is a relatively huge virtual library with hundreds or thousands of pages – an obvious and simple navigation menu can best serves its purpose. A responsive navigation menu guides a user where to go and “everything important… is connected to the navigation…” (Cristodina, n.d.). As user preference changes, a navigation menu must also adapt to the devices used by mobile users today. As discussed earlier, web developers use fluid grids and media queries, among other sets of technologies to turn an unresponsive web design to responsive layout to perfectly fit in different sizes of browsers (Nimesh, 2012; Powers, 2011; Mozilla Developer Network, 2014). Along with these changes, navigation menu has turned into a responsive element, as well. Navigation Menu Makes a Website Accessible Apparently, the navigation menu changes when viewed on mobile devices, as well (Nimesh, 2012; Knight, 2011; Powers, 2011). For a responsive website, the navigation menu plays an important role in helping users navigate to important pages of the website. In other words, the navigation menu makes a website accessible (Firdaus, n.d.). To understand the concept better, screen shots of a responsive website, Mashable, is presented below to distinguish the differences of a responsive navigation when viewed on desktop computers or mobile devices. Figure 2: Mashable.com viewed on a desktop computer (Mashable, Inc., 2014) Figure 2 shows that the navigation menu of the popular website, Mashable, is found at the top of the website. The next image will show what happens to the navigation menu when the browser is restored down. Figure 3: The navigation menu of Mashable resized when the browser was restored down (Mashable, Inc., 2014). The navigation menu is scaled to fit in the minimized browser window (Nimesh, 2012; Knight, 2011; Powers, 2011). The categories “Must Reads”, “Social Media” and “More” are retained and the other major categories are now part of the drop down menu “More”. To have a comprehensive comparison, a screenshot of the website is presented below when viewed on a mobile device. Figure 3: Mashable.com viewed on a mobile device (Mashable, Inc., 2014) Evidently, Mashable’s responsive navigation menu seamlessly fit with the varying sizes of the browsers and the devices. In figure 2, all main categories are displayed in the navigation menu. In addition, in figure 3, the rest of the main categories are now invisible and these are placed on the “More” menu. The “More” menu is a dropdown; the rest of the menus (categories) will be shown as dropdown when the user hovers on it. Take note that in figure 3, there are only three menus on the navigation bar, the menu symbol, the Mashable.com logo, and the dropdown search box. When the user click on the menu symbol, a drop down will appear as presented in figure 3. These screenshots show that the responsive navigation menu changes from horizontal to vertical when the website is viewed on mobile devices and varying screen sizes (Boudreaux, 2013). All things considered, busy individuals who are multitasking from one assignment to another want an application or tool that will help complete tasks easier in a timely manner. Hence, the responsive navigation menu presents a clutter-free navigation system for the user. Consequently, this would give the user the ease in navigation that eventually improves the browsing experience (Firdaus, n.d.). When the menu symbol is clicked, the rest of the content will be pushed behind the screen, and the user now has the luxury to select categories or menus to navigate into. For instance, if the user is looking for popular random news around the world, he can choose the “Must Reads” menu at the dropdown (Boudreaux, 2013). The Navigation Menu Aids User to Complete a Task Easily While the navigation menu is the most important part of a web design (Friedman, 2008), it should be positioned and developed not to dominate the page. Importantly, the user can find the information effortlessly because the website is accessible (Firdaus, n.d.). The drop down menu and the search box of Mashable, for instance, aids the user to complete his task in no time and the user can concentrate more on reading and digesting the material. It cuts down a significant amount of time in searching for content because “… important information is presented in a user readable way” (Nimesh, 2012). Bibliography UMBRELL, C. (2013). Whats Your Response to Responsive Design? [Online] Available from: http://www.asaecenter.org/Resources/ANowDetail.cfm?ItemNumber=331722 [Accessed: 17th December 2014]. NORTHERN ILLINOIS UNIVERSITY. (n.d.) A responsive niu.edu. [Online] Available from: http://www.niu.edu/webteam/resources/docs/A%20responsive%20niu.pdf [Accessed: 9th December 2014]. NIMESH, R. (2012). How Fluid Grids Work in Responsive Web Design. [Online] Available from: http://www.1stwebdesigner.com/tutorials/fluid-grids-in-responsive-design/ [Accessed: 9th December 2014]. KNIGHT, K. (2011) Responsive Web Design: What It Is and How To Use It. [Online] Available from: http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ [Accessed: 9th December 2014]. KOLAM, H. (2014). A New Turning Point for Responsive Web Design. [Online] Available from: https://www.instartlogic.com/blog/responsive-browser/#.VJGRWNKUc5w [Accessed: 17th December 2014]. SCIENCEWEB AUSTRALIA. (2013) Background information Year 5, unit 1: Solids, liquids and gases. [Online] Available from: http://scienceweb.asta.edu.au/verve/_resources/asta_4-1-1_bi_solids_yr5_v4-2.pdf [Accessed: 9th December 2014]. POWERS, D. (2011) Introduction to media queries – Part 1: What are media queries? [Online] Available from: http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-queries.html [Accessed: 9th December 2014]. MOZILLA DEVELOPER NETWORK. (2014) CSS media queries. [Online] Available from: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries [Accessed: 9th December 2014]. USATODAY. (2014) More Americans using mobile devices to access Internet. [Online] Available from: http://www.usatoday.com/story/tech/2014/10/15/mobile-devices-americans-ntia-us-commerce-department/17329739/ [Accessed: 9th December 2014]. CROKER, B. (2012) A Visual Comparison of Responsive Web Design. [Online] Available from: http://www.venveo.com/articles/a-visual-comparison-of-responsive-web-design [Accessed: 9th December 2014]. LAUYAN SOFTWARE. (n.d.). What is the Responsive Web Design? [Online] Available from: https://www.lauyan.com/en/responsive-webdesign-faq.html [Accessed: 17th December 2014]. STEIMLE, J. (2013) Why Your Business Needs A Responsive Website Before 2014. [Online] Available from: http://www.forbes.com/sites/joshsteimle/2013/11/08/why-your-business-needs-a-responsive-website-before-2014/ [Accessed: 9th December 2014]. VUUREN, C. (2012) Mobile Apps: The Trouble With Using Responsive Design. [Online] Available from: http://www.forbes.com/sites/ciocentral/2012/11/18/mobile-apps-the-trouble-with-using-responsive-design/ [Accessed: 9th December 2014]. CONGER, C. (2011) What is HTML5? [Online] Available from: http://news.discovery.com/tech/what-is-html5-111007.htm [Accessed: 9th December 2014]. KYRNIN, J. (n.d.) HTML5 Information. [Online] Available from: http://webdesign.about.com/od/html5/qt/html-5-information.htm [Accessed: 9th December 2014]. MERIAM-WEBSTER, INC. (n.d.) Subset. [Online] Available from: http://www.merriam-webster.com/dictionary/subset [Accessed: 9th December 2014]. FIRDAUS, T. (n.d.). How To Create A Responsive Navigation. [Online] Available from: http://www.hongkiat.com/blog/responsive-web-nav/ [Accessed: 9th December 2014]. BOUDREAUX, R. (2013). Create navigation bars with Responsive Web Design techniques. [Online] Available from: http://www.techrepublic.com/blog/web-designer/create-navigation-bars-with-responsive-web-design-techniques/ [Accessed: 9th December 2014]. FRIEDMAN, V. (2008) Navigation Menus: Trends and Examples. [Online] Available from: http://www.smashingmagazine.com/2008/02/26/navigation-menus-trends-and-examples/ [Accessed: 9th December 2014]. Read More