Be The Superstar Responsive Website Builder

Posted by : Magnus Thursday 11 October 2012

Allow me to begin by congratulating you on having found your way till here. No doubts, you are on an expedition to a guide that will enable you to create a responsive website. It has become the buzz word – ‘responsive websites’. The best and the most talked about websites are all going responsive, that is, if they are already not! What is a responsive website all about? Simple, this is a website that adjusts its layout as you change the size of your browser.

Pick any size, from the full blown maximized window on your PC to the small yet swanky smartphone screen size, your responsive website will, almost magically, adjust its layout to yield a fulfilling viewing experience. Sounds interesting? How about having your own responsive website? If the thought brings a glimmer in your eyes, read on.

Before we take you on this quick and result oriented ride to a responsive website, let us quickly inform you that you will not need loads of time to have your dessert ready. All you need is a basic know-how of HTML and CSS, and of course, the motivation to have a stylish responsive website up and running. We won’t delve too far into technicalities, and let this tutorial be a fun filled adventure for beginners, and a refreshing revision for the pros. Let’s proceed. A responsive webpage – here we come!

Step 1 – Decide the Framework.

It just does not work without a framework, simple as that. Thankfully, you have a problem of plenty in picking up the right framework to build your website on. Here is a quick glimpse of the best in the business.

Foundation: With an absolutely overwhelming sense of simplicity (as ironic as it sounds), Foundation is an automatic choice for the beginning developer. Of course, the masters of designing websites have loads to play with as well. Add a tank full of style and substance to a building platform, and you have Foundation. We will be taking this tutorial forward with Foundation. However, for the adventurous and rebellious YOU, here are some more options.

Goleden Grid System: This folding grid system divides your screen into 18 even columns, using two as the extreme margins and 16 as modifiable building blocks. These middle columns can be combined to meet different size requirements.

Skeleton: A very compact collection of CSS & JS files, this platform has a light and flexible 960 grid as base. Websites made on Skeleton can easily scale down and adjust to downsized browsers and tablet screen sizes.

Less Framework 4: Here’s another simple yet powerful platform to make some stunning responsive websites. You have 4 layouts and 3 typography presets with this CSS grid system.

Now if you have decided your framework then now our goal is to create a webpage which has the basic areas of a website: header, body, sidebar, and footer. Of course everything will be responsive, from images down to text and elements placement.

So, are you ready to create a stunner? Let us get a bit technical, and set the dice rolling. When we finish, we intend to have a pretty neat responsive webpage with a header, footer and sidebar, apart from the body. Here is a crude representation of what we are about to make.

Step 2: Finding the way through Foundation – Enter Coding

HTML is not tough, and you’ve got to pick the meaning to be able to crack the codes. That is what we shall do in this tutorial. Here’s an example block.

Source code

<div class="row">
    <div class="twelve columns">
    </div>
</div>

Before we discuss this, let me tell you that Foundation platform works on 12 columns to define a section width which is derived from foundation.css’ width, that’s 1000px. It is important to understand how the layout works in Foundation. Now, back to the code.

The above code will imply that the row will have 12 columns, the width being 1000px. Now, consider this.

Source code

<div>
 
     <div>
 
         <div>
 
         </div>
 
         <div>
 
         </div>
 
     </div>
 
</div>

Here, we have slightly modified the layout, with “six columns” taking half the space of the master 12 columns, since two “six columns” have been declared under one “12 column.” Now that there is a fair degree of comfort with coding with Foundation, let us take a bigger step.

Source code

<div>
 
     <div>
 
         <div>
 
         <div>
 
              <div>
 
                   <div>
 
                   </div>
 
              </div>
 
         </div>
 
         <div>
 
         </div>
 
     </div>
 
</div>

We have nested columns in this code. With “eight columns”, we are using another row that spreads over “twelve columns”. This is as good as “twelve columns” taking the maximum width of “eight columns” and dividing it in “12 columns.”

So far so good? Let us get down to some real business.

Step 3: Stepping up the gear in Foundation: The Laying Out

We are on the expressway now, so put that foot on the gas. You need to create the index.html file you opened initially. Use any text editor to create this file, and use the given code at the beginning.

Source code

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
 
<!--[if IE 7]>    <html lang="en"> <![endif]-->
 
<!--[if IE 8]>    <html lang="en"> <![endif]-->
 
<!--[if gt IE 8]><!-->  <!--<![endif]-->
 
  <!-- Set the viewport width to device width for mobile -->
 
  Welcome to Foundation
 
  <!-- Included CSS Files -->
 
  <!--[if lt IE 9]>
 
  <link rel="stylesheet" href="stylesheets/ie.css">
 
  <![endif]--><script type="text/javascript" src="javascripts/modernizr.foundation.js"></script>
 
  <!-- IE Fix for HTML5 Tags -->
 
  <!--[if lt IE 9]>
 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
  <![endif]-->

The above code fragment has solved two purposes:-

1. It has dealt with Internet Explorer. Let us not delve further into this issue and let the object of creating a responsive website remain on fast track.

2. We’ve called upon all stylesheets. These sheets are required for the website being responsive and running well on mobile gadgets.

Now, use this code.

Source code

<div>
 
      <div>
 
           <h2>Header Twelve Columns</h2>
 
      </div>
 
</div>
 
<div>
 
      <div>
 
           <div>
 
              <div>
 
                  <h3>Body Seven Columns</h3>
 
             </div>
 
               <div>
 
                  <h3>Sidebar Five Columns</h3>
 
              </div>
 
           </div>
 
      </div>
 
</div>
 
<div>
 
      <div>
 
          <h2>Footer Twelve Columns</h2>
 
      </div>
 
</div>

There is no styling as yet, and if the minimalist inside you is satisfied, you can already smell the fragrance of your first responsive website. Foundation is a classy development platform, giving you extensive documentation to refer to at your convenience and rope in amazing bars and blocks like forms, navigations, grids, CSS, buttons, etc. You know what! You will have a stunning website with the addition of some images and paragraphed texts to the structure.

Step 4: The last flower in the bouquet – Add content

Grab lorel ipsum and paste in the ‘body’ div block. You can add some stunning pictures to add more life and vibrancy to the webpage by using the <img> tag. It is done now. Apart from experimenting with pictures, you can change the background patterns.

So what are you waiting for? Start creating your own responsive website and be awesome!