Abstract— that they can be accessed on electronic

Abstract— This paper describes an aspect of resolutions andresponsiveness in the study of responsive web designing. Nowadays, almost allthe websites are designed with responsive design layout so that they can beaccessed on electronic devices of all different sizes and all the possibleresolutions.Responsive web design is widely adoptedto maintain usability across a wide range of devices and screen sizes in comparison to earlier approaches whichhad focus only on mobile or non-mobile (desktop) devices. In this paper, I amgoing to analyze if we need ‘n’ number of responsive designs and for ‘n’ numberof resolutions for better user experience.

This paper also describes if aresponsive design is adaptive or not. While describing this, a new term”Adaptive Web Designing” is discussed giving a new concept to one of theresearch questions. At last, apps are verified according to the guidelines.Overall, this paper gives us an idea of responsiveness of websites which worksat the back-end and the user does not even notice if the website is responsiveor adaptive.

Keywords: Responsive design, screen resolutions,different layouts,  adaptiveness,guidelines       I.           INTRODUCTIONThe phrase”responsive web design” (RWD) was first explained by Ethan Marcotte in 2010 1.This new paradigm opens the way for designs to respond to users’ behavior andenvironment irrespective of screen size, resolution, platform or orientation 5.Mobile phones usability is on the peak nowadays as most of the people cannotcarry their desktops or even laptops everywhere. With this, everyone wants tobe in touch with social media and needs to access the websites with auser-friendly interface that can be provided if a responsive design forspecific websites is made.

Mobile apps are the best solutions to keep up withsocial media but what if a person wants to get immediate access to recent newsheadlines if he does not know a specific app? The best solution in this casewill be browsing a news website and responsive design of that site willconvince the user to use the same site again when needed. The term ‘ResponsiveWeb Design’ does not depend on the screen size actually but on the resolutionof the screen. With responsive design, web applications are designed torobustly fit into the screen sizes and resolutions of every device dynamically2. Since, different screen sizes have different viewports, the Web content onthe devices vary in size and display style. In addition, it also introducesnavigation challenges as resolution is a critical variable, it impacts bothsize of text on the screen and the actual amount of information that can bedisplayed3. These challenges are overcome by making the websites responsive.Diagram 1 below shows that how a responsive design changes the view of awebsite.

Best services for writing your paper according to Trustpilot

Premium Partner
From $18.00 per page
4,8 / 5
Writers Experience
Recommended Service
From $13.90 per page
4,6 / 5
Writers Experience
From $20.00 per page
4,5 / 5
Writers Experience
* All Partners were chosen among 50+ writing services by our Customer Satisfaction Team

Diagram 1From manufacturing to highly competitive arenas such as retailbanking, insurance and travel, every millisecond of responsiveness on the Website counts.”Senior Technical Specialist at iTrinegy, clarifies that “Websitevisitors hate delay and the impact of slow response times on revenue have beenwell documented”. For example, Amazon calculated that a page load slowdown of just one second could cost it$1.6 billion in sales each year.”Factorsaffecting the responsiveness:·        WebPage Size: Bigger the page, more is the response time.

·        Fullpage load time: The web pages do not load fully in some cases and need to bereloaded.·        Back-End Server: When the traffic to a websitesuddenly increases, the web server gets more requests than it can handle andfails to function efficiently.·        The Database: Sometimes the queries being executeddo not use correct indexes resulting in delay of response. ·        The Network: Some websites do not cope up withthe delays caused by the range of network.

 Most of thepeople are mistaken that the clarity and content display depends on the size ofscreen. The content to be displayed on different screens or devices does not dependon the screen size but on the resolution of a particular device. Screen sizesand resolution vary a lot from each other. Besides this, a website to beresponsive is also a major factor. Here, the question arises that are we makingresponsive design for each and every website to browse it on every device? Ifyes, then it can be a strenuous task for companies applying such functionalityto each and every website to make it user-friendly. This question made me eagerto know more about this technique.RQ1: Do we haveto make ‘n’ number of responsive designs if we have ‘n’ number of resolutions? Responsivedesign has been defined by several researchers as it is actually not a singletechnology but a set of techniques that allow web pages to serve the needs ofboth mobile and desktop users 1.

We perform an exploratory study to examinehow websites respond with respect to the resolution or viewport of the browsingdevices.RQ2: Is ResponsiveDesign adaptive or not ? We have20 websites and we find out whether their responsive design is fully adaptiveor not. This research questionsomehow links to RQ1.RQ3:Analyzingwhether web applications are made according to the guidelines or not? Forthis research question, iOS guidelines were studied and 20 applications including built-in  iPhone applications and the app store wereexamined.  Paper Organization The remainder of this paper isorganized as follows. Section II discusses prior related work.

