codeofaninja
website

Coding A Responsive Website Design

Photo of Mike Dalisay
Modified Tuesday, January 29, 2013
by - @ninjazhai
In today's tutorial, I'm going to show you a systematic and very simple way to create a responsive website with CSS3 media queries and HTML5. Responsive web design has been around for few years now and is widely accepted as a new standard when building a modern website.

Responsive Web Design Code

For the "live demo", please try to resize your browser to see the page's responsiveness.

I want to give you a brief definition of what a responsive web design is, if you already know what it is, you may skip this part and jump to the "Let's code" section below. Well, for me, responsive web design is a way to show your web site's content in an easy-to-understand manner regardless of what device views it.

For example, a visitor of your website must feel comfortable when viewing the same website for any type of devices (with different screen sizes) he has. Example of those devices include:
  • Android phones
  • iPhones
  • 7" tablets
  • 10" tablets
  • iPads
  • Desktop computers
  • and many more devices that can view a web page.
Other points to consider...
  • Your website should not have a horizontal scrollbar.
  • Users must not use the zoom tool to view your site's contents.
By the way, if you want to test the live demo on different devices easily, you can use the tools described on this link: Responsive Web Design Testing Tools.

Let's code.

Step 1: It is important to build your website for the smallest device possible first. Build the website for smart phones. You can view a live demo of our step 1 here.

<!DOCTYPE HTML>
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <meta name="viewport" content="width=device-width">
         
          <title>Your Website</title>
         
          <style>
              
          /* misc start */
          *{
               margin:0px;
               padding:0px
          }
         
          body{
               font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
          }
         
          .media1140px{
               background-color:#CE9429;
          }
         
          .media768px{
               background-color:#EDD49A;
          }
         
          .media480px{
               background-color:#EFEF34;
          }
         
          .media300px{
               background-color:#82EAFF;
          }
         
          .media1140px, .media768px, .media480px, .media300px{
               padding:15px;
          }
         
          p{
               margin:0 0 20px 0;
          }
         
          .clearb{
               clear:both;
          }
          /* misc end */
         
         
         
         
         
         
          /* header start */
          #mainHeader{
               background-color:#82EAFF;
               padding:0.5em;
               overflow:auto;
          }
          
          /* to make our logo resize automatically */
          #responsiveLogo{
               width:100%;
          }
         
          #responsiveLogo img{
               max-height: 100%;
               max-width: 100%;
          }
          /* header end */
         
         
         
         
         
          /* navigation start */
          nav{
               float:left;
               width:100%;
          }
         
          nav ul{
               list-style-type:none;
               padding:0;
          }

          nav ul li{
         
          }

          nav ul li a{
               background-color:green;
               border:thin solid #fff;
               color:#fff;
               display:block;
               height:3em;
               line-height:3em;
               text-align:center;
               text-decoration:none;
               width:100%;
          }
         
          nav ul li a:hover{
               background-color:yellow;
               color:#000;
          }
          /* navigation end */
         
         
         
         
         
          /* middle section start */
          #mainSection{
               background-color: #D9F8F2;
               float: left;
               width: 96%;
          }
         
          #sideBox1{
               background-color: #C9A449;
               width: 96%;
          }
         
          #mainSection, #sideBox1{
               overflow: auto;
               padding:2%;
          }
          /* middle section end */
         
         
         
          /* footer start */
          footer{
               background-color:orange;
               height:50px;
               line-height:50px;
               text-align:center;
               width:100%;
          }
          /* footer end */
              
          </style>
         
     </head>
<body>

     <header id='mainHeader'>
    
          <div id='responsiveLogo'>
               <img src='images/logo4.png' />
          </div>
          <nav>
               <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#news">News</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
               </ul>
          </nav>
     </header>
    
     <section id='mainSection'>

          <article>
               <header>
                    <h2>About The Code Of A Ninja</h2>
                    <p>Posted on <time datetime="2003-01-01T16:31:24+02:00">January 1st, 2013</time> by <a href="#">Mike</a> - <a href="#comments">173 comments</a></p>
               </header>
               <p>
                    <div class='media1140px'>@media 1140px</div>
                    <div class='media768px'>@media 768px</div>
                    <div class='media480px'>@media 480px</div>
                    <div class='media300px'>@media 300px</div>
               </p>
               <p>
                    My name is Mike Dalisay, a 22 year old Software Developer (<a href="http://en.wikipedia.org/wiki/Web_developer">Web</a> and
                    <a href="http://developer.android.com/index.html">Android</a>) from The Philippines.
                    My posts here are mainly notes to self and for <i>anyone else</i> that may find them useful.
               </p>
               <p>
                    This blog contains programming tutorials, codes, demos, scripts, how-to's, tips, tricks, code downloads and other fun stuff
                    related to web and android apps <a href="http://en.wikipedia.org/wiki/Software_development">development</a>.
               </p>
               <p>
                    Most of my time is spent with PHP, MySQL, AJAX, HTML, CSS, jQuery, JavaScript, XML, Web Design, Android, JAVA and some
                    other Open source software projects related to Web and Android apps development.
               </p>
               <p>
                    You can leave a comment, <a href="http://twitter.com/ninjazhai">follow</a> or <a href="https://www.facebook.com/pages/the-code-of-a-ninja/107786425949934">subscribe</a>
                    to this blog. Take care. :)
               </p>
          </article>

     </section>

     <aside id='sideBox1'>
          <h2>The Blogger</h2>
          <p>This is your side bar. You can add your information or links here.</p>
     </aside>

     <div class='clearb'></div>
    
     <footer>
          <p>Copyright 2013 - Game Note</p>
     </footer>

