Malnad College of Engineering

(An autonomous institution under Visvesvaraya Technological University, Belgaum)

Hassan – 573202, Karnataka, India

A seminar Report
on

Responsive Front-end Design

Submitted by

HK Falguni
(4MC17IS015)

Under the guidance of

Mrs. Priyanka M C
(Asst.Professor)
IS&E

Department of Information Science & Engineering

Malnad College of Engineering
PB# 21, Hassan - 573 202, Karnataka, India

Tel: 08172-245093 Fax: 08172-245683 Web: www.mcehassan.ac.in

2020-2021
 Malnad College of Engineering , Hassan
Department of Information Science & Engineering
Eighth Semester B.E.
Seminar Report

Responsive Front-end Design

USN : 4MC17IS015
Name : HK Falguni

Guide Examiners (signature and Name

1.

2.
Signature of the guide

Mrs. Priyanka M C
(Asst.Professor) 3.
IS&E

4.
 Abstract
Due to the rapid development of the IT industry, there are many different devices for
accessing the web, desktop computers with a wide range of screen dimensions.
Hence, there is a need for adapting the web content layout for different screen dimensions
and resolutions. Responsive web design is a modern technique for that purpose.
This report will discuss how to use Media Queries, Bootstrap responsive navigation, and
layout of streaming technology to achieve responsive web design.
And make a rational analysis about responsive web development at the present stage.
Therefore, there is a need to switch to Responsive Web Design which is capable of
reshaping itself depending on various screen sizes and resolutions from largest screen sizes
to smallest on mobile devices
 Contents

1. Introduction................................................................................................1-3

1.1 Introduction to the area........................................................................1-2

1.2 Potential of the problem.......................................................................1-2

1.3 Problem Description.............................................................................1-2

1.3.1 What is Responsive Front-end Design?.........................................1-2

1.3.2 Objective of Responsive Front-end Design...................................2-3

1.4 Platform and Tools Used.....................................................................2-3

2. Literature Survey.....................................................................................3-6

3. Implementation/About the topic................................................6-9

3.1 Browser Compatibility Analysis.......................................................9-10

3.2 Setting the viewport.........................................................................10-13

3.3 Ensure an Accessible viewport........................................................13-14

3.4 Size content to the viewport............................................................13-14

3.5 Images..............................................................................................14-15

3.6 Layout..............................................................................................15-16

3.7 CSS Grid Layout.............................................................................16-17

3.8 Multiple-column Layout..................................................................17-18

3.9 Use CSS media queries for responsiveness.....................................18-19

3.10 Media queries based on viewport size.............................................18-19

3.11 How to choose breakpoints.............................................................19-23

3.12 Optimize text for reading.................................................................23-24

4. About the base paper..........................................................................24-25

5. Conclusion................................................................................25-26

References...........................................................................................26-27
Responsive Front - end Design

Chapter 1

Introduction
1.1 Introduction to the area
Due to the evolution of techniques and communication devices in the past decade, anyone
can easily surf around the web using a PC, mobile phone, tablet, television, game console,
etc. All these devices have the ability to access to the internet, and have their own screen
dimensions and use different resolutions. Hence web designers should take care that the
content of their website is readable and functional on all these resolutions. Design and
Development of the web page should make an appropriate response and adjustment
according to user's system platform, screen size, screen orientation and so on. That means
no matter what screen size of the device is being used, we should be able to switch the
page resolution, picture size and related scripting capabilities automatically, so as to adapt
to different devices. Today internet usability is increasing day by day. According to a
static suggestion there are over 3.5 million devices which are activated. When we connect
to internet, we make our interaction to web services. These services have different types
like (social media, online games, medical services, Ecommerce and many more). These
services are being used now a day. However, solution of the problem has been designed
and different version of website for different devices has also been introduced to handle
the request based on viewers viewing a platform. 67% Google survey of respondents
prefers purchase from a mobile friendly website. Now it has become a huge challenge to
design a website for all browsers, operating systems and all devices. Design and
development of a web should design a properly response and settlement according to a
user’s platform, screen orientation, screen size and so on.

Department of IS&E, MCE, Hassan Page 1

Responsive Front - end Design

1.2 Potential of the problem

Almost every new company these days wants a mobile version of their website.

It’s practically essential after all:

One design for the BlackBerry, another for the iPhone, the iPad, notebook, Kindle — and
all screen resolutions must be compatible, too.

In the next five years, we’ll likely need to design for a number of the additional
inventions.

1.3 Problem description

1.3.1 What is Responsive Front-end Design?

A website that is responsively designed automatically adjusts to the screen size, platform
or other specific needs of the user. If the user is using a web browser on the mobile phone,
for example, the website adjusts to the small size of the device, displaying some things
like a navigation bar differently or displaying different content to better use the small
screen size. Responsive design is therefore a form of customization or personalization of a
website based on the needs of the user.

Websites are personalized in a variety of ways. Benlian (2015) mentions content

personalization where users indicate what product or service attributes they like or dislike
(for future web offerings) and design personalization where users indicate preferences for
how the website's core content is presented or laid out. Responsive design is different in
that users do not enter or select their preferences. It involves creating a website that
optimizes itself for the platform or type of device the user is using so that the user has a
good experience.

Department of IS&E, MCE, Hassan Page 2

Responsive Front - end Design

1.3.2 Objective of Responsive Front-end Design

The goal of responsive front-end design is to make a web page look equally good
regardless of the screen size of a device, also to avoid the unnecessary resizing, scrolling,
zooming, or panning that occurs with sites that have not been optimized for different
devices. It is often very difficult to navigate these sites.

1.4 Platform and Tools Used

According to (Browser support, 2013), the most commonly used screen resolutions are
1366x768px (mostly for laptops) - 25% and 1900x1200px (desktop computers) - over
30%, mobile phones with resolution 800x480px - 0.5%. Searching the web by using
mobile devices is constantly increasing since 2011. The number of computers around the
world reaches 2 billion, while the number of mobile phone owners is up to 5 billion. The
need for creating responsive web content which can easily be accessed by using various
devices is obvious.

A tool for responsive design testing http://responsive.victorcoulon.fr enables a tool bar on

its web page which gives options to check the layouts of different resolutions and devices.

Department of IS&E, MCE, Hassan Page 3

Responsive Front - end Design

Chapter 2

Literature Survey
Fixed width web design is going to an end since now responsive design has become
exigency of market. Thus, mobile unfriendly and fixed width web design needs to waive.
In recent development, Ethan Marchotte coined the term “Responsive Front –end Web
Design (RWD)” and defined some other terms, flexible images or media queries and fluid
grid.

He explains the theory and practices of RWD in book titled, ―Responsive Front-end Web
Design‖. Websites are not optimized on small devices except shrink fit website to
viewable area.

Users require zoom technique constantly via touch to view it well. However, according to
Marchotte, the layout of a website is altered based view port of devices, fluid and
adjustable layout. A combination of techniques used to create RWD, there are integral
ingratiate, a flexible grid-based layout, flexible images and media, and media queries. We
need flexible content for RWD.

Image must be fluid image in this context. Marchotte, has done an experiment that he
inserts image to fluid container smaller. Over sized image over flows the container. They
don’t work in responsive environment. Marchotte, provide solution by giving maximum
width constraint rule of CSS for every image to avoid the exceeded width of containers.
By applying maximum width of image 100% and for flexible embed videos, the same
technology may be used to find the solution of such problem. Besides this, Web Page
Layout is important and planned aspect of Responsive Front-end Web Design. RWD
works on multiple devices by using fluid proportion-based grids. It is allowed to resize the
content and re-arrange as the percentage based width of website grid contracts.

Pettit has recommended fluid layout that is designed exactly according to the proportion of
echo page element in percentage. Traditionally, a website is designed by using pixels.
There was going to be same and fixed size. The website view by all devices with same
larger sized for relative units like percentages, rather than pixels. If you use pixels to

Department of IS&E, MCE, Hassan Page 4

Responsive Front - end Design

design a website, there’s a simple mathematical formula that can help you in transition to
use percentages.

1) Target/Context=Result

