Comprehensive Report on Responsive Web Design: A Modern Approach

This report provides a comprehensive overview of Responsive Web Design (RWD), a crucial approach in modern web development. It begins with an introduction to RWD, contrasting it with adaptive and mobile web design, emphasizing the importance of a single website interface adaptable to various devices. The report delves into the core properties of RWD, including fluid grids, flexible images, and CSS media queries. It then outlines the practical steps to achieve responsive design, such as setting the viewport and utilizing tools like Bootstrap. The report also presents the advantages of RWD, such as improved SEO and cost-effectiveness, alongside its potential drawbacks, such as browser compatibility issues. Finally, the report concludes by highlighting the significance of RWD in the context of increasing mobile internet usage. The report offers a detailed understanding of the principles and practices essential for creating websites that provide optimal user experiences across diverse devices.

Running head: RESPONSIVE WEB DESIGN
Responsive Web Design
Name of the student:
Name of the University:
Author note:

1
RESPONSIVE WEB DESIGN
Table of Contents
Introduction................................................................................................................................2
Responsive Web Design............................................................................................................2
Responsive vs. Adaptive vs. Mobile Web design......................................................................3
Properties and features of Responsive Web Design..................................................................4
Achieving the Responsive Web Design approaching................................................................4
Conclusion..................................................................................................................................5

2
RESPONSIVE WEB DESIGN
Introduction
The internet has moved on by many a miles over the past years. People now use the
internet from various devices that range from desktop computers, laptops, tablets and
smartphones. Responsive web design or RWD is one of the most commonly used web
designing approaches in the modern technological era (Mohammad & Tomberg, 2013).
Through this approach only one website interface is designed and it is meant to suffice the
needs of both broad screened devices and mobile devices. RWD allows web pages to render
differently on different devices depending on the screen sizes of the device. Content,
performance and Design fluidity is necessary across all devices for all web platforms and
hence the responsive web designing approach helps a great zeal in this process. This report
deals with the details of RWD and its principles. The report will further throw light on the
usefulness of the approach and discuss the design practices and developments made in the
particular field. A list of advantages of this approach will be contrasted against the
disadvantages if any. Finally a small case study will be highlighted that relate to this genre of
technology.
Responsive Web Design
As mentioned earlier, Responsive Web Designing the practice of designing and
developing websites that are meant to work suitably on any device, irrespective of their
screen sizes. It allows desktop users and the smartphone users to access the complete features
and functionalities of the website. Previous to the invention of this approach, website were
designed depending on the user base requirements and when needed separate websites were
used to be designed for wide screen and mobile devices. Even earlier to that, website
stakeholders and the respective web developers only used to focus on the desktop versions of
the websites. These websites, when opened on a mobile device used to look unorganized or

3
RESPONSIVE WEB DESIGN
mostly a large instance of the website used to be presented on the mobile screen. Users will
need to scale the website down using the zoom option of the mobile browser and then only
get access to a very small version of the website, with tiny buttons, unclear graphics and not-
readable text. This and designing two different websites was a bad idea as time proceeded.
This not only led to the loss of audience due to the unattractiveness of the interface, but also
resulted in more expenses for the website stakeholders. Hence, the concept of responsive web
design was coined and everything has changed ever since (Gustafson, 2015).
With the increase in mobile users across the world, the need for a concept like a
responsive web design is inevitable. Responsive web design highlights the concept of
“Mobile First” approach. This means that the websites when designed needs to be specifically
tested for mobile devices as well before being launched (Natda, 2013). This gives special
preference to the mobile users who browse the internet almost every minute.
Responsive vs. Adaptive vs. Mobile Web design
Mobile web design is a different scenario altogether. In the past decade, websites used
to be separately built to be supported on the mobile devices. These had lesser features and an
altogether different layout. When the browser detected that a particular website was being
accessed from a computer device or a mobile device, it called the respective version
accordingly (Kim, 2013). However, this process demanded more expenditure for the
respective companies and two websites were needed to be separately built and launched. This
is where the needs for responsive and adaptive web design came into play.
Responsive and adaptive web designing approach are fairly similar. While responsive
designs are more dynamic in approach, adaptive web designs depend on a set of pre-defined
factors. Responsive designs change the look of the website quickly and are always positive to
any possible change (Ward, 2017). Adaptive design depends on the screen size and change

4
RESPONSIVE WEB DESIGN
once the screen size reaches a particular resolution, the code for which is pre-defined. That is,
in case of adaptive web design approach, several web layouts are needed to be pre-designed
and the display layout changes accordingly, but the process is however slower (Gustafson,
2015).
Properties and features of Responsive Web Design
A website designed using the RWD concept or approach adapts to the layout of the
respective viewing window, by using the fluid or proportion-based grids, CSS media queries
and flexible images which can scale up and down as necessary. The major properties of this
concept are as follows:
 The flexible images are generally transformed into relative unit size. This prevents
