Responsive Website in Modern Development: Approach, Designing, Testing and Analysis

Journal of Web Development and Web Designing Volume 5 Issue 1

Mu’awuya Dalhatu*1, Aliyu Sani Ahmad1, Babando Abdul Rashid Aliyu2, Aliyu Umar3 1Lecturer, Department of Computer Science, Federal University Wukari, Taraba State, Nigeria 2Senior Program Analyst, Department of ICT Unit of Advanced Manufacturing Technology Program Jalingo, Taraba State, Nigeria 3Lecturer, Department of Mathematical Sciences, Taraba State University Jalingo, Taraba State, Nigeria

INFO ABSTRACT

Corresponding Author Being in a digital era where human depends on web E-mail Id: applications to survive; there are needs to understand *[email protected] websites and applications. The web applications are of different types, static sites do not provide user DOI: satisfaction while dynamic website fair, in this modern time technology innovation provide us with an advanced method of developing a website to accommodate Cite as: emerging hardware and provide a great user experience. This website is called Responsive Website. Responsive Website is the approach that suggests that design and development should respond to a user’s behaviour and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and intelligent use of CSS media queries. As the user switches from their laptop, iPad to mobile, the website should automatically switch to accommodate for resolution, image size and scripting abilities. This paper presents the approaches involved in designing a responsive website in modern perspectives, it also demonstrates testing to investigate the performance of various design approaches or methods as well as the analysis of the performance result on each design approach using a google chrome developer tool.

Keywords: Approach, analysis, development, designing, modern, responsive, performance, testing, website

INTRODUCTION approaches to responsive web design: Responsive web design is a concept Client-side approach and Server-side where a single Universal Resource approach [1]. Marcotte states that Media Locator (URL) is used to render query, flexible grid and responsive image appropriate layout and its content to are the major technical requirements for different devices. There are several designing a responsive website [2].

Journal of Web Development and Web Designing Volume 5 Issue 1

MEDIA QUERY FLEXIBLE GRID Media query is created by W3school as Flexible grids are like a table with rows part of CSS3 specification [2]. Media and columns that allows developers to query may simply be considered as a restructure layout contents based on class conditional statement that helps web of the devices such as phone, tablet or developers to render appropriate layouts desktop. There are several approaches to and widgets by determining the physical design flexible grids. The first approach is properties of the devices. The checking of by using Cascading Style Sheet (CSS) devices’ physical properties is easily which depends on “minimum screen achieved by classifying the devices based resolution” [3]. Another alternative is on their screen sizes. For example, a provided by frameworks. The most device with screen size less than 500px popular frameworks are Bootstrap and may be classified as a very small device or foundation. In this paper, bootstrap is used phone; a device with screen size more than in designing this website because it is easy 1200px may be classified as a Desktop. to learn and use, there are adequate With these criteria, a media query can be tutorials and documentations about it. used to target a particular class of device. Media query increases the level of A maximum of 12 columns can be created responsiveness. However, responsive across page with the bootstrap grid system website is beyond rendering appropriate and columns can be merged to create layout to a target device because it has to wider column [4]. To make it easier, do with performance as shown below. In bootstrap recognises four classes of this paper, a chrome developer tool was devices: phones (extra small device), tablet used for the performance tests. (small device) and laptop (medium).

PERFORMANCE TEST FOR FLEXIBLE GRID AND BREAK-POINTS Table 1: Flexible Grid (Without break-points). Input Parameter Desktop iPhone No. of request 18 18 Page Size 2.1MB 2.1MB Rendering time 6.94 Sec 6.77 Sec

Table 1 shows that the website the devices, browsers or networks. maintains the same number of request Therefore, the performance test will be and weigh the same both on Desktop evaluated based on the size and number and iPhone. This shows that the flexible of requests except where otherwise a grid alone does not show a noticeable significant difference on rendering time effect on the website’ number of request is noted. Refer to Fig. 1 for more and size. However, it is not clear if the information for the iPhone and Desktop change in rendering time has to do with respectively.

Figure 1: Information for the iPhone and Desktop (Case 1).

Table 2: Flexible Grid with break-points (using bootstrap + media query). Input Parameter Desktop iPhone No. of request 17 17 Page size 2.1MB 2.1MB Rendering time 6.66 6.66 Sec 6.86 Sec

Journal of Web Development and Web Designing Volume 5 Issue 1

Table 2 is similar to the result obtained advantage of rendering appropriate in Table 1 above. However, a noticeable layout structure to each device. Refer to difference is noted in restructuring of Fig. 2 and 3 for more information for the layout on iPhone. This shows that the iPhone and Desktop respectively. break-points’ effect is mainly on layout The number of requests was reduced to structure because the same size is 17 because the following bugs were loaded to a client regardless of client’s fixed. devices or browsers. This has the

Figure 2: Information for the iPhone and Desktop (Case 2).