Example: Suppose you have a website that has a wrapper containing 980 PX width and
you are looking at this site in a maximized browser size which is 1920 pixels. In this case,
windows screen is context and wrapper is target. You can divide the target by context to
get percentage value.

2) 980px/1920=50%

It is a difficult work, but developer’s life has become less miserable since many
frameworks available in the market such as Bootstrap, Foundation, Gumby, Semantic UI
and many other similar products. According to Ethan Marchotte, another most important
technique which is used in RWD is media queries. It will automatically be adjusted to
different styles according to the different screen resolutions. Media queries confirm that
we can test not only some certain types of equipment but also the present physical
properties for displaying our design. Media queries function like a device detector which
inspects device types used. It is also used to tailor a website up to a specific range of
output devices without changing the content itself. CSS code written for media queries is
very handy; syntax is very simple and easy to use.

Figure 1:Responsive front-end web showing various screensize and resolution

Department of IS&E, MCE, Hassan Page 5

Responsive Front - end Design

If set {} a view which are compatible with iPad and iPhone, the code

1) ipad -> (min-width:768 PX) and (MaxWidth:1024 PX),

2) iphone -> (min-width:320PX) and (maxwidth:767PX).

In RWD another compulsory design consideration that cannot be ignored is called Web
Typography. Previously font common unit has been used that is PX which is not resizable
unit. In PX Unit, there is a problem that it is fixed on all devices of screen. Font needs to
be responsive and font has been measured in Rem (em). There are many developed types
of tools in Java script which are FlowType.js, FitText.js, Big Text. These tools not only of
responsive size but its head lines are also made scalable. Fluid Image is important
principal in RWD. Designed website always displays image in right resolution for targeted
device. Fluid image makes picture sale and provide friendly display according to device
screen.

