CREATE A MULTI-PAGE

RESPONSIVE
WEBSITE
A PROJECT REPORT

In partial fulfilment of the requirements for the award of the degree

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE AND
ENGINEERING
BY
SOUHARDYA GAYEN

NEOTIA INSTITUTE OF TECHNOLOGY,

MANAGEMENT AND SCIENCE
KOLKATA, WEST-BENGAL, INDIA
In association with

EXPOSYS DATA LABS

 2 Souhardya Gayen

CONTENTS: -

ABSTRACT
1) Introduction
2) Four Fundamental Principles of RWD
2.1) Fluid (Flexible) Grids
2.2) Flexible (Scalable) Media
2.3) Media Queries
2.4) Dynamic Content
3) Popular Responsive Web Design Frameworks
3.1) Bootstrap
3.2) Skeleton
3.3) Foundation
4) Tests to Check Responsiveness of a Website
4.1) Google Mobile-Friendly Test
4.2) Browser Window Resizing Trick
4.3) Mozilla Firefox and Google Chrome Built-in Responsive Tests
4.4) Remote Testing Resources
5) Responsive Web Design in Future
6) Conclusion
 Multipage Responsive Web Design 3

Abstract. Today’s extra smile devices i.e. mobile phones, smartphones; small devices
i.e. tablets, mini laptops; medium devices like laptops, desktops; and large devices like
new age TVs, LEDs, and projector screens capable of accessing websites have changed
the approach towards website design and development. These high-tech devices and
gadgets have placed the web designers and developers to serious issues of user
experience and accessibility. Thanks to Ethan Marcotte for inventing the technique of
Responsive Web Design by which developers can now produce device agnostic
websites which respond, with respect to their layout and content presentation, on all
kinds of device resolutions without requiring any special modifications. This means a
single Responsive Website is now sufficient to serve all device sizes. But being device
agnostic is only the first milestone towards responsiveness. This monograph discusses
the factors that reasoned the Responsive Web Design (RWD). RWD is discussed in
detail with respect to present scope and finally a debate is presented on future trends
in RWD, and proposed future enhancements which show how responsiveness can be
further extended to meet with complete user needs in the light of content and context.

Keywords: diverse mobile devices, responsive web design, device agnostic

website, ubiquitous web, responsive philosophy, context responsive websites.

1 Introduction
Web Browsers are enhancing on a very fast pace. Every day we confront a large
number of new devices categorized as extra small, small, medium and large
devices. These devices, apart from size, accompany a diverse range of
configurations and physical characteristics like we have devices with different
resolutions, pixel density, touch screen controls, track-pads and keyboards or a
combination of these. Technology may be advancing at a rapid pace but it doesn’t
make any sense that one should keep exchanging the old devices at that pace. All
new inventions need to be backward-compatible with existing technologies thus
allowing people to continue using older implementations on new devices. There
might be situations when a newly released device or browser is canceled a few
weeks later after its release. Hence, what is true today may not be true tomorrow
and resultantly all this leads the users in a situation of chaos.
But this is only one side of picture. On the other hand, chaos leads to
innovation and creativity. Quite often sitting in waiting area of an airport or a bus
terminal you would see people using different size of mobile devices. You will
observe that there might be some 20 to 40 people in a particular waiting area but
will be surprised to see every person using a mobile device of different size,
configuration and make. Put an eye on the gadgets of the people sitting nearest to
you and you will see most of them browsing different websites of news, articles,
or social networks. During journey people love to interact with their mobile
gadgets for hours long till they reach their destination. Then there comes into
play the numbers game. A person usually holds more than one mobile device i.e.
a smartphone, tablet device, laptop, etc. simultaneously.
Table-1 shows active number of cellular subscribers worldwide 1in both
developed and developing countries for the years 2008, 2011 and 2014 [1].
Table-2 presents active number of mobile broadband users worldwide 1 also in
developed and developing countries for same three years [1] . Figures in these
tables reveal that the number of cellular subscribers is about to reach total
number of people on earth. Similarly, the number of mobile broadband users is
increasing exponentially especially in developing countries. These growing
numbers of cellular subscribers and mobile broadband users with varying
display sizes, configurations, networks speeds, etc. has placed the website
developers in a situation of disruption. Formerly, website developers have been
successful in dealing with mobile devices by offering separate sites for different
kinds of devices, and this approach being known as Adaptive Website Design.
This means having differ-
1 Estimated
4 Souhardya Gayen

Table 1. Number of active cellular subscribers worldwide (in millions)

Countries and Year 2008 2011 2014

Developed 1250 1300 1400

Developing 2750 4600 5600

Total 4000 5900 7000
ent websites for desktop, tablet, touch-input mobile device, and a simpler mobile
device without touch support i.e.at least 4 different websites for one company.
This approach completely depends upon the business objectives, the users, and
Table 2. Number of active mobile broadband users worldwide (in millions)

