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