Section III presentsthe detailed methodology used to reach our findings. Section IV explains theresults of project including motivation, approach and findings associated toeach research question. Section V lists the threats to the validity of thispaper. Finally, Section VI concludes the paper.              II.

           RELATEDWORK In this section,we summarize the related work along three research directions: (a) creating ‘n’responsive designs for ‘n’ resolutions; (b) adaptiveness of responsive deign;and (c) iOS apps meeting the iOS guidelines(a) Creating ‘n’ responsive designs for ‘n’resolutions:The responsive web design (RWD) is a method introduced to assist in therealization of the dream of a “One Web” (Gardner (2011) as cited in Groth 3). The RWD combines the capabilities of HTML5 and CSS3 whichenables it to flexibly adapt to different screen sizes 3. It wasintroduced to solve the user experience problems associated with the static webdesign paradigm. As there arevarious layouts to adjust the web content on the web pages.

These layoutsdepend on the resolution of the devices. Screen resolution is the term used forthe number of pixels a screen contains horizontally and vertically. Also, samescreen sizes can have different screen resolutions (number of pixels).

Hence,the screens with more resolution are more clear than others. For example, inthe table below, we have three laptops with similar screen sizes but differentscreen resolutions.  Screen Size Screen Resolution (Horizontal x Vertical) Also known as 15.6″ 1366 x 768 HD (High Definition) 15.6″ 1600 x 900 HD+ (High Definition+) 15.6″ 1920 x 1080 FHD (Full High Definition) Table 1With respect to these resolutions, the media query allowsthe page to have different CSS style rules based on characteristics of thedevice the site is being displayed on. Media Queries isa CSS3 module allowing content renderingto adapt to conditions such as screen resolution.

(b) Adaptiveness of responsive deignA website is adaptive if we it can molditself to the display of the screen or we can say the environment. With thepresence of responsive websites, usability of websites is broken down into thevarious goals such as the effectiveness, the efficiency, safety, utility,learnability and memorability as stated by Neilson6. For increasing theusability aspects, the websites are made adaptive. There are two approaches toadaptive websites (i) Customization and (ii) Optimization7. Whereascustomization focuses on individuals, optimization tries to improve the site asa whole. Instead of making changes for each user, the site learns from allusers to make the site easier to use.(c) iOS apps meeting the iOS guidelinesThere arethousands of apps in apple store and mostly all are made according to thepre-defined guidelines.

Userinterface design process is one of the most important processes in softwaredevelopment especially in a mobile application development, which needsspecific design experience due to its physical limitation especially smallscreen size. In such cases, the user interface is the critical part and has tobe made according to the given guidelines. There are papers written on the userinterface guidelines and patterns approach to interaction design8.

Also thereare various types of user interface components for iOS application for providingapplication development that designed by Apple Inc. 9.   III.           METHODOLOGYThe approachused for this project was based on manual analysis andexamining various aspects. The first research question demanded analysis of variousresolutions and responsive design.

There are various desktop and mobile devicesin the market which are used more often nowadays. These electronic devicesdiffer in style, size, display, resolution and many more features. But theresponsiveness of a website does not depend on all the features of a device. Itdepends on the screen size and resolution.

Some devices with same screen sizescan have different resolutions and may be a few websites can behave differentlyon the devices with same size but different resolutions. For the first researchquestion, we have to examine if we need to make different web designs for eachdevice. For this, we browse various websites on different screen sizes andanalyze the behavior of those websites. If the design changes itself with thechange in screen size, it means that a particular website is responsive and if thedesign remains same and does not fit the viewport then the website is non-responsive.The mobile and desktop devices are listed below in table 2.  Mobile  Devices Desktop  Devices Websites iPhone 6   Dell www.pinterest.

com iPhone 7   HP www.facebook.com Samsung Galaxy Note 5   Lenovo www.

instagram.com www.disney.com www.comedycentral.com Vivo v1   Apple www.holcombguitars.com Letv   Asus www.

musicbed.com OnePlus and so on   Acer etc. www.usmagazine.com and so on Table 2 What is observed when we examine the behavior of similarwebsites on different resolutions is that the visual representation of websiteson mobile phones and laptops is different as they have different resolutions.On mobile phones, there is no navigation bar and only few important links canbe seen and the user has to click on the menu bar to refer to other navigationitems. But in laptops, mostly all the websites we browse have full navigationbar and it is easy to access.

