Abstract— This paper describes an aspect of resolutions and
responsiveness in the study of responsive web designing. Nowadays, almost all
the websites are designed with responsive design layout so that they can be
accessed on electronic devices of all different sizes and all the possible
resolutions.
Responsive web design is widely adopted
to maintain usability across a wide range 
of devices and screen sizes in comparison to earlier approaches which
had focus only on mobile or non-mobile (desktop) devices. In this paper, I am
going to analyze if we need ‘n’ number of responsive designs and for ‘n’ number
of resolutions for better user experience. This paper also describes if a
responsive design is adaptive or not. While describing this, a new term
“Adaptive Web Designing” is discussed giving a new concept to one of the
research questions. At last, apps are verified according to the guidelines.
Overall, this paper gives us an idea of responsiveness of websites which works
at the back-end and the user does not even notice if the website is responsive
or adaptive.

Keywords: Responsive design, screen resolutions,
different layouts,  adaptiveness,
guidelines

       
I.           
INTRODUCTION

The 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 and
environment irrespective of screen size, resolution, platform or orientation 5.
Mobile phones usability is on the peak nowadays as most of the people cannot
carry their desktops or even laptops everywhere. With this, everyone wants to
be in touch with social media and needs to access the websites with a
user-friendly interface that can be provided if a responsive design for
specific websites is made. Mobile apps are the best solutions to keep up with
social media but what if a person wants to get immediate access to recent news
headlines if he does not know a specific app? The best solution in this case
will be browsing a news website and responsive design of that site will
convince the user to use the same site again when needed. The term ‘Responsive
Web Design’ does not depend on the screen size actually but on the resolution
of the screen. With responsive design, web applications are designed to
robustly fit into the screen sizes and resolutions of every device dynamically
2. Since, different screen sizes have different viewports, the Web content on
the devices vary in size and display style. In addition, it also introduces
navigation challenges as resolution is a critical variable, it impacts both
size of text on the screen and the actual amount of information that can be
displayed3. These challenges are overcome by making the websites responsive.
Diagram 1 below shows that how a responsive design changes the view of a
website.

Diagram 1

From manufacturing to highly competitive arenas such as retail
banking, insurance and travel, every millisecond of responsiveness on the Web
site counts.”

Senior Technical Specialist at iTrinegy, clarifies that “Website
visitors hate delay and the impact of slow response times on revenue have been
well documented”. For example, Amazon calculated that a page load slowdown of just one second could cost it
$1.6 billion in sales each year.”

Factors
affecting the responsiveness:

·        
Web
Page Size: Bigger the page, more is the response time.

·        
Full
page load time: The web pages do not load fully in some cases and need to be
reloaded.

·        
Back-End Server: When the traffic to a website
suddenly increases, the web server gets more requests than it can handle and
fails to function efficiently.

·        
The Database: Sometimes the queries being executed
do not use correct indexes resulting in delay of response.

·        
The Network: Some websites do not cope up with
the delays caused by the range of network.

 

Most of the
people are mistaken that the clarity and content display depends on the size of
screen. The content to be displayed on different screens or devices does not depend
on the screen size but on the resolution of a particular device. Screen sizes
and resolution vary a lot from each other. Besides this, a website to be
responsive is also a major factor. Here, the question arises that are we making
responsive design for each and every website to browse it on every device? If
yes, then it can be a strenuous task for companies applying such functionality
to each and every website to make it user-friendly. This question made me eager
to know more about this technique.

RQ1: Do we have
to make ‘n’ number of responsive designs if we have ‘n’ number of resolutions? Responsive
design has been defined by several researchers as it is actually not a single
technology but a set of techniques that allow web pages to serve the needs of
both mobile and desktop users 1. We perform an exploratory study to examine
how websites respond with respect to the resolution or viewport of the browsing
devices.

RQ2: Is Responsive
Design adaptive or not ? We have
20 websites and we find out whether their responsive design is fully adaptive
or not. This research question
somehow links to RQ1.

RQ3:Analyzing
whether web applications are made according to the guidelines or not? For
this research question, iOS guidelines were studied and 20 applications including built-in  iPhone applications and the app store were
examined. 

Paper Organization The remainder of this paper is
organized as follows. Section II discusses prior related work. Section III presents
the detailed methodology used to reach our findings. Section IV explains the
results of project including motivation, approach and findings associated to
each research question. Section V lists the threats to the validity of this
paper. Finally, Section VI concludes the paper.

 

 

 

 

 

 

 

 

 

 

 

   
II.           
RELATED
WORK

 

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 the
realization of the dream of a “One Web” (Gardner (2011) as cited in Groth &
Haslwanter 3). The RWD combines the capabilities of HTML5 and CSS3 which
enables it to flexibly adapt to different screen sizes 3. It was
introduced to solve the user experience problems associated with the static web
design paradigm. As there are
various layouts to adjust the web content on the web pages. These layouts
depend on the resolution of the devices. Screen resolution is the term used for
the number of pixels a screen contains horizontally and vertically. Also, same
screen sizes can have different screen resolutions (number of pixels). Hence,
the screens with more resolution are more clear than others. For example, in
the table below, we have three laptops with similar screen sizes but different
screen 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 1