Department of IS&E, MCE, Hassan Page 6

Responsive Front - end Design

Chapter 3

Implementation
In order to design a responsive website, a developer has to take different design aspects
into consideration. This paper discusses the use of the Media Queries, Bootstrap
responsive navigation, and Flow layout (defined web content width by percentage) and
other technologies to achieve responsive web design. First, we should introduce a line of
code to the head tag: This is a description of the viewport, most mobile browsers will
enlarge the width of the HTML page’s view(viewport) to comply with the screen
resolution.

Use meta tag to reset the view. Here the setting means that using device's width as view
width and prohibiting the initial scaling width. Default scaling is 1.

1) Media queries : A designer must use HTML and CSS Media queries to assign
different style sheets depending on browser window size . It is used to tailor a website up
to a specific range of output devices without changing the content itself. If a terminal’s
resolution is less than 980px, the code is: @meadia screen and （max-
width：980px）{}；

If set a views which are compatible with iPad and iPhone ,

the code is:

/**iPad**/ @media only screen and (min-width:768px) and (maxwidth: 1024px){}

/*iPhone*/ @media only screen and (min-width:320px) and (maxwidth: 767px){}

2) Fluid grids: Grids are the simplest, strongest and quick way to create page
layouts. It enables the content of the site to resize and rearrange itself as the percentage
based width of a webpage grid expands or contracts. Thus it targets the width of user’s

Department of IS&E, MCE, Hassan Page 7

Responsive Front - end Design

web browser to determine how much space is available and how it should display all the
contents. When a user narrow the browser window , often find that a part of the contents in
the original page can not be displayed in the browser. To view this part, users need to
operate the horizontal or vertical scroll bar that appears in browser. This not only causes
inconvenience to browse the web, but also have difficulties in printing on different sizes of
paper. There are two key points of flow layout: first, all involved DIV modules in the
layout are set to float: left; Second, widths are expressed by percentage.

For example, we defined a CSS rule: div#content {width:70%;}.

That means div # content width is 70% of the width of its parent element. Thus, when the
browser window is resized, div # content width will change.

3) Flexible images: A responsively designed website would always display images

at the right resolution for the target device. RWD automatically changes.

4) Bootstrap responsive navigation: Bootstrap, launched by Twitter, is an