If these websites were not made responsive, then theirlayout would be as following in Diagram 2. In this case, the user has to scrollleft-right to view the content.Diagram2In the second research question, we had to determinewhether a responsive design can adapt all screen sizes or not. Now, we couldassume from the first research question that if ‘n’ number of web designs arenot needed for ‘n’ number of resolutions then it means that one web design canwork on all resolutions. But just assuming is not the key to answer. We couldhave to make (n/2) or (n-1) website designs for different resolutions.

Also,there could be a probability to make one responsive design for small resolutionscreens, one design for devices with medium resolution and one design forlarger resolution screens. Therefore, during the research, responsiveness ofwebsites was analyzed on the devices stated in table 2 which concluded researchquestion 1 and the behavior of websites ranging between the resolutions ofgiven devices was determined by resizing the browser on which the websites werebrowsed. For example, iPhone 5 has resolution of 640 x 1136 pixels and on theother hand iPhone 6 has 750 x 1334 pixels resolution.

We actually do not haveany devices with resolution in between of these but what if we open a websiteon a web browser with resolution of 725 x 1200 pixels. In the second researchquestion, it was identified whether a design is adaptive to 725 x 1200 pixelsor not by resizing the web browser to the widths and heights which are notrepresented by display devices. For third research question, the iOS guidelines werestudied and few iOS applications were compared and analyzed if they meet theguidelines. This task demanded a deep study of the guidelines mentioned inHuman Interface Guidelines on the apple developer page. There were variousminor & major guidelines such as App Architecture, User Interaction, VisualDesign, Icons and Images, Bars, Views, Controls which were examined.

 IV.           RESULTSThis section presents the approach and results of ourthree research questions. For each research question, we present the motivationbehind the question, our analysis approach and a discussion of our findings.RQ1: Do wehave to make ‘n’ number of responsive designs if we have ‘n’ number ofresolutions ? Motivation- The main purpose for this question was to know the numberof resolutions needed and to understand that how various resolutions respond todifferent responsive websites. There are different layouts with differentsubdivisions and styles which depend on the devices and also the pre-definedselections by the developer who works on a website. Other aspects are definedbelow.Approach- To analyze the behavior of the device’s screen accordingto the resolution, various devices and websites were taken into account. Themobile resolutions viewed were 640×1136, 720×1280, 750×1334, 1080×1290,1125×2436, 1440×2560 and more along with the desktop resolutions such as1440x2560, 2880×5120, 3200×5120, 4096×5120, 1080×1920, 768×1366, 1600×2560,1800×2880.

10 mobile devices, various models of desktop devices and laptops(Dell, HP, Lenovo, Apple, Acer, Asus) with different resolutions were used toanalyze the responsive behavior of 30 different websites. Few of them arelisted in Table 2.Findings- All the websites stated in Table 2(and mostly all otherwebsites browsed nowadays) have responsive design as they have differentappearance and layout but one major feature was noticed that all the mobilephone devices with resolution of as low as 640×1136 and as high as 2560×1440 havesame layout response and all the tablets and desktop devices have similarlayout. There is a term behind this known as ‘breakpoints’. Web developers usemedia query to add a breakpoint where specificparts of the design will behave in different manner on each side of thebreakpoint. In breakpoints, minimum and maximum width (for mobiles, tablets andlaptops) is mentioned in the code of lines followed with the style to bedisplayed.

For example, following is the code for adding breakpoint based onwidth of the device. @media only screen and (min-device-width :320px) and ( max-device-width :480px) {/* Styles */}  Number of websites 20 Responsive 13 Non-responsive 7 Table 3 RQ2:Is Responsive Design adaptive or not ?Motivation- Our findings in RQ1 motivate us toinvestigate if there is no need of ‘n’ designs then is one responsive designadaptive for ‘n’ number of screens or do we have to make (n-1) or (n/2)responsive designs.Approach-A responsive web design is knownas adaptive if it adapts all screen sizes. For example, if a website is madefor 720 x 1280 pixels of device, it should also work on a device with 750 x1334 pixels. To know this, responsiveness of 20 websites was inspected. Forthis, we used devices with different screen sizes as listed in table 2.Findings- During this experiment andresearch process, another term was found known as “Adaptive Web Designing”.