</body>
</html>

After doing the code above, our webpage is not yet responsive. You won't see the magic even if you resize your browser. By the way, you can also include the CSS code as external file.

Step 2: Now let's create the website layout for a type of device next to a smart phone, maybe we can consider a 7" tablets as one. You can view a live demo of your step 2 here.

We'll just add the following CSS:

/* 
-can be for 7 inch tablets
-This CSS will apply for devices with the minimum width of 480 pixels
 */
@media only screen and (min-width: 480px) {
     #mainHeader {
          background-color:#EFEF34;
     }
    
     nav ul li{
          float:left;
          width:25%;
     }
}

Now if you'll resize your browser, you can see that your website is already responsive in two ways.

Step 3: Now we will create the website layout for another type of screen next to 7" tablets, we can consider the iPad or 10" tablets in portrait mode. Our step 3 live demo is here.

Please add the following CSS:

/*
-10 inch tablets
-This CSS will apply for devices with the minimum width of 768 pixels
*/
@media only screen and (min-width: 768px) {
     #mainHeader {
          background-color:#EDD49A;
     }
    
     #mainSection{
          float: left;
          width: 61%;
     }
    
     #sideBox1{
          float: right;
          width: 30%;
     }
    
}

Now our website is responsive in three ways. Try to re-size your browser again.

Step 4: Now we will create the website for desktop computers, laptops or 10" tablets in landscape mode.
/*
-Desktop computers
-This CSS will apply for devices with the minimum width of 1140 pixels
*/
@media only screen and (min-width: 1140px) {
     #mainHeader {
          background-color:#CE9429;
     }
    
     #responsiveLogo{
          float:left;
          width:30%;
     }
    
     nav{
          float:left;
          width:70%;
     }
    
     nav ul{
          margin:1.5em 0 0 0;
     }
}

Complete web page code:

<!DOCTYPE HTML>
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <meta name="viewport" content="width=device-width">
         
          <title>Your Website</title>
         
          <style>
              
          /* misc start */
          *{
               margin:0px;
               padding:0px
          }
         
          body{
               font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
          }
         
          .media1140px{
               background-color:#CE9429;
          }
         
          .media768px{
               background-color:#EDD49A;
          }
         
          .media480px{
               background-color:#EFEF34;
          }
         
          .media300px{
               background-color:#82EAFF;
          }
         
          .media1140px, .media768px, .media480px, .media300px{
               padding:15px;
          }
         
          p{
               margin:0 0 20px 0;
          }
         
          .clearb{
               clear:both;
          }
          /* misc end */
         
         
         
         
         
         
          /* header start */
          #mainHeader{
               background-color:#82EAFF;
               padding:0.5em;
               overflow:auto;
          }
         
          #responsiveLogo{
               width:100%;
          }
         
          #responsiveLogo img{
               max-height: 100%;
               max-width: 100%;
          }
          /* header end */
         
         
         
         
         
          /* navigation start */
          nav{
               float:left;
               width:100%;
          }
         
          nav ul{
               list-style-type:none;
               padding:0;
          }

          nav ul li{
         
          }

          nav ul li a{
               background-color:green;
               border:thin solid #fff;
               color:#fff;
               display:block;
               height:3em;
               line-height:3em;
               text-align:center;
               text-decoration:none;
               width:100%;
          }
         
          nav ul li a:hover{
               background-color:yellow;
               color:#000;
          }
          /* navigation end */
         
         
         
         
         
          /* middle section start */
          #mainSection{
               background-color: #D9F8F2;
               float: left;
               width: 96%;
          }
         
          #sideBox1{
               background-color: #C9A449;
               width: 96%;
          }
         
          #mainSection, #sideBox1{
               overflow: auto;
               padding:2%;
          }
          /* middle section end */
         
         
         
          /* footer start */
          footer{
               background-color:orange;
               height:50px;
               line-height:50px;
               text-align:center;
               width:100%;
          }
          /* footer end */
         
         
         
         
         
         
         
          /* @media start */
         
          /* we don't need to specify for smartphones, that's our default layout */
         
          /*
          -7 inch tablets
          -This CSS will apply for devices with the minimum width of 480 pixels
          */
          @media only screen and (min-width: 480px) {
               #mainHeader {
                    background-color:#EFEF34;
               }
              
               nav ul li{
                    float:left;
                    width:25%;
               }
          }
         
          /*
          -10 inch tablets
          -This CSS will apply for devices with the minimum width of 768 pixels
          */
          @media only screen and (min-width: 768px) {
               #mainHeader {
                    background-color:#EDD49A;
               }
              
               #mainSection{
                    float: left;
                    width: 61%;
               }
              
               #sideBox1{
                    float: right;
                    width: 30%;
               }
              
              
          }
         
          /*
          -Desktop computers
          -This CSS will apply for devices with the minimum width of 1140 pixels
          */
          @media only screen and (min-width: 1140px) {
               #mainHeader {
                    background-color:#CE9429;
               }
              
               #responsiveLogo{
                    float:left;
                    width:30%;
               }
              
               nav{
                    float:left;
                    width:70%;
               }
              
               nav ul{
                    margin:1.5em 0 0 0;
               }
          }
         
          /* @media end */
              
          </style>
         
     </head>