However, the same result is obtained with probably due to the added scripts for the slight increase in the number of requests menu. Refer to Fig. 4 for more information after a hamburger menu is implemented. for the iPhone and Desktop respectively. The increment of requests from 17 to 24 is

Figure 3: Information for the iPhone and Desktop (Case 3).

Figure 4: Information for the iPhone and Desktop (Case 4).

MOBILE FIRST is not all about rendering layout to fit Wroblewski states that mobile first allows small screens, rather it is about optimising web designers and developers to present performance and loading vital content very different layouts, options and information quickly [7]. To optimize performance, to different class of devices [5]. Mobile developers should start with a minimum first is important because it can be used to and less complicated code targeting mobile increase performance by prioritising layout devices [7]. CSS, Media query or content and only load items with higher JavaScript are used to enhance the layout priority on mobile device. The less and render more items and information as prioritised items or options should only be the screen gets wider. This suggests that loaded based on user’s request or as the conditions for small screens are first screen gets wider. This can save mobile considered before the conditions for wider users from unnecessary use of their limited screens are set. This differs with the old bandwidth or waiting time for loading approach where conditions for large unnecessary data, options or information. screens are initially set while conditions Mobile first helps mobile users to for smaller screens are set as the screens experience a fast response from a server gets smaller [8]. Two or more CSS files and it requires developers to focus on most can be created and served an appropriate important data due to a limited availability one to the respective class of devices. This of screen [6]. Frost states that mobile first website uses JavaScript, media query and

Journal of Web Development and Web Designing Volume 5 Issue 1

AJAX to implement the features of mobile.

Performance Test for Mobile First

Table 3: Conditional loading of a logo and a database. Input Parameter Desktop iPhone before checking iPhone (after checking database) database) No. of request 4 4 5 Page size 26.6KB 26.6KB 26.9KB Rendering time 1.12 Sec 1.17 Sec 2.4 Sec

The results in Table 3 did not show a communicate with a server and provide significant difference both on iPhone a user with instance feedback for their and Desktop because the loaded image chosen username without refreshing the is a logo which is lighter (about 24KB). entire page. The logo is loaded The logo is used because the mobile conditionally. It is hidden on iPhone and first features were implemented on replaced with a ‘Show Logo’ button to signup page. Ajax and JavaScript were allow a user to make a request if they used in achieving the conditional like. Refer to Fig. 5 for more loading of the logo and checking a information for iPhone and Desktop database for username. Ajax is used to respectively.

Figure 5: Information for the iPhone and Desktop (Case 5).

Table 4 below shows a result obtained Desktop is delivered to iPhone. This after the logo is replaced with a means that mobile first provides a different image which is heavier than convenient way of increasing the logo. The Table shows a significant performance. Refer to Fig. 6 for more difference in page size where less than information for the iPhone and Desktop 5% of the total size delivered to a respectively.

Figure 6: Information for the iPhone and Desktop (Case 6).

Table 4: Conditional loading of an image. Input Parameter Desktop iPhone No. of request 4 4 Page size 375KB 2.6KB Rendering time 1.33 Sec 1.17 Sec

RESPONSIVE IMAGE order to render appropriate layout to each Responsive image allows browsers to device or screen size. Another form of automatically adjust the size of images in responsiveness is serving different copy of

Journal of Web Development and Web Designing Volume 5 Issue 1

the same image to different devices based tag help web developers to render on some factors. appropriate image to each device based on factors like viewpoint, screen size, or There are several approaches to make screen resolution [9]. Another alternative images responsive. MTML5 provides the includes framework like bootstrap. simplest way of making images responsive. This is achieved by using img- In order to study performance effect of responsive class in image tag. This more than one approach, this website uses however, has a disadvantage of serving the both the picturefill and HTML5 to make same size of image for all the devices. The images responsive. However, Picturefill responsive class mainly resize an image seems to be better and more advanced size to fit the target screens. The process of because it considers issues like user’s resizing an image may decrease preference and bandwidth and it allows the performance by increasing CPU overhead. support of old browsers and use of CSS and media query in some cases. Therefore, Another approach is by using picturefill. picturefill provides a means of achieving The attributes srcset and size with picture better performance.

Performance Test for Responsive Image Table 5: Conditional Loading with picturefill. Input Parameter Desktop iPhone No. of request 37 37 Page size 2.4MB 444KB Rendering time 12.31 Sec 6.93 Sec

Table 5 above shows that implementation are used. Heavier images are delivered to of responsive image using picturefill has a Desktop while lighter images are delivered significant effect on both the size and to iPhone. This improved loading time and loading time of a given website or page. save bandwidth on iPhone. About Four This is achieved by rendering different images are used in carousal. Refer to Fig. 7 images to different class of devices. The for more information for the iPhone and same copies of images with different sizes Desktop respectively.

Figure 7: Information for the iPhone and Desktop (Case 7).

