Responsive Web Design - Literature review Example

Responsive Web Design Insert Insert Evolution of websites in the early 1990s brought a lot of unimaginable benefits to the world. Since that time, website designer have been experimenting with new designs that will improve universal user experience while using the web. The experiments are in line with the most important design principle of the world wide web, universality, outlined by its creator Tim Berners-Lee (Lloyd, 2012). Berners-Lee (2010) said that the web should be open, accessible from any hardware and browser that has a connection to the Internet. The world wide web should also be accessed by all kinds of people even those with disabilities. RWD is gaining a lot of popularity in recent times as from the year 2010. Use of responsive web pages has been popularized by the extensive us of smart-phones and tablets. Browsing through mobile phones has been foreseen to grow and outgrow browsing through the personal computer since the early 2000 and the move to mobile phone browsing dominance is predicted to take place around 2013 and 2016 (Marcotte, 2010).It has also been predicted that the sales of tablets will surpass the sale of personal computers and laptops by the year 2014 (Joly, 2013). The statistics leave web designers with no option but to optimize web pages to the user-friendly to the larger market share. Responsive web pages have achieved and maintained a rich user experience on very many different devices. Responsive web pages have used several technologies over the last few years to make this happen. Responsive web design is gradually changing from being entirely device centered into being context focused. The elements of RWD that make it successful are flexible media, fluid layout and media queries. In contrast to fixed layout that uses specified static unit like pixels, points, and inches, fluid design uses relative units and percentages (Nebeling & Norrie, 2013). Fluid design of RWD is made to be relative to the viewpoint or window width of the browser being used. Child elements are also made to be corresponding to the widths of their parent elements. Gardner, (2011) says that video, plugin content or images, which form part of flexible media, are achieved using relative units. The Relative units specify the width of the media inside their main container elements. Earlier technologies used fixed layout that had fixed width wrapping items. The elements will be of the same width for all users regardless of the device being used to view the website. Same width elements will be viewable, even though, the items inside the wrapper can have a fluid width. A richer user experience can be achieved when flexible layout is used in the design of the web pages. When (Knight, 2009) contrasted fixed layout to flexible design, he found that fluid layout have fluid width elements and wrappers with their width parameters set as %. This will allow parts to adjust to the available screen resolution or the viewport width. It continues to point out that this makes the perfect designs for creating varying browser viewpoints. In context, an 88% wide layout will always take 88% of the available viewport width, and it will be maintained across all mobile or PC browsers. Flexible media is extensively used in responsive web design; it is achieved by setting the media images to occupy no more that 100% of the width of the containing element with CSS property max-width: 100%. Images take space according to their pixel dimensions, but the CSS max-width property will prevent the images from becoming larger that the specified max-width value. The CSS property will preserve the correct aspect ratio. Max-width property in CSS is universal and can be applied to other media elements like rich media and video (Marcotte, 2011). Media queries are a critical part of CSS and responsive web design. Media queries are used as a way of grouping directives for CSS, which are loaded when the condition matches the query. When the browser window width matches the set width in the media query, the browser uses the corresponding styles. A major importance of Media Queries is that it makes it possible to respond to several screen sizes and resolutions and the style content accordingly. Directives in media queries are known as break-points, and they are defined in pixel units. @media screen and (max-width: 700px) {/* CSS rules for this query */}. From the media query above, a 700 pixels max-width break-point will trigger, when the viewport width increases past 700 pixels. Critics of web design argue that despite the numerous hype attached to mobile web design with responsive web design does not achieve what is expected of them. Responsive design confuses the end user. A good example blogs that have a standard design format that with content on one side, header on top and a sidebar on the other side. This model is used in millions of blogs that users have become accustomed to. Blogs developed with responsive design will have a sidebar that disappear or moved to the bottom or top of the page. It will not be at the at the place where users are expecting it to be, giving an inadequate users experience. Another downfall of responsive design is the argument that it often does not reduce the load time. A common practice of responsive web designers is to hide elements with the notion that it will reduce load time. In actual sense, hiding the elements does not prevent them from being loaded. The practice means that load times in mobile browsers is not better than those in desktop browsers. In actual sense responsive web design is a violation of some usability rules which states that " a web page should not make the web user, in this case, a user on a mobile phone feel like he or she is not in control". Navigation is a crucial aspect of improving website user experience. Responsive design uses several menu implementation concepts that have been successful in enriching a users experience while navigating through a website. The main menu implementation concepts in RWD include select, full horizontal, custom dropdown and off the canvas. Select menu approach will hide the basic menu of desktop screens on small mobile phone screens and will show a select menu. The select menu alters the window location on small screens, and it also hides the select on bigger screens. Implementation of the select menu approach is very easy and advantageous since it does not need a lot of space, and it uses native and basic screen controls. The downfall of it is that the web designer has to incorporate JavaScript; the select property is not universal to every browser and finally content has to be duplicated which brings a lot of redundancies. Full horizontal is the simplest approach to implementing menus in RWD. The list menu elements on small screens have their width set to 100%. The menu elements will occupy the whole mobile phone screen with the several menu elements. This means that a lot of screen space is reserved for the menus. Full horizontal is very simple for the web designer to implement since it does not need any extra HTML or JavaScript. Custom dropdown in RWD uses a simple concept of hiding the basic large screen menus and showing label that contains the menus. The menus on a small screen will be displayed underneath the label if it is clicked. Custom drop-down has extensively improved user experience since the menu does not need a lot of space when it is closed. It does not also require any JavaScript or more custom styling to be done on the code. Its only downside is that a wed designer will need extra HTML code to fully implement it since checkbox is not supported well in some older mobile web browsers and is not the default Android browsers that are older that Android 4.1.2. The other menu approach in RWD design is the Off Canvas. Off the canvas also hides the basic desktop browser menu in small screens and instead shows an HTML input and label instead. When the label is clicked, the menu appears and flies in from the left side of the screen, and the web content is moved to the right. The concept divides the screen with the menu items getting more screen size than the content. The advantages of off canvas are that, it doest need much space when the menu has been closed. It uses just a custom styling and does not need any JavaScript during its implementation. The main disadvantage of canvas is that, the menu is at an absolute position on the body, and this makes the menu feel like it is in a fixed position. The ultimate experience of RWD is achieved when the menu can appear as expected in all the ipad and mobile phone browsers including Internet Explore 8 and below. The menu implementation methods above work in most web browser and since IE 8 and below is not supported in any mobile browser; the best user experience has been realized in almost all mobile phones and tablets. Menus created for bigger screens create complex navigational mazes in small viewports but implementation of the menu concepts above tried to solve the issues. Responsive web design approaches above have created collapsible navigation wrappers or input label that shows a single level at once. Other levels of navigations will be opened and closed using input label buttons. Despite the challenges in optimizing navigation, responsive web design has ensured reliable navigation menus in different devices where it has achieved minimal scrolling and resizing. Gardner (2011) points out the numerous advantages of responsive web design over other methods of web design. Creation of only one model that covers all screen resolutions for different mobile platforms, it maintains a users browser experience since responsive web design will maintain the same usability. Responsive web design will eventually lower the costs of development despite the initial cost being slightly higher in the early stages of development. Responsive web design improves web positioning since only one URL exists. Existence of one URL will enable web developers to simplify web metrics, and analysis is making it easier to understand user behavior on the websites. One URL will also allow maintenance, management tasks and web updates more comfortable. Despite the numerous advantages of responsive web design, some of its elements have not fully optimized users browsing experience. This is in comparison to other methods of achieving viewing webpages in mobile browsers like mobile web applications. Responsive web design does not offer a user experience as rich as Mobile web Application. Mobile Web Application is creation of a separate mobile web page separate from the main web page that is viewed through desktop browsers. Responsive web design does not adequately account for different devices, different circumstance and different goals like mobile web application. Responsive web design fully supports top to bottom navigation menus and is not entirely optimal for left to right navigation menu. Responsive web design takes a longer development cycle especially web an already existing web page is to be rebuild t accommodate responsive web design technologies. A survey by Tribulus Mobile, April 2014, conducted on the impact of heavy images in responsive websites on experience of mobile users found out that: image size is critical in ensuring websites load quickly and designers need to ensure that images being used are at their smallest size possible. From the survey 4 out of 5 highly rated responsive designed websites, page load time and page weight were sub-optimal. 69% of the sampled responsive websites were image-heavy. Responsive websites performed poorly on mobile phones used where, 21 percent of the sampled sites responded with acceptable load times. From the survey server-side image optimization had high percentage gains on mobile devices. There was a 77% reduction in image weight, and the page-load times were significantly reduced with a range between 28-54%. Conclusion Achieving an optimal or exceptional users experience requires something more than just defining layout and style sheets for different screen sizes of mobile devices. Creating a balance between development cost, maintenance cost, performance and user context are very critical in fully implementing responsive websites. In general responsive websites will achieve a rich experience in multiple sites but need incorporation with other server-side technologies as they will fine tune user experience. This is mainly because responsive sites have some limitation in user context and performance. Responsive web design is a better recommendation than other modes of web design due to the balance created between costs and user experience in a variety of devices. But most importantly designers should consider that its all about content in web design. References Caceres, M., Marquis, M., Weiss, Y., & Bateman, A. (2013). The picture element (No. 20130226). W3C. Gardner, B. S. (2011). Responsive Web Design: Enriching the User Experience. Connectivity and the User Experience, 13. Hume, A. (2011, July 7). Responsive by Default. andyhume.net. Retrieved May 13, 2013, from http://blog.andyhume.net/responsive-by-default/ Joly, K. (2012). One Design to Rule Them All. University Business, 15(2), 49–50. Retrieved from http://www.universitybusiness.com/toc/6387. Knight, K. (2009, June 2). Fixed vs. Fluid vs. Elastic Layout. Smashing Magazine. Retrieved April 10, 2013, from http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/ Lloyd, P. R. (2012, September 25). The Web Aesthetic. A List Apart. Retrieved April 13, 2013, from http://alistapart.com/article/the-web-aesthetic McGrane, K. (2012). Content Strategy for Mobile. A Book Apart. Mohomed, I., Cai, J. C., Chavoshi, S., & de Lara, E. (2006). Context-aware interact- Give content adaptation. The 4th international conference (pp. 42–55). New York, New York, USA: ACM. Doi:10.1145/1134680.1134686. Marcotte, E. (2010). Responsive Web Design. A List Apart, (306). Retrieved from http://alistapart.com/article/responsive-web-design/ Nebeling, M., & Norrie, M. C. (2013). Responsive design and development: methods, technologies and current issues (Vol. 7977, pp. 510–513). Present at the ICWE13: Proceedings of the 13th international conference on. Web Engineering, Berlin, Heidelberg: Springer-Verlag. Schilit, B. N., Trevor, J., Hilbert, D. M., & Koh, T. K. (2001). M-Links: An infrastructure for very small internet devices (pp. 122–131). Presented at the MobiCom 01: Proceedings of the 7th annual international conference on Mobile computing and networking, New York, New York, USA: ACM Request Permissions. Tribili Mobile, (2014). Responsive Web Design: Why Image Optimization is Crucial To A Mobile-Friendly Customer Experience. Retrieved from http://blog.trilibis.com/trilibis-web-performance-survey-finds-69-percent-of-responsive-design-websites-fail-to-deliver-acceptable-load-times-on-mobile-devices-02759. Ewer Tom, (2015). Reasons why Responsive Design is not Worth It. Retrieved from https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it. Read More