open source package for front-end development. It is also a CSS / HTML framework.
Bootstrap offers an elegant specification of HTML and CSS, which is written by less, a
kind of dynamic CSS language. The response navigation which developed on the basis of
the bootstrap is a small JavaScript plug-in and only 1.7KB after compression, we can
create switchable navigation for the small screen. It supports touch screen and CSS3
transition effects, with very good performance. And it also supports transition from height:
0 to height: auto, which is rarely achieved in CSS3 transition effects.

First, setting in CSS: html , body{min-width:1333px} It will set the minimum width of the
page as same as the users' device own resolution, so the page will not deform. Min-width
is the property of CSS2, so compatibility is good. Then, CSS responsive documents
haven’t joined the default of Bootstrap, so it should be introduced into the header file on
the basis of have been to :

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

So that, in this way, we can use bootstrap to achieve responsive navigation.

Department of IS&E, MCE, Hassan Page 8

Responsive Front - end Design

Figure 2: iPad Pro (1024*1366) Figure 3 :PC (1093*667)

Figure 4: iPhone 7 (375*667)

Department of IS&E, MCE, Hassan Page 9

Responsive Front - end Design

3.1 Browser Compatibility Analysis

In order to achieve responsive web design, it's inevitable to discuss compatibility issues
about HTML5, CSS3 and Bootstrap on the client browser .Our analysis mainly focus on
the world's three major browsers: Chrome, Internet Explorer and Firefox.

Table1: Comparison on browser compatibility

However, some CSS3 and HTML5 properties cannot show good compatibility on Internet
Explorer 8 and 9. For example:

Table2: Comparison between IE8&IE9

In addition, in order to support Media Queries , Internet Explorer 8 need coordinate with
Respond.js. Bise, a kind of IE6 compatibility library belongs to Bootstrap, make up the
pity that caused by IE6 incompatibility issue. Currently, Bise support most properties of
bootstrap on IE6, but there also have some properties that couldn't support. Bise Usage:
First, introduced CSS file to tag, and then introduced Bise CSS patch file:

<link rel=”stylesheet” type=”text/css” href=”bootstrap/css/bootstrap-ie6.css”>

<link rel=”stylesheet” type=”text/css” href=”bootstrap/css/ie.css0”>

Department of IS&E, MCE, Hassan Page 10

Responsive Front - end Design

Finally add JavaScript file and Bise JavaScript patch file to the end of HTML document.
Overall, responsive web which used Bootstrap to achieve usually have better compatibility
for browser.

3.2 Setting the viewport

Pages optimized for a variety of devices must include a meta viewport tag in the head of
the document. A meta viewport tag gives the browser instructions on how to control the
page's dimensions and scaling.

To attempt to provide the best experience, mobile browsers render the page at a desktop
screen width (usually about 980px, though this varies across devices), and then try to
make the content look better by increasing font sizes and scaling the content to fit the
screen. This means that font sizes may appear inconsistent to users, who may have to
double-tap or pinch-to-zoom in order to see and interact with the content.

<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…

Using the meta viewport value width=device-width instructs the page to match the screen's
width in device-independent pixels. Device (or density) independent pixels being a
representation of a single pixel, which may on a high density screen, consist of many
physical pixels.

This allows the page to reflow content to match different screen sizes, whether rendered
on a small mobile phone or a monitor

Department of IS&E, MCE, Hassan Page 11

Responsive Front - end Design

Figure 5 : With viewport meta tag

Department of IS&E, MCE, Hassan Page 12

Responsive Front - end Design

Figure 6: Without viewport meta

tag page's width constant when rotating to landscape mode, and
Some browsers keep the
zoom rather than reflow to fill the screen. Adding the value initial-scale=1 instructs
browsers to establish a 1:1 relationship between CSS pixels and device-independent pixels
regardless of device orientation, and allows the page to take advantage of the full
landscape width. The Does not have a <meta name=‖viewport‖> tag with width or initial-
scale Lighthouse audit can help you automate the process of making sure that your HTML
documents are using the viewport meta tag correctly

Department of IS&E, MCE, Hassan Page 13

Responsive Front - end Design

3.3 Ensure an Accessible viewport

In addition to setting an initial-scale, you can also set the following attributes on the
viewport:

• minimum-scale

• maximum-scale

• user-scalable