InAdaptive Web Designing, developers do not make just one design that works onall screen sizes, rather, they make different adaptive designs that can fit tocertain range of screen sizes. For example, say, an adaptive design made forscreens with 720 x 1280 pixels will work on all devices with less than andequal to 720 x 1280 pixels display. But one concern is that, the particulardesign is going to remain same on 640 x 1136 pixels as well as 720 x 1280pixels as it is adaptive but not responsive(i.e. it does not have responsivedivs, images that changes with size). Adaptive design adapts to the width of the browserat a specific point and has multiple pre-defined designs for differentwidths.As responsive design can fit any screen size because ithas flexible design, it can be said that yes, responsive design is adaptive butthe counter version is false.

RQ3: Analyzingwhether web applications are made according to the guidelines or not?Motivation-In the app stores, starratings from all app reviews are aggregated to show the overall ratings of amobile app. To compete in this increasingly competitive market, developers haveto ensure that the apps are developed according to the guidelines and the userinterface is made such that they approve the app quality. User reviewsplay an important role because every new user prefers an app with better app reviewsand if an application is not made according to the guidelines, it may crash orwork inappropriately. Also, there are a lot of chances that the app interfaceis not user-friendly.Approach-Toexamine whether the apps are made according to the guidelines or not, a manualstudy was done by evaluating the iOS guidelines and verifying many features ofthe app.

A total of 20 applications including the built-in apps were taken intoaccount. There are 11 guidelines for the iOS developers which have sub-divisionsin them explaining minor to major features for an app.Most iOS apps are built using components from UIKit, a programming framework that defines common interfaceelements. The interface elements provided by UIKit fit into three maincategories: Bars, Views and Controls, around which the whole guidelinesrevolve.  Diagram 3 Findings-Whileexamining various apps, it was found that not all the apps have all thefeatures because the guidelines are made according to the category of apps.There are a total of 24 categories in which the applications fall in iOS appstore. Someapps need to follow the loading feature under the App Architecture guidelineand some do not need the loading feature because we have nothing to downloadfrom those apps. For example, if we have a music downloading app, it shouldhave the loading feature which denotes that something is happening.

On theother hand, some social networking apps like facebook, snapchat do not needloading feature because there is nothing to download from those apps.  Following are thetables indicating the number of apps out of 20 having certain featuresaccording to the guidelines. In some cases, 20 out of 20 apps have somefeatures like search bar, but in some cases only 1 app has a particular featurelike ‘pages’. A page view controller provides a way to implementlinear navigation between pages of content, such as in a document, book ornotepad.   Search Bar 20 Navigation Bar 14 Tab Bar 13 Toolbaar 11 Status Bar 20 Table-4 (Bars)  Activity view 14 Image view 9 Tables 7 Maps 7 Pages 1 Collection 13 Table-5 (Content Views)  Buttons 19 Edit menu 17 Progress indicators 15 Pickers 10 Sliders 1 Table- 6(Controls)      V.

           THREATSTO VALIDITY ·        Sinceit is examined that mostly all the websites fit to the display but very lessnumber of websites were taken into account. This can be seen as a limitation.·        Googlechrome browser was used for examining some of the resolutions as there wereless number of resources to analyze the resolutions and responsiveness at specificresolutions so for that purpose.·        Tocheck the number of responsive websites, only 20 websites were taken intoaccount which limits the scope of result.·        Tocompare the iOS apps with guidelines, only selective features from theinterface elements were chosen.·        Aless number of apps were evaluated according to the guidelines but it stillgives us an idea about applications meeting the guidelines.  VI.           CONCLUSION& FUTURE WORK In this paper, we concluded that the responsive design iscategorized into two versions: ‘mobile’ and ‘desktop’.

All the websites havesimilar view on pre-defined dimensions of these versions. Hence, we confirmthat we do not need to create seperate responsive web designs for every websiteto fit in different screen resolutions but have to use media query to introducebreakpoints on certain limit of width of the screen resolution to change thelayout with the purpose of making the sites easily accessible anduser-friendly. Developers set the pixel limits depending on which the websitechanges the layout itself. Also, a new concept came into existence while secondresearch question was analyzed and that was “Adaptive Web Design” through whichwe came into conclusion that responsive designs are adaptive as they canrespond to every screen size but on the counter part, adaptive websites canonly fit certain viewports because they are made according to different screensizes. In addition, in the third research question, it can be seen that mostlyall the apps are made according to the iOS guidelines that is why they areaccepted by the app store. There are various apps that do not have specific featureswhich are mentioned in the guidelines but the reason is that those appsactually do not need such features to perform well and can meet userexpectations so developers do not waste time, cost and money to add thosefeatures which are not desirable by the users.