Countries and Year 2008 2011 2014

Developed 337.60 720 1035

Developing 84.40 480 1265

Total 422 1200 2300
capabilities of a specific project. This approach has merits as well to personalize
the sites, both in content and behavior, thus making it easier to customize the
user experience considerably. But this approach does not balance in a good form
i.e. the four websites that need to be tested, updated and maintained will require
as many resources then. This approach do not appear feasible as a certain
number of developers and other resources multiplied by number of website
versions required would involve huge time and money. Continuously rapid
evolving technology; decreasing prices of smartphones, tablets, desktops and
laptops; diversity in primary specifications of these devices of different
manufacturers and also amongst devices of the same manufacturers, has
worsened the situation of chaos to a greater extent. Consequently, if we continue
with Adaptive Web Design approach today we would certainly end up with our
websites no longer accessible on new and upcoming devices.
It might be possible that a company completely denies to cater to the needs of
mobile device users and adopts the fixed-width layout approach. A website built
using fixed-width layout has width and height of components in fixed pixel units.
No matter what screen resolution a visitor has, the same amount of width and
height will be presented to that particular user. Whenever such a website is
viewed on mobile devices, the user will certainly end up in pinching, zooming
and scrolling in both vertical and horizontal directions, and may face slower page
load times.
A better solution to the above problem would be to develop a single website
using principles of Responsive Web Design to make it available on devices of all
resolutions that exist today and is also future-ready. Responsive Web Design is a
set of tools and techniques used together to build a single rich user-interface
website which is equally accessible on devices of various sizes and resolutions, and
to user of all network bandwidths no matter high or low. [2].
A web designer Ethan Marcotte first coined the term Responsive Web Design
(RWD) in May, 2010 in his article “Responsive Web Design” [3]. His approach to
design websites using techniques of RWD instigated revolution in the discipline
of web design. He simply used three existing CSS3 tools: i) media queries, ii) fluid
(flexible) grids, and iii) flexible images to create a responsive website
(http://goo.gl/I1T8mL) that displayed on devices with different resolutions
correctly. Subsequently people started exploring the RWD techniques and lead-
 Multipage Responsive Web Design 5

Fig.1. Making the Web available on various device sizes (Source:

cdotnetinfosystem.com)

ing content publishers rebuilt their websites using this new stunning model of
RWD. Many popular websites publishing articles, blogs, and news started
discussing the RWD and they declared 2013 as the year of Responsive Web
Design [4], [5].
In this age of technology we see things evolving continuously at a very rapid
pace. So being able to develop deice agnostic websites, i.e. a website which can
be viewed on all kinds of devices without regard to their size/ dimensions or
other characteristics, is only the first milestone achieved by web designers. We
need to serve users with websites which are context responsive and adopt more
responsive philosophy. That is a website would be able to present whatever
content is suitable for a user with respect to his preferences, location, age, and
culture. And that website would be called a context responsive website which
will be both viewable on all kinds of device types and by all kinds of users w.r.t.
their behavior and contexts.

2 Four Fundamental Principles of RWD

Responsive Web Design is a newfound technique but it has evolved rapidly. By

simply applying CSS rules inside media queries is not enough to cope up with the
responsiveness. In this section an explanation of four underlying principles of
RWD is presented to enhance readers’ understanding regarding fundamentals
building blocks of RWD.
2.1 Fluid (Flexible) Grids
In the realm of web, a grid is simply a collection of rows and columns. A grid is
used to organize layout in a web [2]. In a grid, row consists of one, two or more
columns. Each row, no more than maximum number of columns, could span one,
two or more columns. Content is then placed inside columns. Grids help to add
order and creativity in the website by organizing the content in a uniform way so
that whenever new content is added it looks consistent with the overall
presentation of the website. Before the advent of RWD’s fluid grids, fixed-width
grids using pixel measurements have been used which posed the drawbacks of
pinching and zooming of the content whenever viewed on smaller displays.
Figure-2 shows a, fixed-width, 960px grid of two columns. The width of context
is 960px. The top row (of 880px) of the container spans two columns followed
6 Souhardya Gayen

by another row of two columns of 640px and 220px. The space between the
rows and columns is the margin property referred to as gutter width in RWD.
The easy first step in creating a fluid grid layout is to first make a blueprint of the
desired fixedwidth layout. Figure-2 is a sample such blueprint. Then we need to
calculate proportions of the elements in percentages. In a fluid grid, width of all
elements starting from parent container, then header, and all the way to a footer
section is stated in relative units e.g. percentage, rem, em, etc. An “em” is a
relative CSS unit for expressing length values relative to font-size of immediate
parent of an element [6]. By default 1 em is equal to 16px. A value of 2 em means
32px. Em is used to express the values of inner level elements inside columns.
Similarly, ‘rem’ is used to express length values relative to root (html) font-size.
Value of 2 rem means 2 times the font-size of the root element. To design a fluid
grid layout we also use values in percentages. Formula to calculate proportions
of the design in percentages is as below:

(target / context) x 100 = desired value % (result rounded to 0 decimal place)

Target is the width of an element in fixed-width pixels. Context is known as
the width of the environment in pixels for which the layout is required. Row is
also called a wrapper because it contains columns inside it which then contain
our elements. A wrapper in meaning here is very much similar to a toffee
wrapper which wraps around the toffee. Once we have calculated the wrapper
value, then for onward calculations this wrapper value will be used as context
value. In figure-2, context is 960px and wrapper width is 880px. Following
relative values are calculated for this context based on the above formula:

– Container Width: (960px / 960px) x 100 will correspond to 100% container

width
– First Row (spans two columns): (880px / 960px) x 100 = 92% (this values
will also be used for wrapper)
– Second Row Left Column: (640px / 880px2 ) x 100 = 73%

2 See figure-2, width of the row i.e. wrapper is 880px which will serve as the context value
for rest of calculations
 Multipage Responsive Web Design 7

Fig.2. Fixed-width 960px grid (Source: http://www.smashingmagazine.com)

– Second Row Right Column: (220px / 880px) x 100 = 25%

The above discussion is enough to understand a fluid grid. In practical situations,

things are more complex because we have to consider a device size context
ranging from extra small devices (less than 480px) e.g. small smartphones to
larger devices (greater than 1200px) e.g. large desktops/ laptops, smart TVs, etc.
and we need to calculate values of all the required elements in relative units for
all targeted context widths.

2.2 Flexible (Scalable) Media

Media (images and videos) content is a source to provide pleasing and richer
user experience. But using excessive media could result in slow load times for a
website. When it comes to smaller devices the situation needs more attention as
these devices have little resources in terms of network bandwidth and browser
capabilities. To maintain aspect ratio of the media on various device densities is
another challenge. Like an image would appear crisp and sharp on a particular
device size but it would become blurry and lost its pixels when opened on a large
display or on a device of same size but greater density. The website performance
greatly depends on how beautifully the developer has programmed to display
images and videos. “GlobalDots” study shows that a greater number of users
would leave a web page if it takes more than 6 seconds to load [7].
There are three types of media which need to be tackled with great amount of
care in responsive paradigm and that is i) video, ii) images (foreground), and iii)
background images.
8 Souhardya Gayen

