Design Responsive Web Page

Responsive web design 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 desktop computer monitors to mobile phones)
If you want to get more information about responsive design,Responsive Web Design authored by ETHAN MARCOTTE is a great resource for help. How to design a responsive web page?

Step 1: Meta Tag

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

Viewport is supported by most browsers.The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%.

For IE8 or earlier version which does not support media query, we can use media-queries.js or respond.js:

<!--[if lt IE 9]>    
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>    
<![endif]-->   

Step 2: Fluid image:

img { max-width: 100%;}

Instead of just rendering at its native width and overflowing its containing box, the image would render at its native dimensions as long as its width didn’t exceed the width of its container.
Step 3: Custom Layout Structure
Define all of the main structural elements, such as #wrapper, #content, #sidebar, #nav, along with colors, backgrounds and typography. Default flexible widths and floats could also be defined.

Step 4: Media Queries

@media screen and (max-width: 320px) {...}
@media screen and (min-width: 480px) {...}
@media screen and (min-width: 960px) {...}

Example responsive web page (index.html):

<!doctype html>  
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">  
  <title>A responsive template</title>
  <link rel="stylesheet" href="style.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
</head>
<body class="cf">
  <header class="span12">
    <div class="inner cf">
      <h1 class="alt span8">responsify</h1>
      <nav class="span4 col">
        <ul class="cf">
          <li><a class="alt" href="#">nav item</a></li>
          <li><a class="alt" href="#">nav item</a></li>
          <li><a class="alt" href="#">nav item</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="container" class="cf">  
  	<article class="span8">
      <section>
        <h1>section h1</h1>
      </section>
      <section>
        <h2>section h2</h2>
      </section>
      <section>
        <h2>section h2</h2>
      </section>
	  </article>
    <aside class="span4 col">
      <h2>aside h2</h2>
      <h2>aside h2</h2>
    </aside>
  </div> <!--! end of #container -->
  <footer>   
  </footer>
</body>
</html>

Example css design (style.css):

/* Columns: 12, Gutter Width: 1.5, Breakpoints: 480 */ 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
} 
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}

nav ul, nav li { margin: 0; } 
nav ul, ul { list-style:none; }

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12{
    float:left;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.col{
  margin-left: 1.5%;
}

.col:first-child {
  margin-left:0;
}

.span1{
  width: 6.95833333333%;
  
}
.span2{
  width: 15.4166666667%;
  
}
.span3{
  width: 23.875%;
  
}
.span4{
  width: 32.3333333333%;
  
}
.span5{
  width: 40.7916666667%;
  
}
.span6{
  width: 49.25%;
  
}
.span7{
  width: 57.7083333333%;
  
}
.span8{
  width: 66.1666666667%;
  
}
.span9{
  width: 74.625%;
  
}
.span10{
  width: 83.0833333333%;
  
}
.span11{
  width: 91.5416666667%;
  
}
.span12{
  width: 100%;
  margin-left: 0;
}

body{ 
  font-size: 87.5%;
  color: #252e35; 
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
  line-height: 1.5em;
  background: #f6f6f6;  
}

h1{
    font-size: 1.714285714em; /* 24 / 14 */
    line-height: 1.5em; /* 21 / 14 */
}

h2{
  font-size: 1.5em; /* 21 / 14 */
  line-height: 1.5em; /* 21 / 14 */
}

p{
    font-size: 1em; /* 14 / 14 */
    line-height: 1.5em; /* 21 / 14 */
    margin-bottom: 1.5em; /* 21 / 14 */
}

#container, .inner{
  margin: 0 auto;
}

header{
  background: #262F37;
}

header h1{
  margin: 7px 0 0 0;
}

#container{
  clear: both;
  padding-top: 20px;
}

.alt{
  color: #fff;
  color: rgba(255,255,255, 0.9);
  letter-spacing: 0.05em;
}

/* NAVIGATION */

nav{
  margin: 7px 0 7px 0;
}

nav ul{
  text-align: right;
  overflow: auto;
  width: 100%;
}

nav ul li{
  margin: 0 0 0 0;
  text-align: center;
  overflow: auto;
  float: left;
  width: 33%;
}

nav a{
  text-decoration: none;
  margin: 0;
  display: block;
  padding: 7px 0 7px 5%;
  margin: 0 0 0 4%;
  background-color: rgba(255,255,255,0.1);
}


/* MEDIA QUERIES */

/* Responsify Defaults */

@media screen and (max-width: 768px){
  nav .span4{
    width: 100%;
  }

  .span8, article{
    width: 100%;
  }

  .span4, aside{
    width: 100%;
    margin-left: 0;
  }

  #container, .inner{
    width: 90%;
    padding: 0 5% 0 5%;
  }
}

@media screen and (max-width: 480px){
  nav ul li{
    width: 100%;
    margin: 0 0 5px 0;
  }

  nav a{
    margin: 0;
    padding: 14px 0 14px 0;
  }
}

/* Custom Breakpoints */
@media screen and (max-width: 480px) {
 /* Add your styles for devices with a maximum width of 480 */
}

// Micro Clearfix 

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

This entry was posted in open-source. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s