Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

make your website responsive

HOW TO MAKE RESPONSIVE WEBSITES?

Introduction

Now a day’s most part of the world use Smartphone’s to access information’s in the internet but when the user use websites in Smartphone the look in your smart phone is not that much good enough so to correct this we need responsive web design, so what is Responsive Web Design?

Summary

Easily responsive web design means to make the website respond based on the size of your device’s screen size.   

Anyone who is interested in this course can take this course only required is Basic knowledge in HTML5 and CSS.

How to Make a Website Responsive?

Frameworks you can use: Let’s consider foundation because it is simple has good documentation also you can use

ü 1140 Grid – quite similar to Foundation and other frameworks, definitely worth the look.

ü Adapt.js

We can start from scratch.

Our goal is to create a website 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.

Step 1: Understanding the Foundation


Okay, it is already given that we will use the structure above, but how will we translate that to

HTML ? Easy!

First, you need to understand a few things about Foundation and how lay outing works. It uses 12 columns to define the width of each “section”, which is derived from foundation.css’ width of 1000px.

So, if we write:

    <div class="row">
        <div class="twelve columns"></div>
    </div>
    The above code would mean that in this certain row, you will occupy twelve columns with the width of 1000px. While on the code below:
    <div class="row">
        <div class="twelve columns">
            <div class="six columns"></div>
            <div class="six columns"></div>
        </div>
    </div>

We placed two “six columns” inside of “twelve columns”, this would mean that “six columns” will

Occupy 50% of the width of “twelve columns”.

The same is true for other number of columns:

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

For “seven columns” we placed another row inside which occupies “twelve columns”. This means that the “twelve columns” will take the maximum width of “seven columns” and divide it into “twelve columns”. It’s a nest of rows and columns, which is important for our goal layout.

Now that rows and columns, and nested columns, have been explained, let’s move on to the main show.

Step 2: Laying Out the Foundation


Using your favorite text editor, create a file named index.html then add the following at the very beginning of the file:

<! -- Editor's note: if you're wondering what are these items below,you should follow the link below  -->
<! --paulirish.com/2008/conditional stylesheets –vs –css-hacks – answer –neither /  -->
    <!--[if lt IE 7]> <html class="no –js  lt –ie9 lt –ie8 lt –ie7 “  lang=”en”><![endif]-->
    <!--[if IE 7]> <html class="no-js  lt–ie9 lt –ie8  “ lang=”en”><![endif]-->
    <!--[if IE 8]> <html class="no-js lt–ie9 “  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="stylesheet”  href=”stylesheet/ie.css”>
    <![endif]-->
    <script type="text/javascript “ src=”javascript/modernizer. foundation .js”></script>
    <!-- IE Fix for HTML5 Tags -->
    <!--[if lt IE 9]>
    <script src=http://html5shiv.google.com /svn /trunk /html15.js></script>
    <![endif]-->


The above code is where we deal with the evil of Internet Explorer. It is also where we call on to
different style-sheets which are necessary to make the whole thing responsive and run on mobile devices, it comes with Foundation.

Then type the following code:

<div class="row">
        <div class="twelve columns">
            <h2>Header Twelve Columns</h2>
        </div>
    </div>
    <div class="row">
        <div class="twelve columns">
            <div class="row">
                <div class="seven columns">
                    <h3>Body Seven Columns</h3>
                </div>
                <div class="five columns">
                    <h3>Sidebar Five Columns</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="twelve columns">
            <h2>Footer twelve Columns</h2>
        </div>
    </div>

 

Step 3: Adding Content to Web Design

This step is needed to actually see how the webpage will look like in its full glory. Copy some Lorem Ipsum and paste it on your “body” div, then insert images using tag and then you’re on your way to becoming a superstar with this! Choose one on Subtle Patterns and see for yourself which works best.

Conclusion

download different source codes and study them and start creating your own responsive webpage from scratch ,also there are lot’s of  other tools you can aside from Foundation, but the idea and the goal is basically the same.

 

Author:  Zelalem Tarekegn