View
344
Download
0
Category
Preview:
Citation preview
RESPONSIVE WEBSITE
DESIGN
Presented by
S. Vaithiya Lingam
Introduction
Introductory article for Responsive web
design is written by Ethan Marcotte.
Released on may 2010.
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.
Two important steps
Meta tag
Media Queries
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.
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
Media Queries
CSS Media Query is the trick for
responsive design.
It is like writing if conditions…..
Example:
viewport width is 980px or less
viewport 700px or less
480px or less
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]-->
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 */
}
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 */
}
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 */
}
Cont…
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
Cont…
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-
ratio : 1.5),
only screen and (min-device-pixel-ratio :
1.5) {
/* Styles */
}
Flexible Images
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
Flexible Embedded Videos
.video embed,
.video object,
.video iframe
{
width: 100%;
height: auto;
}
Advantage
Compatibility.
Sharing/Linking.
No need to Redirect.
Disadvantage
Image Resizing.
◦ This consumes unnecessary CPU and RAM.
Longer time to load.
Hover will not work
Demo
A demo on responsive website design can
be found in the following website
http://www.studiopress.com/responsive/
THANK YOU
Recommended