To make flexible/ scalable media we need to write rules in CSS, HTML and/or
JavaScript. There are a lot of pre-coded packages available on internet ready for
usage so in this monograph we’ll not cover the coding part rather this study
focuses on key underlying concepts. The key idea to make responsive media is
that we do not use fixed-width height for images and videos instead this value is
set to auto or not provided at all. We first create a container with proportion
width size to hold our media and it is then sized to some percentage of the
container. Container of media inherits its width from the outer container and the
media inherits its width with respect to that of its container. For example, we
want to make image xyz.jpg responsive. We’ll first create a container of some
50% width. We then place our xyz.jpg image inside that container and set the
width to say 100% so that at whatever device size the image is opened the image
will resize itself to fit in the container and container will get its width from device
width in some percentage accordingly. Density means the ratio of CSS pixels to
device pixels. If we proram a 100px by 100px image to be viewed on a device
with 1:1 ration then it will work fine but if that same image is opened on a device
with pixel density of 2 (i.e. 1:2 ratio) it would mean that the image will become
200px wide and 200px high, and consequently it will lost its resolution.
Conversly, if a high density image is viewed on a device with low density then the
image will become blurry. Moreover, we also need to take care of grids, columns,
and rows here. Each and every content part either an image or a text block is
specified in a column or more with respect to context i.e. device size. The
situation will become clear when we’ll study Media Queries in section
2.3.

2.3 Media Queries

A great user experience benefit of responsive design sits in lesser amount of

scrolling and resizing. That is a user of the responsive website will not be
pinching or zooming, and scrolling in horizontal direction. Thus only vertical
scrolling is required to surf a responsive website irrespective of whether the
device in use is a smartphone, tablet, desktop computer or a smart-TV. Here
comes in the need of media queries which contain CSS style rules to apply to the
values of width, height, depth, color, resolution, margins, padding, etc. when a
specific viewport size is encountered.