When set, these can disable the user's ability to zoom the viewport, potentially causing
accessibility issues. Therefore we would not recommend using these attributes.

3.4 Size content to the viewport

On both desktop and mobile devices, users are used to scrolling websites vertically but not
horizontally; forcing the user to scroll horizontally or to zoom out in order to see the
whole page results in a poor user experience.

When developing a mobile site with a meta viewport tag, it's easy to accidentally create
page content that doesn't quite fit within the specified viewport. For example, an image
that is displayed at a width wider than the viewport can cause the viewport to scroll
horizontally. You should adjust this content to fit within the width of the viewport, so that
the user does not need to scroll horizontally.

The Content is not sized correctly for the viewport Lighthouse audit can help you
automate the process of detecting overflowing content

3.5 Images
An image has fixed dimensions and if it is larger than the viewport will cause a scrollbar.
A common way to deal with this problem is to give all images a max-width of 100%. This
will cause the image to shrink to fit the space it has, should the viewport size be smaller

Department of IS&E, MCE, Hassan Page 14

Responsive Front - end Design

than the image. However because the max-width, rather than the width is 100%, the image
will not stretch larger than its natural size. It is generally safe to add the following to your
style sheet so that you will never have a problem with images causing a scrollbar.

img {
max-width: 100%;
display: block;
}

• Add the dimensions of the image to the img element

When using max-width:100% you are overriding the natural dimensions of the image,
however you should still use the width and height attributes on your <img> tag. This is
because modern browsers will use this information to reserve space for the image before it
loads in, this will help to avoid layout shifts as content loads.

3.6 Layout
Since screen dimensions and width in CSS pixels vary widely between devices (for
example, between phones and tablets, and even between different phones), content should
not rely on a particular viewport width to render well.

In the past, this required setting elements used to create layout in percentages. In the
example below, you can see a two-column layout with floated elements, sized using
pixels. Once the viewport becomes smaller than the total width of the columns, we have to
scroll horizontally to see the content.

Department of IS&E, MCE, Hassan Page 15

Responsive Front - end Design

Figure 7: Floated layout using pixel

By using percentages for the widths, the columns always remain a certain percentage of
the container. This means that the columns become narrower, rather than creating a
scrollbar.

• Flexbox

This layout method is ideal when you have a set of items of different sizes and you would
like them to fit comfortably in a row or rows, with smaller items taking less space and
larger ones getting more space.