RESPONSIVE DESIGN + SERVER designs or options to different class of SIDE (RESS) ELEMENTS devices. Unlike the client-side, As explained above, the client-side Wroblewski (2011) states that the server- detection is used to deliver appropriate side “generally rely on user agent redirects layout structure and its content to a to device-specific code templates” [1]. particular class of devices using a single This makes server-side detection ideal for URL or hyperlink. Server-side is another optimization because it can be used to alternative for improving users’ experience provide clients with only what they need. and optimizing performance. It can be There are several approaches in used to deliver different layout structures, implementing Server-side detection and

Journal of Web Development and Web Designing Volume 5 Issue 1

RESS is one of the strategies [1]. Sæterås appropriate store. This suggests that an and Passani state that RESS allows option for Apple App Store is rendered on optimization on both the Client-side and iPhone devices, Google Play Store is Server-side to be achieved [10]. Several rendered on Android devices and no tools are being used in RESS downloading option is rendered on implementation. The tools include Desktop. Moderns, JavaScript, and Device- Description Repository [10]. Other tools or Performance Test for RESS Elements frameworks includes: WURFL (Wireless Table 6 shows the result obtained before Universal Resource File), DeviceAtlas and the implementation of the RESS on the DetectRight [11]. WURFL is used in the login page. Refer to Fig. 8 for more implementation of the Server-side information for the iPhone and Desktop detection on this website. The RESS before the implementation of the RESS elements are implemented on the website’ respectively and Fig. 9 for more login page. The Server detects the visiting information for the iPhone and Desktop devices and renders an option for after the implementation of the RESS downloading an application from respectively.

Table 6: Result obtain before implementation of the RESS. Input Parameter Desktop iPhone No. of request 2 2 Page size 1.5KB 1.5KB Rendering time 283 Millisec 335 Millisec

Figure 8: Information for the iPhone and Desktop (Case 8).

Figure 9: Information for the iPhone and Desktop (Case 9).

Table 7: Shows the result obtained after the implementation of the RESS on the login page. Input Parameter Desktop iPhone Android No. of request 6 6 6 Page size 16.6KB 18.2KB 17.6KB Rendering time 415 Millisec 318 Millisec 304 Millisec

Table 7 shows the same page size and to identify the visiting device. The table number of requests for both Desktop and also shows the same number of requests in iPhone. This is because no Server-side all cases because no further request is detection or optimization is made. Table 7 made upon detection of each device. The shows a slight increase in the number of increase in page size from 16.6KB on request and the page size. This is due to Desktop to 18.2 on iPhone is due to the the WURFL library and its implementation loaded button and its label for Apple App of JavaScript. The significant increase in Store. The difference in page size on the rendering time after the iPhone and Android is probably due to the implementation is due to the time required

Journal of Web Development and Web Designing Volume 5 Issue 1

size of image label on their respective 4. W3Schools (2016), “Bootstrap 3 button. Tutorial”, [Online] Available from: http://www.w3schools.com/bootstrap/. CONCLUSION 5. Luke Wroblewski (2010), “Mobile Both the Client-side and Server-side First Helps with Big Issues”, [Online] detections provide a means of enhancing Available from: users’ experience and performance http://www.lukew.com/ff/entry.asp?11 optimization. The Server-side avoids 17. loading the unnecessary widgets while 6. Luke Wroblewski (2009), “Mobile Client-side suppresses the loaded widgets First”, [Online] Available from: from displaying which can have effects on http://www.lukew.com/ff/entry.asp?93 performance in many cases. 3. 7. Brad Frost (2012), “Creating a Mobile- The performance testing carried out First Responsive Web Design”, suggests that implementing a single [Online] Available from: technique such as Mobile-first, responsive http://www.html5rocks.com/en/mobile image or RESS will probably not provide /responsivedesign/. the desired optimization. This suggests 8. Jeremy Keith (2011), “Conditional that a combination of both the Client-side loading for Responsive Designs”, and Server-side is required to achieve a [Online] Available from: desired experience or optimization. https://24ways.org/2011/conditional- loading-for-responsive-designs/. REFERENCES 9. Picturefill, “A Responsive Image 1. Luke Wroblewski (2011), “RESS: Polyfill”, [Online] Available from: Responsive Design + Server-Side http://scottjehl.github.io/picturefill/. Components”, [Online] Available 10. 10. Jon Arni Sæterås, Luca Passani from: (2014), “Server-Side Device Detection http://www.lukew.com/ff/entry.asp?13 with JavaScript”, [Online] Available 92. from: 2. Ethan Marcotte (2010), “Responsive https://www.smashingmagazine.com/2 Web Design”, [Online] Available 014/07/server-side-device-detection- from: with-javascript/. http://alistapart.com/article/responsive- 11. Ronam Cremin and Luca Passani web-design/. (2012), “Server-Side Device 3. Ethan Marcotte (2009), “Fluid Grids”, Detection: History, Benefits and How- [Online] Available from: To”, [Online] Available from: http://alistapart.com/article/fluidgrids. https://www.smashingmagazine.com/2 012/09/server-side-device-detection- history-benefits-how-to/.