25
RESPONSIVE WEBSITE DESIGN Presented by S.Vaithiya Lingam

Responsive website design

Embed Size (px)

Citation preview

Page 1: Responsive website design

RESPONSIVE WEBSITE

DESIGN

Presented by

S. Vaithiya Lingam

Page 2: Responsive website design

Introduction

Introductory article for Responsive web

design is written by Ethan Marcotte.

Released on may 2010.

Page 3: Responsive website design

What is mean by Responsive

Design?

Responsive design means, Website

automatically fits in the user’s device.

If the user has a small screen, the

elements will rearrange to the screen

width.

Page 4: Responsive website design

Two important steps

Meta tag

Media Queries

Page 5: Responsive website design

Meta Tag

<meta> tags always goes inside the

<head> element.

Provides metadata about the HTML

document.

Meta elements are typically used to

specify page description, keywords, and

other metadata.

Page 6: Responsive website design

Continue…

<meta name="viewport"

content="width=device-width, initial-

scale=1.0">

The width property controls the size of

the viewport.

Initial-scale property controls the zoom

level when the page is first loaded

Page 7: Responsive website design

Media Queries

CSS Media Query is the trick for

responsive design.

It is like writing if conditions…..

Page 8: Responsive website design

Example:

Page 9: Responsive website design

viewport width is 980px or less

Page 10: Responsive website design

viewport 700px or less

Page 11: Responsive website design

480px or less

Page 12: Responsive website design

For IE8 and older version

browsers..<!--[if lt IE 8]>

<script src="http://css3-mediaqueries-

js.googlecode.com/svn/trunk/css3-

mediaqueries.js">

</script>

<![endif]-->

Page 13: Responsive website design
Page 14: Responsive website design
Page 15: Responsive website design

Some more media queries

/* Smartphones (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ----------- */

@media only screen

and (min-width : 321px) {

/* Styles */

}

Page 16: Responsive website design

Cont…

/* Smartphones (portrait) ----------- */

@media only screen

and (max-width : 320px) {

/* Styles */

}

/* iPads (portrait and landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* Styles */

}

Page 17: Responsive website design

Cont…

/* iPads (landscape) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/* Styles */

}

/* iPads (portrait) ----------- */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait) {

/* Styles */

}

Page 18: Responsive website design

Cont…

/* Desktops and laptops ----------- */

@media only screen

and (min-width : 1224px) {

/* Styles */

}

/* Large screens ----------- */

@media only screen

and (min-width : 1824px) {

/* Styles */

}

Page 19: Responsive website design

Cont…

/* iPhone 4 ----------- */

@media

only screen and (-webkit-min-device-pixel-

ratio : 1.5),

only screen and (min-device-pixel-ratio :

1.5) {

/* Styles */

}

Page 20: Responsive website design

Flexible Images

img {

max-width: 100%;

height: auto;

width: auto\9; /* ie8 */

}

Page 21: Responsive website design

Flexible Embedded Videos

.video embed,

.video object,

.video iframe

{

width: 100%;

height: auto;

}

Page 22: Responsive website design

Advantage

Compatibility.

Sharing/Linking.

No need to Redirect.

Page 23: Responsive website design

Disadvantage

Image Resizing.

◦ This consumes unnecessary CPU and RAM.

Longer time to load.

Hover will not work

Page 24: Responsive website design

Demo

A demo on responsive website design can

be found in the following website

http://www.studiopress.com/responsive/

Page 25: Responsive website design

THANK YOU