.items {

display: flex;

justify-content: space-between;

In a responsive design, you can use Flexbox to display items as a single row, or wrapped
onto multiple rows as the available space decreases

Department of IS&E, MCE, Hassan Page 16

Responsive Front - end Design

3.7 CSS Grid Layout

CSS Grid Layout allows for the straightforward creation of flexible grids. If we consider
the earlier floated example, rather than creating our columns with percentages, we could
use grid layout and the fr unit, which represents a portion of the available space in the
container.

.container {
display: grid;
grid-template-columns: 1fr 3fr;
}

Figure 8: Two-column grid

Grid can also be used to create regular grid layouts, with as many items as will fit. The
number of available tracks will be reduced as the screen size shrinks. In the below demo,
we have as many cards as will fit on each row, with a minimum size of 200px.

Figure 9: Multi-column grid

Department of IS&E, MCE, Hassan Page 17

Responsive Front - end Design

3.8 Multiple-column layout

For some types of layout you can use Multiple-column Layout (Multicol), which can
create responsive numbers of columns with the column-width property. In the demo
below, you can see that columns are added if there is room for another 200px column.

Figure 10: Multiple-column layout

3.9 Use CSS media queries for responsiveness

Sometimes you will need to make more extensive changes to your layout to support a
certain screen size than the techniques shown above will allow. This is where media
queries become useful.

Media queries are simple filters that can be applied to CSS styles. They make it easy to
change styles based on the types of device rendering the content, or the features of that
device, for example width, height, orientation, ability to hover, and whether the device is
being used as a touchscreen.

To provide different styles for printing, you need to target a type of output so you could
include a stylesheet with print styles as follows:

Department of IS&E, MCE, Hassan Page 18

Responsive Front - end Design

<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="stylesheet" href="print.css" media="print">
…
</head>
…

Alternatively, you could include print styles within your main stylesheet using a media
query:

@media print {
/* print styles go here */
}

It is also possible to include separate stylesheets in your main CSS file using the @import
syntax,@import url(print.css)print, however this use is not recommended for performance
reasons. See Avoid CSS imports for more details.

For responsive web design, we are typically querying the features of the device in order to
provide a different layout for smaller screens, or when we detect that our visitor is using a
touch screen.

3.10 Media queries based on viewport size

Media queries enable us to create a responsive experience where specific styles are applied
to small screens, large screens, and anywhere in between. The feature we are detecting
here is therefore screen size, and we can test for the following things.

• width (min-width, max-width)

• height (min-height, max-height)

• orientation

• aspect-ratio

Department of IS&E, MCE, Hassan Page 19

Responsive Front - end Design

3.11 How to choose breakpoints

Don't define breakpoints based on device classes. Defining breakpoints based on specific
devices, products, brand names, or operating systems that are in use today can result in a
maintenance nightmare. Instead, the content itself should determine how the layout adjusts
to its container.

•Pick major breakpoints by starting small, then working up

Design the content to fit on a small screen size first, then expand the screen until a
breakpoint becomes necessary. This allows you to optimize breakpoints based on content
and maintain the least number of breakpoints possible.

Let's work through the example we saw at the beginning: the weather forecast. The first
step is to make the forecast look good on a small screen

Figure 11: App at a narrow-

width

Department of IS&E, MCE, Hassan Page 20

Responsive Front - end Design

Next, resize the browser until there is too much white space between the elements, and
the forecast simply doesn't look as good. The decision is somewhat subjective, but above
600px is certainly too

Figure 12: App at tweaking

stage

To insert a breakpoint at 600px, create two media queries at the end of your CSS for the
component, one to use when the browser is 600px and below, and one for when it is wider
than 600px.

@media (max-width: 600px) {

@media (min-width: 601px) {

Finally, refactor the CSS. Inside the media query for a max-width of 600px, add the CSS
which is only for small screens. Inside the media query for a min-width of 601px add CSS
for larger screens.

•Pick minor breakpoints when necessary

In addition to choosing major breakpoints when layout changes significantly, it is also

helpful to adjust for minor changes. For example, between major breakpoints it may be
helpful to adjust the margins or padding on an element, or increase the font size to make it
feel more natural in the layout.

Department of IS&E, MCE, Hassan Page 21

Responsive Front - end Design

Let's start by optimizing the small screen layout. In this case, let's boost the font when the
viewport width is greater than 360px. Second, when there is enough space, we can
separate the high and low temperatures so that they're on the same line instead of on top of
each other. And let's also make the weather icons a bit larger.

@media (min-width: 360px) {

body {
font-size: 1.0em;
}
}

@media (min-width: 500px) {

.seven-day-fc .temp-low,
.seven-day-fc .temp-high {
display: inline-block;
width: 45%;
}

.seven-day-fc .seven-day-temp {
margin-left: 5%;
}

.seven-day-fc .icon {
width: 64px;
height: 64px;
}
}

Similarly, for the large screens it's best to limit to maximum width of the forecast panel so
it doesn't consume the whole screen width.

@media (min-width: 700px) {

.weather-forecast {
width: 700px;
}
}

Department of IS&E, MCE, Hassan Page 22

Responsive Front - end Design

Figure 13: Responsive Forecast

3.12 Optimize text for reading

Classic readability theory suggests that an ideal column should contain 70 to 80 characters
per line (about 8 to 10 words in English). Thus, each time the width of a text block grows
past about 10 words, consider adding a breakpoint.

Figure 14: Text as read on a mobile device

Department of IS&E, MCE, Hassan Page 23

Responsive Front - end Design

Let's take a deeper look at the above blog post example. On smaller screens, the Roboto
font at 1em works perfectly giving 10 words per line, but larger screens require a
breakpoint. In this case, if the browser width is greater than 575px, the ideal content width
is 550px.

@media (min-width: 575px) {

article {
width: 550px;
margin-left: auto;
margin-right: auto;
}
}

Department of IS&E, MCE, Hassan Page 24

Responsive Front - end Design

Chapter 4

About the base paper

A Study of Impact of Responsive Web Design in E-commerce Websites, International
Journal of Advanced Research in Computer and Communication Engineering ,ISO
3297:2007 Certified Vol. 7, Issue 2, February 2018,Authors: Mrs. Vaishali Kadu 1 , Mr.
C. P. Kadu 2 Assistant Professor, Sinhgad Institute of Management, Vadgaon BK ,Pune,
Maharashtra, India1 Assistant Professor, Sau. Venutai Chavan Polytechnique, Vadgaon
BK ,Pune, Maharashtra, India

Responsive Web Design is an emerging trend that involves designing websites and
applications for optimal viewing across multiple devices and screen sizes using a single
code base. The advantages of Responsive Web Design include a single code base that
provides easy and low maintenance along with a single version of the website that
improves SEO. The design of your website and mobile service should be based on your
target audience. Building a site using either approach requires thorough planning and a
good understanding of the user’s roadmap through the site on every type of device.
Therefore, if you want a solution that’s easy to maintain, makes use of existing skills and
that you can control, then Responsive Web Design is the approach for e-commerce
Website. The another reason is that mobile phones and tablets are just the beginning.
There’s no telling what other devices people will be using to browse the web in the future.
We are already seeing people use their television to browse the Internet. Several years
down the line, people may start browsing the Internet on car display panels, digital alarm
machines, 3D screens, etc. Setting up a responsive website will help e-Commerce
companies future-proof against new technology, digital trends and changes in browsing
habits.

Department of IS&E, MCE, Hassan Page 25

Responsive Front - end Design

Chapter 5

Conclusion
Responsive web design is certainly a convenient solution for various types of websites. It
is indeed a lot of work when it comes to development. But if your website is simple,
logical, and has a lot of information that cannot be modified for mobile users – this is the
right choice. First, set your website goals for both mobile and desktop version. Only with
clear purpose you can make a decision whether to go for a responsive web design or
separate mobile web. As same as web design in the past, a project’s specific circumstances
(such as budget, target users, and site uses) determine its way of implementation.
According to the experiences we already have, if your budget is limited or not feasible to
develop a mobile website, comparing with standard fixed-width design, responsive design
always provide a better and non-discriminatory users' experience . Following the principle
of giving priority to moving, the first interface is usually designed for mobile devices and
then make PC as an extension. So, mobile terminals don’t load extra resources, don’t
redraw the pages of different style in PC terminals, which may affect the performance of
the PC.

Department of IS&E, MCE, Hassan Page 26

Responsive Front - end Design

References
Base paper:
A Study of Impact of Responsive Web Design in E-commerce Websites, International
Journal of Advanced Research in Computer and Communication Engineering ,

ISO 3297:2007 Certified Vol. 7, Issue 2, February 2018,Authors: Mrs. Vaishali Kadu ,
Mr. C. P. Kadu 2 Assistant Professor, Sinhgad Institute of Management, Vadgaon BK
,Pune, Maharashtra, India Assistant Professor, Sau. Venutai Chavan Polytechnique,
Vadgaon BK ,Pune, Maharashtra, India

[1] Responsive Web Design Podcast, Karen McGrane and Ethan Marcotte,
http://responsivewebdesign.com/podcast.

[2] Implementing Responsive Design: Building Sites for an Anywhere, Everywhere

Web , Tim Kadlec (New Riders, 2013), www.implementingresponsivedesign.com.

[3] Responsive Web Design , Ethan Marcotte (A Book Apart ,2011),

https://abookapart.com/ products/responsive-web-design.

[4] Going Responsive , Karen McGrane (A Book Apart,2015),

https://abookapart.com/prod ucts/goingresponsive.

[5] Responsive Design: Patterns & Principles , Ethan Marcotte (A Book Apart, 2015),
https://abookapart.com/products/responsivedesig n-patterns-principles.

[6] Qian Wen, HTML + CSS web design and layout from the entry to the master,
Beijing: The People’s Posts and telecommunications Press , 2008.

Department of IS&E, MCE, Hassan Page 27