With respect to these resolutions, the media query allows
the page to have different CSS style rules based on characteristics of the
device the site is being displayed on. Media Queries is
a CSS3 module allowing content rendering
to adapt to conditions such as screen resolution.

(b) Adaptiveness of responsive deign

A website is adaptive if we it can mold
itself to the display of the screen or we can say the environment. With the
presence of responsive websites, usability of websites is broken down into the
various goals such as the effectiveness, the efficiency, safety, utility,
learnability and memorability as stated by Neilson6. For increasing the
usability aspects, the websites are made adaptive. There are two approaches to
adaptive websites (i) Customization and (ii) Optimization7. Whereas
customization focuses on individuals, optimization tries to improve the site as
a whole. Instead of making changes for each user, the site learns from all
users to make the site easier to use.

(c) iOS apps meeting the iOS guidelines

There are
thousands of apps in apple store and mostly all are made according to the
pre-defined guidelines. User
interface design process is one of the most important processes in software
development especially in a mobile application development, which needs
specific design experience due to its physical limitation especially small
screen size. In such cases, the user interface is the critical part and has to
be made according to the given guidelines. There are papers written on the user
interface guidelines and patterns approach to interaction design8. Also there
are various types of user interface components for iOS application for providing
application development that designed by Apple Inc. 9.

 

 

 III.           
METHODOLOGY

The approach
used for this project was based on manual analysis and
examining various aspects.

The first research question demanded analysis of various
resolutions and responsive design. There are various desktop and mobile devices
in the market which are used more often nowadays. These electronic devices
differ in style, size, display, resolution and many more features. But the
responsiveness of a website does not depend on all the features of a device. It
depends on the screen size and resolution. Some devices with same screen sizes
can have different resolutions and may be a few websites can behave differently
on the devices with same size but different resolutions. For the first research
question, we have to examine if we need to make different web designs for each
device. For this, we browse various websites on different screen sizes and
analyze the behavior of those websites. If the design changes itself with the
change in screen size, it means that a particular website is responsive and if the
design 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 similar
websites on different resolutions is that the visual representation of websites
on mobile phones and laptops is different as they have different resolutions.
On mobile phones, there is no navigation bar and only few important links can
be seen and the user has to click on the menu bar to refer to other navigation
items. But in laptops, mostly all the websites we browse have full navigation
bar and it is easy to access.

If these websites were not made responsive, then their
layout would be as following in Diagram 2. In this case, the user has to scroll
left-right to view the content.

Diagram
2

In the second research question, we had to determine
whether a responsive design can adapt all screen sizes or not. Now, we could
assume from the first research question that if ‘n’ number of web designs are
not needed for ‘n’ number of resolutions then it means that one web design can
work on all resolutions. But just assuming is not the key to answer. We could
have 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 resolution
screens, one design for devices with medium resolution and one design for
larger resolution screens. Therefore, during the research, responsiveness of
websites was analyzed on the devices stated in table 2 which concluded research
question 1 and the behavior of websites ranging between the resolutions of
given devices was determined by resizing the browser on which the websites were
browsed. For example, iPhone 5 has resolution of 640 x 1136 pixels and on the
other hand iPhone 6 has 750 x 1334 pixels resolution. We actually do not have
any devices with resolution in between of these but what if we open a website
on a web browser with resolution of 725 x 1200 pixels. In the second research
question, it was identified whether a design is adaptive to 725 x 1200 pixels
or not by resizing the web browser to the widths and heights which are not
represented by display devices.

For third research question, the iOS guidelines were
studied and few iOS applications were compared and analyzed if they meet the
guidelines. This task demanded a deep study of the guidelines mentioned in
Human Interface Guidelines on the apple developer page. There were various
minor & major guidelines such as App Architecture, User Interaction, Visual
Design, Icons and Images, Bars, Views, Controls which were examined.

 IV.           
RESULTS

This section presents the approach and results of our
three research questions. For each research question, we present the motivation
behind the question, our analysis approach and a discussion of our findings.

RQ1: Do we
have to make ‘n’ number of responsive designs if we have ‘n’ number of
resolutions ?

 

Motivation- The main purpose for this question was to know the number
of resolutions needed and to understand that how various resolutions respond to
different responsive websites. There are different layouts with different
subdivisions and styles which depend on the devices and also the pre-defined
selections by the developer who works on a website. Other aspects are defined
below.

Approach- To analyze the behavior of the device’s screen according
to the resolution, various devices and websites were taken into account. The
mobile resolutions viewed were 640×1136, 720×1280, 750×1334, 1080×1290,
1125×2436, 1440×2560 and more along with the desktop resolutions such as
1440×2560, 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 to
analyze the responsive behavior of 30 different websites. Few of them are
listed in Table 2.

