Responsive Website in Modern Development: Approach, Designing, Testing and Analysis
Total Page:16
File Type:pdf, Size:1020Kb
Journal of Web Development and Web Designing Volume 5 Issue 1 Responsive Website in Modern Development: Approach, Designing, Testing and Analysis 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]. 1 Page 1-7 © MAT Journals 2020. All Rights Reserved 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 2 Page 1-7 © MAT Journals 2020. All Rights Reserved 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 3 Page 1-7 © MAT Journals 2020. All Rights Reserved 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).