<body>

     <header id='mainHeader'>
    
          <div id='responsiveLogo'>
               <img src='images/logo4.png' />
          </div>
          <nav>
               <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#news">News</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
               </ul>
          </nav>
     </header>
    
     <section id='mainSection'>

          <article>
               <header>
                    <h2>About The Code Of A Ninja</h2>
                    <p>Posted on <time datetime="2003-01-01T16:31:24+02:00">January 1st, 2013</time> by <a href="#">Mike</a> - <a href="#comments">173 comments</a></p>
               </header>
               <p>
                    <div class='media1140px'>@media 1140px</div>
                    <div class='media768px'>@media 768px</div>
                    <div class='media480px'>@media 480px</div>
                    <div class='media300px'>@media 300px</div>
               </p>
               <p>
                    My name is Mike Dalisay, a 22 year old Software Developer (<a href="http://en.wikipedia.org/wiki/Web_developer">Web</a> and
                    <a href="http://developer.android.com/index.html">Android</a>) from The Philippines.
                    My posts here are mainly notes to self and for <i>anyone else</i> that may find them useful.
               </p>
               <p>
                    This blog contains programming tutorials, codes, demos, scripts, how-to's, tips, tricks, code downloads and other fun stuff
                    related to web and android apps <a href="http://en.wikipedia.org/wiki/Software_development">development</a>.
               </p>
               <p>
                    Most of my time is spent with PHP, MySQL, AJAX, HTML, CSS, jQuery, JavaScript, XML, Web Design, Android, JAVA and some
                    other Open source software projects related to Web and Android apps development.
               </p>
               <p>
                    You can leave a comment, <a href="http://twitter.com/ninjazhai">follow</a> or <a href="https://www.facebook.com/pages/the-code-of-a-ninja/107786425949934">subscribe</a>
                    to this blog. Take care. :)
               </p>
          </article>

     </section>

     <aside id='sideBox1'>
          <h2>The Blogger</h2>
          <p>This is your side bar. You can add your information or links here.</p>
     </aside>

     <div class='clearb'></div>
    
     <footer>
          <p>Copyright 2013 - Game Note</p>
     </footer>

</body>
</html>

Some screenshots of our output:

Page header smartphone screenshot - landscape mode

Footer screenshot from my smartphone in landscape mode.

Header screenshot from my smartphone
in portrait mode.

Body section screenshot from
my Smartphone in  portrait mode.

Footer screenshot from
my smartphone in portrait mode.

Screenshot from my 10.1 Android tablet in portrait mode.


Screenshot from my 10.1 Android tablet in landscape mode.

Credits: Image from Game Note.
For FREE programming tutorials, click the red button below and subscribe! :)
Thanks for the comments!
 
 
Fundamentals
"First do it, then do it right, then do it better."
~ Addy Osmani
"Talk is cheap. Show me the code."
~ Linus Torvalds
Let's Stay Connected!
g+ r
Android app on Google Play
© 2011-2014 The Code Of A Ninja. All rights reserved. Proudly Powered by Google Blogger. Images, logos, marks or names mentioned herein are the property of their respective owners.