Viewport. This is simply the visible area of the browser i.e. the browser width in
pixels. The concept seems to be all simple apparently but there are actually two
types of pixels: device or hardware pixels and CSS pixels. Device pixels are the
unit of design that form the basis of everything we make on a device [8]. A device
screen which is 1280px wide means that a maximum of two elements of 640px
width or four elements of 320px width can fit side-by-side at once on the screen.
CSS pixels have nothing to do with the screen. CSS pixels means everything
visible inside the browser window. On normal devices, 1 CSS pixel corresponds
to 1 device pixel but on devices with high pixel density 1 CSS pixel may
correspond to more hardware pixels. Pixel Density is the number of pixels per
inch (PPI) that can be displayed in a physical display [9]. This means that CSS
pixels may not correlate with the device pixels. CSS pixels change with the zoom
in or out of a page. For example if a user zooms in a page to 150% then CSS pixels
will increase by half time the width and height of elements. If the user zooms out
a page to 50% then CSS pixels will reduce to half the width and height of
elements but device pixels never change by zooming in or out or by any other
means.
Due to variable nature of CSS pixels and constant device pixels of varying
density, we have to take into account the viewport considerations. viewport is a
responsive meta-tag of HTML to control layout of web pages. Again, we have two
viewports here: the visual viewport and layout viewport. Layout viewport
 Multipage Responsive Web Design 9

corresponds to device pixels and visual viewport is the portion of the page that,
at any given time, is shown on the screen.
Following line of code tells the device to equal the device’s layout viewport
with the visual viewport and set the initial zoom level to 100% [10]:
<meta name="viewport" content="width=device-width, initial-scale=1">

Apart from width and initial-scale directives a number of other useful

directives are available to help developers maintain the layout of their web pages
up to their requirements.

Structure of a Media Query A media query is comprised of four basic

components [11]:

– Logical Keywords like and, not, only, or, etc to create more complex queries.
– Media types i.e. the type of device to target. Most common media types are
screen (computer and mobile displays), print (printers), and tv
(televisiontype devices),
– Media expression to test a feature and evaluates to either true or false.
– CSS Rules to style the content accordingly when the expression evaluates to
true
As an example of media query consider the following code which will implement
the listed CSS rules whenever the width of the screen is less than 480px:

@media screen and (max−width : 480px){

#logo{ width : 95%;
}
#topMiniNav{ padding−top : 5px ;
margin−l e f t : 0;
margin−right : 0;
}
}
Similarly we can implement other media queries with different expressions and
constraints to meet our needs. In practice, we need to write more complex media
queries combining logical keywords, media features, complex expressions, and
detailed list of CSS rules.
As of now we have studied all the nitty-gritty of RWD with respect to device
size, resolution and pixel density. To make a website responsive we need to take
into account various attributes of individual elements, design a powerful fluid
grid system, work with harder media queries and take care of device pixel ratio.

2.4 Dynamic Content

Modern programming languages provide efficient mechanisms to write more

logical blocks of code that are semantically ascribed to the linkages with
graphical user interfaces. This means a compiler is able to detect that a GUI
component relates to which part of the code and what it stands for. But this
functionality was completely absent from HTML, the markup language of the
web. Web browsers use the HTML tags to display the content of a web page. A
web page is divided into logical blocks called containers, areas, regions, parts,
etc. [12]. We have been dividing our HTML pages into header, navigation menus
(main nav, side nav, and footer nav), articles, sections, body content, images,
videos, footer, etc. but all these conventions have been used just for
understanding of the humans and presentational tags have being used to layout
these elements. Before the advent of HTML5, browsers have been unable to
detect these logical blocks within our web pages and establish linkages between
them because those elements were generic and have nothing to do with
semantics.
10 Souhardya Gayen

HTML5 was designed to address richer, more semantic and modern websites
and web applications. Code written in HTML5 could be called browser friendly as
a browser can now detect what particular part of the web page should be called
e.g. an article or a navigational block and thus HTML5 is also called semantic
HTML i.e. it has added more structural meaning to the code blocks. Web content
can be structured at a greater degree by using semantic elements of HTML5. A
very first step in designing a website starts from content structuring very similar
to the way a building design is started by first calculating number of rooms or
offices required and documenting their specifications.

Structuring the Content for Dynamic Loading. The previous three ingredients
of RWD techniques: media queries, fluid grids and adaptive/ responsive media,
are used to layout the content properly for variety of device sizes. Dynamic
content is concerned with making the content itself, not the layout, responsive or
adapt to certain contexts of the user behavior. Content is basically the reason
behind building a particular website. There are two most important things about
the content. First one is that it should come first and secondly it should be well-
structured because structured content is the key to produce dynamic content. A
nicely structured content would be able to behave and transform in many new
ways and in different contexts. For example, a web page may change its content
accordingly when physical location of the user changes.
We take into account three key concepts while structuring the content [2].
These are discussed in brief below.
i. Document Structure. The document structure is made up by using logical
blocks and defining their hierarchies. By using structural tags we divide the
web pages into logical blocks so that tags become descriptive of the type of
the content they contain. The word document is being used here because we
treat a web page as a document. A standard document contains header,
footer, chapters, sections, sub-sections, and other components that divide the
document into logical parts. So in order to structure our web pages we need
to use semantic tags provided by HTML5 in accordance with guidelines of
W3C for dynamic web applications [13]. Figure-3 below shows an illustration
of document structure built using semantic elements:
The content hierarchy is also a part of well-planned document structure.
Hierarchy makes it possible to assign priorities to the content, making the
content portable, and allows tracking the logical blocks within the document.
ii. Metadata. Metadata is the information about the content and it may exist at
varying levels in the document hierarchy. It is the data that provides context
for a content chunk. For example, categorizing some products as ‘new
arrivals’ would mean that this chunk of content contains information about
newly released products. Content should be stored in a structured format
with hierarchies and meaningful metadata so that it could be requested and
utilized wherever and whenever needed. A page level metadata might
include author name, date of creation/ update/ review/ last visited, physical
location information of a particular user, etc.
iii. Supporting Content. This is the supplementary type of content used to
enhance user experience and does not affect the core content and its
hierarchy if not found on a particular page. It is necessary to keep the
supporting content separate from the core content otherwise it will cause
problems when updating the site design. Some examples of supporting
content are media assets, call-outs or pull quotes, citations and references,
banners, advertisements, etc.
 Multipage Responsive Web Design 11

