Why Responsive Web Design

Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

Key Concepts
Three key technical features are at the heart of responsive web design:

  • Media queries and media query listeners
  • A flexible grid-based layout that uses relative sizing
  • Flexible images and media, through dynamic re-sizing or CSS
Why Responsive :
  • One website,Many Devices
  • Easier to Manage
How would you write css media queries for multiple screen sizes?
@media only screen and (max-width:319px)  
{ body{font-size:11px}}
@media only screen and (min-width:320px) and (max-width:767px)
{ body{font-size:12px} }
@media only screen and (min-width:768px) and (max-width:1023px) 
 { body{font-size:14px} }
@media only screen and (min-width:1024px) and (max-width:1899px) 
{ body{font-size:16px} }
@media only screen and (min-width:1900px) 
{ body{font-size:18px} }
Simple Responsive website - with code -Free download












basicresponsive.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- viewport meta to reset iPhone inital scale -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crazy web developers</title>

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com
/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="pagewrap">
  <div id="header"><span style="float:right;list-style-type: none;">
    <li>Contact</li>
    </span><span style="float:right;list-style-type: none;">
    <li>Map</li>
    </span>
    <figure><img src="asserts/dlflogo.png" alt="logo" class=" "></figure>
   
  </div>
  <div id="content">
    <h2>Welcome to Crazy web developers</h2><br/><br/><br/>
 
   
    <p style="color:#50A7FF;">MY Moto z How easy to work fronted 
 dev & Daily Job notifications ,ALL RESUME MODELS,
 Interview questions,Articals.More 
 http://crazywebdevelopers.blogspot.in/</p>
 <br/><br/><br/>
  </div>
  <div id="sidebar">
    <h3>Followers</h3><br/>
    <p>Google +</p>
    <p>Facebook</p>
    <p>Linkdin</p>
  </div>
  <div id="footer">
    <h4>Footer : created By Crazy web developers</h4>
  </div>
</div>
</body>
</html>


Media queries, a feature of cascading style sheets (CSS), allow the developer to specify when a certain style takes effect. With CSS2, for example, a media query will serve printer-friendly style sheets if requested. CSS3 has expanded query capabilities that allow style sheets to be targeted to a device’s display and serve a desktoptablet or smartphone style sheet depending on the query response.As a result, HTML code can be repurposed instead of having to be rewritten, which saves considerable development time.


style.css


@charset "utf-8";
/* CSS Document */

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #000;
}
@font-face {
 font-family: 'futura_stdbook_oblique';
 src: url('../fonts/futurastd-bookoblique-webfont.eot');
 src: url('../fonts/futurastd-bookoblique-webfont.eot?#iefix') 
 format('embedded-opentype'),  
 url('../fonts/futurastd-bookoblique-webfont.woff') format('woff'),  
 url('../fonts/futurastd-bookoblique-webfont.ttf') format('truetype'),  
 url('../fonts/futurastd-bookoblique-webfont.svg#futura_stdbook_oblique') format('svg');
 font-weight: normal;
 font-style: normal;
}
/*=======global class=======*/
* {
 margin: 0px;
 padding: 0px;
}

/*********************************************
STRUCTURE
*********************************************/
#pagewrap {
 padding: 5px;
 width: 960px;
 margin: 20px auto;
}
#header {
 height: 80px;
}
#content {
 width: 600px;
 float: left;
}
#sidebar {
 width: 352px;
 float: right;
}
#footer {
 clear: both;
}

/*******************************************
MEDIA QUERIES
*********************************************
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
 width: 94%;
}
#content {
 width: 65%;
}
#sidebar {
 width: 30%;
}
}

/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
 width: auto;
 float: none;
}
#sidebar {
 width: auto;
 float: none;
}
}

/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
 height: auto;
}
h1 {
 font-size: 24px;
}
#sidebar {
 width: auto;
}
}

/* for 320px */
@media screen and (max-width: 320px) {
#header {
 height: auto;
}
h1 {
 font-size: 24px;
}
#sidebar {
 width: auto;
}
 .logoimg{
 background-size:300px;
 }

}

/* border & guideline (you can ignore these) */
#content {
 background: #f8f8f8;
}
#sidebar {
 background: #f0efef;
}
#header, #content, #sidebar {
 margin-bottom: 5px;
}
#pagewrap, #header, #content, #sidebar, #footer {
 border: solid 1px #ccc;
}

More :

(e) Books :
(e) Learning :
(e) Templates :

Contact Me For Responsive Web design - ContactME




Previous
Next Post »