Responsive Design

JSS ACADEMY OF TECHNICAL EDUCATION, NOIDA
DR. APJ ABDUL KALAM TECHNICAL UNIVERSITY, LUCKNOW, U.P
NAME: DHEERAJ PACHAURI
ROLL NO.: 1809113042
BRANCH: IT-1
Topic: Styling with Responsive Design

CONTENT
● What is RESPONSIVE DESIGN
● Why RESPONSIVE DESIGN is Necessary Today ?
● How to check a Site is PLATFORM INDEPENDENT or Not ?
● Benefits of using RESPONSIVE DESIGN in our sites
● Major components of RESPONSIVE WEB DESIGN
● Conclusion
● Refrences

What is RESPONSIVE DESIGN?
Responsive Web Design is about using HTML and CSS to automatically resize,
hide, shrink or enlarge a website to look good on all devices (desktop, tablets
and phones).
Responsive web design is an approach to web design that makes web pages
render well on a variety of devices and window or screen sizes. It means it
makes websites PLATFORM INDEPENDENT. .
Responsive web design is about creating web pages that look good on all
devices. A responsive web design will automatically adjust for different screen
sizes and viewports.

Why RESPONSIVE DESIGN is Necessary Today ?
Today we live in a multi-screen society. Because of this, it’s important for our
site to be viewable across as many devices as possible, because we never know
what device someone will be using to view our website.
In early 2015, Google announced that mobile-friendliness would become a
ranking factor in its search engine algorithms. This meant that sites that were
mobile-friendly would potentially lose some ground in search engine results
because they wouldn’t be delivering a good experience to mobile searchers and
viewers.

Responsive Web Design is also replace the need of separate site for
mobile devices for small screen users, Now instead of designing multiple
websites for multiple screen size, we can just design one website that
scales up or down automatically to match the device it’s being views on.

How to check Site is Plateform Independent or Not ?
There are number of ways by which we can check a site and confirm that the
site is Platform Indepedent or Not:
● By resizing our window screen and refresh in desktops.
● By using Site http://ami.responsivedesign.is.
● By using inspect element option in Web Browser.

Benefits of using RESPONSIVE DESIGN in our sites
● Improve User Experience
● Flexibility
● Search Engine Optimization
● Cost Effectiveness
● Faster mobile development at lower cost
● Improve Online and Offline Browsing experience.

Major components of RESPONSIVE WEB DESIGN
● Meta Tags
● CSS Media Queries
● Grid System
● Frameworks

Meta Tags
We use Meta Tags for making a web page Mobile Optimized. Meta Tags are
Coding statements in HTML and placed at the top of the web pages as a part
of heading.
This gives the browser instructions on how to control the page's dimensions
and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS Media Queries
Media Query allows us to depend upon the media properties. It uses the
@media rule to include a block of CSS properties only if a certain condition
is true.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

Grid Systems
Many web pages are based on a Grid System, which means that the page is
divided into columns. Using a Grid System is very helpful when designing
web pages. It makes it easier to place elements on the page.

Frameworks
Frameworks are someone else code or layout of a website. They are free, and
easy to use.
There are many existing CSS Frameworks that offer Responsive Design.
● BOOTSTRAP
● W3.CSS
● ULKIT
● SEMANTIC UI

CONCLUSION
The ultimate goal of responsive design is to avoid the unnecessary resizing,
scrolling, zooming, or panning that occurs with sites that have not been
optimized for different devices.
If we want to improve the user experience then we should focus on
Responsive Design.
Our Site can be Responsive, If we use components of Responsive Design
like CSS Media Queries, Framework and Met Tags.

REFERENCES
● Ethan Marcotte. Responsive Web Design. A Book Apart, Jan 1,
2011
● J Mazzei, “Responsive Web Design[J]”,Business NH Magazine,
vol. 9, 2012
● W3schools.com
● Wikipedia
● webfx.com

Responsive Design

More Related Content

What's hot (12)

Similar to Responsive Design (20)

Recently uploaded (20)

Responsive Design