Fig.3. Structure of an HTML5 Web Page

Two Techniques to Make Content Responsive. Two most common practical

techniques to make the content more responsive are discussed below in brief.

i. Lazy Loading. It is a technique which is used to not load those images and
videos that are not visible in the browser’s visual viewport at a particular
time [14]. As the user scrolls down to the media content, it is then loaded as
required. It is an intelligent way to lazily load the heavy media content which
might never be viewed by the user of mobile devices and hence increases
page load time performance. So our intent here is to increase user experience
by providing faster page loads dynamically.
ii. Selective Content Loading (SCL). A best example of SCL implementation is
Facebook’s infinite feed scrolling. As the user keeps scrolling down the feeds
page, older feeds are loaded dynamically up to the point the user scrolls. The
moment user stops scrolling, more older feeds will never be loaded hence
not loading the content which will not be viewed by the user at all. This
technique is really useful in conditions when we want to load chunks of
content into an already opened web page in a structured way.
3 Popular Responsive Web Design Frameworks
From above discussion it is pretty obvious that starting point to create a
responsive website is determining proper number of columns to create a fluid
grid. Then we need to calculate proportions of the elements and each and every
content chunk in percentages, defining correct breakpoints, write more complex
media queries, design more complex fluid grids, and so on. It is therefore not an
easy task for most of the web developers new to RWD. There are pre-designed
responsive frameworks to help make the development of responsive websites
easy. These frameworks, if used properly, are greatly beneficial and helpful
because:
i) they save a lot of time, ii) have an active community of developers to provide
support, iii) websites built using these frameworks are cross-browser
12 Souhardya Gayen

compatible, iv) and most importantly a good framework provides extensive

documentation to help developers learn how to use that particular framework.
In the domain of web, a framework is a set of structured files, folders, and
standardized code of HTML, CSS, JavaScript, jQuery, etc. aimed at providing a
basic starting point for development of industry standard websites [15]. There
are almost more than twenty Responsive Web Frameworks that exist today and
all are free to use i.e. open-source, but in this section we will discuss three most
popular and widely used RWD frameworks: i)Bootstrap, ii)Skeleton, and
iii)Foundation. These frameworks are built on complex fluid grid systems and
are extensively used by a large number of website developers.

3.1 Bootstrap

Bootstrap was developed by Mark Otto and Jacob Thorton primarily to be used
internally by Twitter in 2011 and later launched as a free software for public use
[16]. In it’s initial release, responsive feature was not present in Bootstrap which
was added in version 2.
Bootstrap is the most popular responsive framework for developing
mobilefirst websites based on 12-column fluid grid system. It is packed with
extensive ready-made User Interface (UI) components including glyphicons,
buttons, alerts, progress bars, drop-down menus, and much more [17]. The
power of Bootstrap comes to action quickly because a developer will only need
to download the framework package and start designing responsive websites.
Bootstrap also provides video scaling component. Bootstrap code can be
customized using LESS or SASS. Websites developed using Bootstrap are capable
of running on device resolutions starting with width less than 480px up to
1200px.
In a nutshell, Bootstrap is easy to get started, offers a great grid system,
provides styling rules for fundamental HTML elements such as headings, lists,
tables, buttons, forms, etc., provides extensive UI components, packed with built-
in JavaScript plugins to make UI components more interactive, and most
importantly supported by extensive documentation.
Following are examples of websites built using Bootstrap:

– Codecademy, Teaching the world how to code, http://www.codecademy.com

– Opendesk, design for open making, https://www.opendesk.cc
– CodrSpace, the blogging platform for coders, http://codrspace.com

3.2 Skeleton

Skeleton is a lightweight CSS responsive framework created by Dave Gamache.