them from being displayed out of the container element. This hence, preserves the
resolution of the images and therefore help in the containment of the image quality.
 The fluid grid concept makes the page elements and divs to be sized in the units of
percentages unlike traditional web design approaches, where constant pixel
dimensions were used. This helps to scale down the elements according to the
changing screen resolution and never go out of the pre-set layout within the container.
 Media queries are written into CSS documents to help the pages to change layouts
whenever needed. These rules when written into the linked CSS style sheets allow the
websites to be resized by determining the browser window size or resolution.
Achieving the Responsive Web Design approach
Over the time several procedures have come up that can be used to design websites
that are responsive to their browsing environment. These tools or techniques are used
according to the need of the designer or the sometimes the content requirements also help to
determine the choice.

5
RESPONSIVE WEB DESIGN
Firstly, to set the viewport of the website is necessary. Pages that are optimized for a
different variety of devices should always include a meta-viewport tag. This is to be coded
into the head of the html document. This Meta viewport tag instructs the browser about the
rules to control the scaling and dimensions of the web pages and its elements. The following
steps should be followed to ensure that the meta viewport is correctly implemented:
 The meta viewport tag must be used to control the scaling of the browser's viewport
and width. It must also include width=device-width so as to match the screen's width
as per device-independent pixels.
 Include initial-scale=1 that helps to establish a 1:1 relationship between CSS pixels
and device-independent pixels.
 Without disabling user scaling, ensure that the page is properly accessible. This can
be done using the developer console window.
Using Bootstrap for this purpose is one of the most commonly accepted techniques.
With Bootstrap 3, designing mobile-first websites has become easier (Spurlock, 2013). No
special CSS style sheet is needed to be coded separately with separate media-query rules,
whereas, linking Bootstrap CSS to the HTML page does the entire trick. Bootstrap provides
default CSS classes that can be used within the various tags in the HTML pages to make
them responsive in nature (Spurlock, 2013).
<head>
<meta charset="utf-8">
<title> Bootstrap 3 Responsive Design </title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-1.12.4.min.js"> </script>
<script src = "js/bootstrap.min.js"> </script>
</head>

6
RESPONSIVE WEB DESIGN
Pros and Cons of Responsive Web Design
Pros
The pros or advantages in RWD are as follows:
1. It ranks better during Search Engine Optimization or SEO. Google prefers responsive
websites more against single-platform websites having similar contents.
2. Saves a lot of budget for the stakeholders. The stakeholders do not require to pay the
developers in building separate websites for desktop and mobile.
3. Consistency can be maintained in user experience and branding. All information and
features can be fitted into one website and there is no fear of losing out on features in
building a mobile website separately (Rogatnev, 2015).
Cons
There are however few disadvantages of using RWD, which are as follows:
1. If the responsive layouts are not carefully planned while in the design phase, the
audience might get really confused with the new design they see on the mobile device
which is supposed to be different from that of the desktop version that they have been
using. Thorough study of mobile UI design is needed to succeed with RWD.
2. Web browser compatibility is another issue that responsive designs face. Frain (2012),
says that there are still a few mobile web browsers that cannot link to remote files or
understand CSS3 media-query rules and hence display a fault web page version which
is not properly implemented with the linked CSS.
Conclusion
It can hence be concluded that responsive web designing is very important in the
modern times. As mobile internet browsing is increasing with time, the more is the need to

7
RESPONSIVE WEB DESIGN
switch to responsive web designs. Several web designing techniques have come up that help
the designers to design and develop such designs. Bootstrap is certainly one of the most
common of the aforesaid practices and it is also very robust and makes the process easier for
the designers. Even though the RWD principles and techniques has their own broad field of
advantages there are a certain disadvantages associated with it. These can however be
overlooked, considering the demand of mobile-first websites ion the modern era.

8
RESPONSIVE WEB DESIGN
References
Frain, B. (2012). Responsive web design with HTML5 and CSS3. Packt Publishing Ltd.
Gustafson, A. (2015). Adaptive web design: crafting rich experiences with progressive
enhancement. New Riders.
Kim, B. (2013). Responsive web design, discoverability, and mobile challenge. Library
technology reports, 49(6), 29-39.
Mohammad, A. S., & Tomberg, V. (2013, October). Harnessing the Potential of Accessibility
Standards and Responsive Web Design Practices to Achieve Learning Interoperability
on the Level of the User Interface. In International Conference on Web-Based
Learning (pp. 294-305). Springer, Berlin, Heidelberg.
Natda, K. V. (2013). Responsive web design. Eduvantage, 1(1).
Rogatnev, N. (2015). Responsive Web Design.
Spurlock, J. (2013). Bootstrap: Responsive Web Development. " O'Reilly Media, Inc.".
Ward, C. (2017). Responsive web design.
Yadav, P., & Barwal, P. N. (2014). Designing responsive websites using HTML and
CSS. International Journal of Scientific & Technology Research, 3(11), 152-155.