8779-6540

ico_globe

Language:

bloglatest on us

4 Easy Steps to Code a Responsive Website

Responsive web design has been around for few years now and is widely accepted as a new standard when building a modern website.

In this tutorial article, I’m going to explain a systematic and very simple way to create a responsive website with CSS3 and HTML5. Please note that this article will require basic understanding of HTML and CSS, or actual coding in order to see the result.

What is responsive web design?

Before we jump in to coding, I want to give you a brief definition of what a responsive website (or responsive web design) is. If you are already familiar you could skip this part to section below.

Responsive web design in a nutshell, is about showing your web site’s content in an easy-to-understand manner, regardless of what device the visitor use to view it. For example, a visitor of your website today could be using Smartphone (Android or iPhone), Tablet (with different screen size), or desktop computer.

Better your website is comfortable viewing from any type of devices, better the user’s experience will be. On the contrary, more non-responsive your web design is, stressful it will be for your user. So that’s why responsive is essential in today’s web design.

Just imagine that you are looking at some website from your smartphone. Because of “bad” design, you have to scroll left & right, up & down, zooming in & out, all the time.

Without further waiting, let’s code.

Make it responsive by coding for small device to big device

First thing to do when applying the function of responsive design, you need to  put the code viewport inside the <head> tag.

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

Step 1: It is important to build your website for the smallest device possible first. Build the website for smart phones.

To start out with, the HTML part of the website. Let’s take the sample from our company’s.

<!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>

<link href=“./css/base.css” rel=“stylesheet” type=“text/css”/>

</head>

<body>

<header id=’mainHeader’>

<div id=’responsiveLogo’>

<img src=’lookupgrade_logo.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>

<h2>About Lookupgrade Corporation</h2>

<div class=’media1140px’>@media 1140px</div>

<div class=’media768px’>@media 768px</div>

<div class=’media480px’>@media 480px</div>

<div class=’media300px’>@media 300px</div>

LookUpgrade Corporation We love design and are passionate about the unique application of creativity technical execution that only digital advertising can offer.

<h3>Website Maintenance</h3>

Leave your web trouble with us. We can help you preserve your website investment by putting together a website maintenance plan to keep your website secure, online and up to date.

<h3>WordPress Development</h3>

We offer WordPress solutions that are suitable to all business models. Our WordPress site development services allow you to create a unique user experience for your customers that will keep them engaged and interested while your website is kept running at the highest level.

<h3>Web Design</h3>

We offer professional and high-quality web design services with 100% guaranteed satisfaction. Our extremely professional team will provide you fast and professional service using the latest technologies.

</article>

</section>

<aside id=’sideBox1’>

<h2>The Blogger</h2>

This is your side bar. You can add your information or links here. </aside>

<div class=’clearb’></div>

<footer>Copyright 2015 -Lookupgrade Corporation </footer>

</body>

</html>

 

Next is the style base. CSS of the website.

/* 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%;
text-align: center;
}
/* header end */

/* navigation start */
nav{
float:left;
width:100%;
}

nav ul{
list-style-type:none;
padding:0;
}

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 */

After doing the code above, the webpage is not yet responsive. You won’t see the magic even if you resize your browser.

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.

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.

This will be our last step. Finally, we set the CSS for desktop computers.

/*
-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;
}
}

And that’s it. Your website is good to go. Good Luck Coding!

Lookupgrade is a digital advertising company in Manila, the Philippines. Experienced staffs are ready to support your business, through various web related services. Contact us today to hear more about how we can help you grow.

What is Progressive Enhancement?
4 Useful Websites to Learn About Web Design