Skeleton is the simplest framework as compared to other two discussed in this
monograph. It is not overstuffed with heavy styles, extensive UI components, and
JavaScript/ jQuery plugins. Skeleton is good for smaller projects in which large
number of utilities are not required. Skeleton uses 12-columns fluid grid system
with a maximum width of 960px. Skeleton comes with a starter HTML template
(index.html), and two lightweight CSS files (normalize.cc and skeleton.css) and
that’s the reason it is called a lightweight framework because intent of skeleton
developer is to provide responsive only components without rich styles and
plugins.
Following are examples of websites built using Skeleton:

– GetSkeleton, official website of Skeleton, http://getskeleton.com

– HiveMind, a design agency, http://www.ourhivemind.com
 Multipage Responsive Web Design 13

3.3 Foundation

Foundation was built by a team at ZURB, a California based product design

agency. Foundation is also an open source project and mobile-first framework.
Unlike Bootstrap, Foundation do not have much pre-defined styled UI
components however it has rich designed elements and built-in JavaScript
plugins. A developer needs more technical skills to work with Foundation in that
it is based on Ruby language and one need to install Ruby in order to start
working with Foundation. SASS, SCSS and Ruby together make Foundation as the
most advanced responsive frameworks as compared to Bootstrap and Skeleton.
Following are examples of websites built using Foundation:

– HTC, official HTC Shop, UK, http://goo.gl/d9zAGH

– Canadian Olympic Team Official Website, http://olympic.ca
– iStockPhoto, Perfect Digital Stock Photos, http://www.istockphoto.com

4 Tests to Check Responsiveness of a Website

In this section we will see some methods that exist to check if a website is
responsive.

4.1 Google Mobile-Friendly Test

Due to the growing popularity of Responsive Web Design, Google announced

mobile-friendly testing tool in the end of year 2014 [18]. This has completely
changed the ranking of websites in Google’s search results. No matter how
structured and search engine optimized a website is but if it is not mobile-
friendly, it will certainly be displayed below mobile-friendly websites in search
results. As per official Google Webmaster blog, a website will only be eligible for
“mobilefriendly” tag if it fulfills the following criteria as identified by Googlebot
[18]:

i. A web page should avoid software which is not supported by mobile

devices
e.g. Flash, JAVA plugin, etc.
ii. It should not use the text which would require zooming to read.iii. A
page should not require horizontal scroll or pinching/ zooming.
iv. There should be enough space between navigational links so that the targeted
link could be easily tapped.

The link of Google’s mobile-friendly test tool to check an individual web page is
https://www.google.com/webmasters/tools/mobile-friendly/
A site’s ranking in Google, the most famous search engine, when used on
mobile devices now also depends on mobile-friendly test. That’s a big reason
why companies are getting their websites responsive.

4.2 Browser Window Resizing Trick

By resizing the browser window it could be checked that whether a particular

website is responsive or not but this type of test is not reliable. For example, if a
website uses media queries and device-width instead of width property to
determine breakpoints then window resizing test will not work due to the
reason that device-width, i.e. desktop/ laptop layout viewport, will remain
constant and only visual viewport is changing. However, this test will work for
most of the websites.
14 Souhardya Gayen

4.3 Mozilla Firefox and Google Chrome Built-in Responsive Tests

Mozilla Firefox comes with a built-in Responsive Design View mode to help
developers test their websites during development process and see if there are
any issues associated with the responsiveness. To enable Firefox’s built-in
responsive test simply press Ctrl + Shift + M on windows or Cmd + Opt+ M on
Mac. Same key combination will disable the responsive design mode. It may be
required to refresh the website when current size is shifted. Figure-4 below
shows the Responsive Design View test on http://www.creativebloq.com/.
Similarly, Google Chrome also offers more advanced responsive design test,
than of Firefox, namely Device Mode & Mobile Emulation (DMME). Chrome’s
device mode is used to test the responsive design by simulating different screen
sizes, resolutions, media queries, and retina display. Chrome’s DMME also
supports network emulator to test the site performance when loaded using
different network bandwidths. Thus, by changing device size, network type, and
providing device-pixel-ratio value one can test the responsiveness of the website
in closer to reality. Google Chrome provides a rich list of mobile devices to
emulate, and this

Fig.4. Google Chrome’s Responsive Design View Mode

list is continuously updated by Google as and when new devices are launched. To
enable Chrome’s DMME simply press Ctrl + Shift + I on windows or Cmd + Shift +I
on Mac. Figure-5 below shows the same creativebloq.com website in Chrome’s
DMME. The blue, green and orange horizontal bars represent media query
breakpoints which can be invoked by clicking in between the tiny vertical bars in
white color on breakpoints bars and the website’s layout will respond
accordingly.
 Multipage Responsive Web Design 15

4.4 Remote Testing Resources

