www.emiprotechnologies.com

Responsive Web Design

What is responsive website ?

What is responsive website ?

What is responsive website ?

● Widescreen desktop monitor

● Smaller desktop (or laptop),

● Tablet, iPad

● Mobile phone.

Screen Sizes

Typically there have been four general screen sizes that responsive design has been aimed at:

How many of you are NOT using mobile for internet use?

Statistics showing an Increase of Mobile Usage

Importance of the responsive Web Design

#Usage of mobile proved that what is importance of responsive web design.

#Now Google Algorithm for SEO page rank considers responsiveness of website

#You should have a question that now mobile app is available, so what is need of mobile responsive website?

Mobile App V/S Responsive Website

● For which business, mobile app is useful?● Small Business● Small Medium Business● Medium Business● Large Business● Extra large Business

● Mobile app is really important for business, but responsive website has also enough importance.

Facebook

Myntra

How to make website responsive?

How to

Key Points of Responsive Web Design

● Viewport

● Flexible layout

● Media queries

#Viewport

● The viewport is the user's visible area of a web page.

● <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0,">

#Flexible layout

● Padding

● Margin

● Width in %

#CSS Media queries

● 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: 500px) {

body {

background-color: lightblue;

}

}

Any Questions?

Thank You

www.emiprotechnologies.com