Findings- All the websites stated in Table 2(and mostly all other
websites browsed nowadays) have responsive design as they have different
appearance and layout but one major feature was noticed that all the mobile
phone devices with resolution of as low as 640×1136 and as high as 2560×1440 have
same layout response and all the tablets and desktop devices have similar
layout. There is a term behind this known as ‘breakpoints’. Web developers use
media query to add a breakpoint where specific
parts of the design will behave in different manner on each side of the
breakpoint. In breakpoints, minimum and maximum width (for mobiles, tablets and
laptops) is mentioned in the code of lines followed with the style to be
displayed. For example, following is the code for adding breakpoint based on
width 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 to
investigate if there is no need of ‘n’ designs then is one responsive design
adaptive for ‘n’ number of screens or do we have to make (n-1) or (n/2)
responsive designs.

Approach-
A responsive web design is known
as adaptive if it adapts all screen sizes. For example, if a website is made
for 720 x 1280 pixels of device, it should also work on a device with 750 x
1334 pixels. To know this, responsiveness of 20 websites was inspected. For
this, we used devices with different screen sizes as listed in table 2.

Findings- During this experiment and
research process, another term was found known as “Adaptive Web Designing”. In
Adaptive Web Designing, developers do not make just one design that works on
all screen sizes, rather, they make different adaptive designs that can fit to
certain range of screen sizes. For example, say, an adaptive design made for
screens with 720 x 1280 pixels will work on all devices with less than and
equal to 720 x 1280 pixels display. But one concern is that, the particular
design is going to remain same on 640 x 1136 pixels as well as 720 x 1280
pixels as it is adaptive but not responsive(i.e. it does not have responsive
divs, images that changes with size). Adaptive design adapts to the width of the browser
at a specific point and has multiple pre-defined designs for different
widths.

As responsive design can fit any screen size because it
has flexible design, it can be said that yes, responsive design is adaptive but
the counter version is false.

RQ3: Analyzing
whether web applications are made according to the guidelines or not?

Motivation-
In the app stores, star
ratings from all app reviews are aggregated to show the overall ratings of a
mobile app. To compete in this increasingly competitive market, developers have
to ensure that the apps are developed according to the guidelines and the user
interface is made such that they approve the app quality. User reviews
play an important role because every new user prefers an app with better app reviews
and if an application is not made according to the guidelines, it may crash or
work inappropriately. Also, there are a lot of chances that the app interface
is not user-friendly.

Approach-
To
examine whether the apps are made according to the guidelines or not, a manual
study was done by evaluating the iOS guidelines and verifying many features of
the app. A total of 20 applications including the built-in apps were taken into
account. There are 11 guidelines for the iOS developers which have sub-divisions
in them explaining minor to major features for an app.
Most iOS apps are built using components from UIKit, a programming framework that defines common interface
elements. The interface elements provided by UIKit fit into three main
categories: Bars, Views and Controls, around which the whole guidelines
revolve.

 

Diagram 3

 

Findings-
While
examining various apps, it was found that not all the apps have all the
features 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 app
store. Some
apps need to follow the loading feature under the App Architecture guideline
and some do not need the loading feature because we have nothing to download
from those apps. For example, if we have a music downloading app, it should
have the loading feature which denotes that something is happening. On the
other hand, some social networking apps like facebook, snapchat do not need
loading feature because there is nothing to download from those apps. 

Following are the
tables indicating the number of apps out of 20 having certain features
according to the guidelines. In some cases, 20 out of 20 apps have some
features like search bar, but in some cases only 1 app has a particular feature
like ‘pages’. A page view controller provides a way to implement
linear navigation between pages of content, such as in a document, book or
notepad.

 

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.           
THREATS
TO VALIDITY

 

·        
Since
it is examined that mostly all the websites fit to the display but very less
number of websites were taken into account. This can be seen as a limitation.

·        
Google
chrome browser was used for examining some of the resolutions as there were
less number of resources to analyze the resolutions and responsiveness at specific
resolutions so for that purpose.

·        
To
check the number of responsive websites, only 20 websites were taken into
account which limits the scope of result.

·        
To
compare the iOS apps with guidelines, only selective features from the
interface elements were chosen.

·        
A
less number of apps were evaluated according to the guidelines but it still
gives us an idea about applications meeting the guidelines.

 

 VI.           
CONCLUSION
& FUTURE WORK

 

In this paper, we concluded that the responsive design is
categorized into two versions: ‘mobile’ and ‘desktop’. All the websites have
similar view on pre-defined dimensions of these versions. Hence, we confirm
that we do not need to create seperate responsive web designs for every website
to fit in different screen resolutions but have to use media query to introduce
breakpoints on certain limit of width of the screen resolution to change the
layout with the purpose of making the sites easily accessible and
user-friendly. Developers set the pixel limits depending on which the website
changes the layout itself. Also, a new concept came into existence while second
research question was analyzed and that was “Adaptive Web Design” through which
we came into conclusion that responsive designs are adaptive as they can
respond to every screen size but on the counter part, adaptive websites can
only fit certain viewports because they are made according to different screen
sizes. In addition, in the third research question, it can be seen that mostly
all the apps are made according to the iOS guidelines that is why they are
accepted by the app store. There are various apps that do not have specific features
which are mentioned in the guidelines but the reason is that those apps
actually do not need such features to perform well and can meet user
expectations so developers do not waste time, cost and money to add those
features which are not desirable by the users.