All the above tools and techniques for testing responsive design are closer to
reality and never provide 100% accurate result. So the actual solution would be
to test on as many devices as possible which give accurate results. This doesn’t
mean one have to buy as many physical devices to test on. Remote testing
resources are a great way to implement mobile testing by interacting with
multiple physical devices as we do in reality. These remote testing resources are
available on the internet, freely or paid, in the form of web based interfaces.
Some remote testing resources are:

– Samsung Remote Test Lab, http://developer.samsung.com/remotetestlab/

– AppThwack Labs, https://appthwack.com/
– Vanamco’s GhostLab, http://vanamco.com/ghostlab/

5 Responsive Web Design in Future

To predict the future it is important to study the past and present so that’s the
reason why the above discussion is detailed. We can now say that in 2015 it’s not
almost possible to deny a responsive web site. Web designers and developers
whenever say ‘web design’ they simply mean responsive web design. But being
device agnostic i.e. adapting to different screen sizes is only the first milestone of
a responsive web of next generation. Users expect a web experience that would
also respond to certain parameters like their location, time of day, what they
have already accessed (web surfing history), and events happening in real time
around them [19]. Therefore the future of responsive web design lies in
responsive thinking web. If we pickup a series of print publications of a printed
magazine we may realize that each edition has different layout and design i.e. it
has the ability to respond to any combination of events happening around. This
ability is somewhat missing in today’s responsive web. Most of the websites have
same (4 to 12 column) layout all the time, in all the major happenings, and day in
and day out. No matter how big the news is, either war begins in Yaman or it’s
Pre-poll rigging issue, we have the same layout and style of our article pages.
Therefore, website should not only respond to device sizes instead the website,
and content itself, should adapt and reshape to certain contexts. For instance,
Web Directions South 2012 have used physical location of their participants to
shape the homepage of their website 3. Their homepage changed to the schedule
of the event once a participant has arrived at the venue.
Older adults, i.e. senior citizens, are the fastest growing number of web users
[20]. Web designers have to tailor websites keeping in mind the needs of this
large growing population. These senior web users have some usability issues
associated with them e.g. the way information is organized and presented in
design-rich websites, text color, style and size, finding information on the go, etc.
due to the age in which they have started to surf the web. It’s not as easy for an
older adult to become handy on the web in lesser time as compared to the users
falling in the age range of 45 to 55 and it’s a natural phenomena that more
younger people are capable to learn and adapt to new things easily. So we have
got another context which would require web developers to write complex and
intelligent algorithms smart enough to sense stored user profiles and layout and
style the content which is convenient for reading, browsing, navigating and
understanding by senior adults. Most popular social services like Twitter,
Facebook, and Gmail have algorithms which work to check if a new user have
registered. A new user after logging in will be presented with some tips &
training on how to get on using their services quickly. That’s a context aware
serving of services in which they have a new user context but what if that
particular new user is a senior citizen which might get stuck with their
somewhat advanced basic tutorial. So beside detecting the user type only web

3
16 Souhardya Gayen

developers will also need to target the aging factor. We can say that if a user is
new to this website then serve this content first AND if the user is a new one AND
falls in this age category then present this content first in that layout AND using
these style rules, etc.
Another potential context is cross cultural website. Each culture has inherent
differences, values, ethics, and well-defined way of lifestyle. Online trade,
communication technologies, social networking and news websites have all,
more or less, contributed towards cultural mixes and thus creating a global
culture. Responsive web design has made all these informational websites more
accessible and user friendly. This has posed serious issues for developing
countries like Pakistan to protect their cultural values. Developing countries, like
ours, are trying to resist against this cultural change but the world is moving
ahead to more globalization and technology itself has formed its own global
culture. Global culture is, at large, being shaped by developed countries who are
sitting at the driving seats of invention, production, and distribution of
information and communication technologies. The websites like news, articles,
blogs, networking platforms and online shopping were far away from the
approach of non-computer users before the advent of responsive web design.
The users of these websites significantly increased after these websites have
been turned to responsive. Global community nowadays is not using mobile
devices to stay in touch but they are doing a lot more. People have made much
awareness through social media websites that they had even organized such a
revolution by using these platforms that caused some Governments, like
Pakistan, to put a ban on these websites in their countries. So this is much
evident that responsive web design, by providing accessibility and availability of
websites, has posed serious impacts on the way people are living.
Culture, hence, becomes another context in responsive web design where, for
instance, an online shopping website based in a western country when accessed
in Pakistan would not show the content which is not permitted by our religious
cultural ethics and values. But there should be some way to override this
behavior if minorities living in Pakistan want to get access to the full version of
the website content. This is only the single example of how we could use cultural
context in responsive web design and if properly implemented this will help web
users of religious families to access the web content on such websites that they
feel uncomfortable to surf publicly because only the text and figures, without
half-dressed male/ female models advertising on such online shopping websites,
will make no harm to their cultural values. Hiding religiously banned material
whenever viewed in such a zone is just one parameter discussed here and there
could be a lot more. Therefore, responsive web designers and developers need to
take into account such considerations to make a cross-cultural responsive
website. On more positive side, web designers could even offer content which
highlights and expresses culture and cultural values of their users in whatever
part of the world they are surfing web. This will add a positive impact to the
goodwill of companies in their users eyes.

6 Conclusion
It has been and always be challenging to keep your website design up to different
device sizes and resolutions. A responsive website, if developed properly, adapts
to different device sizes, enhances user experience, is mobile-friendly, and is
ready for future devices. This all has been possible due to three basic building
blocks of Responsive Web Design (RWD) i.e. media queries, flexible/ scalable
media (images and videos), and most importantly fluid/ flexible grids. Heavy
websites posed constrains to mobile devices due to lesser capabilities of mobile
web browsers as compared to those of desktop browsers. A fourth major
building block was then added to RWD namely dynamic content which provides
techniques like lazy loading and selective content loading. Dynamic content
requires a properly structured semantic web content which itself requires a
 Multipage Responsive Web Design 17

tedious work of document structuring and developing hierarchy of the content in

correlation to the structure.
We have ready-made Responsive Frameworks to help developers just take
care of their content structuring and hierarchical planning and forgot about the
underlying tedious work of RWD principles. Selection of any such framework
depends on user needs and requirements. Therefore, it is at the developer’s part
to come up with the decision on which framework suits best for their website
and this is the most important thing because to change the choice of framework
in the middle or after the development means to start a new web project.
Experienced developers and designers could also design their own responsive
framework if required. Moreover, a responsive website requires on the go device
agnostic testing during development phase and before actual launch to avoid
later complications. Even ready-made frameworks could put the developers in a
situation of chaos if handled improperly.
So far, RWD means a website which is able to adapt itself on various screen
sizes and resolutions. We should have to take our responsive websites a step
forward towards a responsive philosophy by which a website would not only
adapt to different screen sizes but also adapt its content to suite different
contexts of user behavior or user needs. In a nutshell, those days are not far away
when Responsive Web Design with Responsive Philosophy would be declared a
standard for websites as we have seen Google rating websites in their search
results based on mobile-friendly test and in future it would rate websites as
human-friendly, websites which would layout and shape their content based on
user preferences, user behavior, location, age, gender and cultural values.

References
1. B. Sanou, “International Telecommunication Union, ICT Facts and Figures 2014.”ITU ICT
Statistics, May 2014. http://www.itu.int.
2. C. Sharkie and A. Fisher, Jump Start Responsive Web Design. Sitepoint, 2013.
3. M. Ethan, “Responsive Web Design.” Alistapart, May 2010. http://goo.gl/ arO06J.
4. J. Sanchez, “2013 the Year of Responsive Web Design.” Uberflip Infographic, December
2012. http://goo.gl/Z9YoZ5.
5. R. Belisle, “The Year of Responsive Web Design: Making your Website Mobile in2013,”
March 2013. http://goo.gl/k84jxH.
6. “W3schools.” http://www.w3schools.com.
7. G. Candrlic, “How Website Speed Affects Conversion Rates,” December 2012.
http://goo.gl/xRh7PM.
8. K. Scott, “A Pixel Identity Crisis.” Alistapart, January 2012. http://goo.gl/ hnFBez.
9. D. Storey, “Understanding Pixel Density, Resolution and Retina Displays.”
Demosthenes.info Blog, August 2012. http://goo.gl/OxxSv4.
10. R. Frederick, “Not That Close! Avoiding the Landscape Zoom-in Effect on
Mobile.”Fuseinteractive.ca Blog, September 2013. http://goo.gl/SpMFHu.
11. C. Mills, “Media Query Syntax Basics.” Peachpit.com Articles, July 2010. http:
//goo.gl/GvRyQG.
12. H. Pickering, “The Importance of HTML5 Sectioning Elements.” Smashing Magazine,
January 2013. http://goo.gl/qxG5KC.
13. “W3C HTML5 Semantic Elements.” http://goo.gl/mB24IW.
14. “Build Faster WordPress Sites with Lazy Loading.” Creativebloq Blog, January
2015. http://goo.gl/qbKkda.
15. “What are Frameworks? 22 Best Responsive CSS Frameworks for Web Design.”
Awwwards.com Blog. http://goo.gl/Ks6TDC.
16. “What is Bootstrap? We Have the Answers.” Bootstrapbay.com Blog. http://
goo.gl/1zSKGo.
17. “Bootstrap components.” http://getbootstrap.com/components/.
18. “Helping Users Find Mobile-friendly Pages.” Google Webmaster Blogpost, November
2014. http://goo.gl/LGnwTW.
19. D. Gardner and M. Treff, “The Next Big Thing in Responsive Design.” Fastcodesign Blogs,
September 2014. http://goo.gl/rvii9x.
18 Souhardya Gayen