AboutContact

Responsive Website: How to design a screen responsive Website

In this tutorial you'll learn how to design a screen responsive website using css. You'll see how to design a structure for a simple responsive website with the header, the main content, the sidebar and the footer.

A responsive website is an html page that can adapt itself in respect of the screen size. In this way the website will be always readable by any device.

How to design a responsive website?

The main key that allows you to design an awesome responsive website templates is the css style that is applied on the html page. With this, you can manage the size and the position for every element that is in the page for a given screen size. If you define the same class more than one time inside the css style, you'll add or overwrite the style for that particular class. So, for example, if you define a class with a black background color and then the same class is defined with a red color, the last definition overwrites the previous one and the red color is the final seen color. With Css you can also define a css class only when a constraint is satisfied.

In this way with this constraint you can, for example, overwrite the css definitions only when the screen has a given size.

responsive website

Html template

Let's create now our simple html template. It's really simple, it's composed by the hader, a double coloumn content and a footer.

<!doctype html>
<html>
<head>

    <meta charset="utf-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>

    <div class="website_size">
    
        <div class="header"><a href="">Site Name</a></div>
        
        <div class="main">
            <div class="left">Content</div>
            <div class="right">sidebar</div>
        </div>    
        
        <div class="footer"></div>  
        
    </div>

</body>
</html>

The website_size div container allows you to define the maximum site width and the site position. Everything else is inside it. We have then the header, main and footer sections. The main div will be a double column part, composed by the left and right elements.

Css definition

Let's define now the default style behaviour.

body
{
	margin:	0px;
	font-family:Cambria;
	background-color:#E7E7E7;
}

.website_size
{
	width:1200px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid #92A0C8;
   	box-shadow: 0px 2px 5px #888888;
	margin-top:10px;

}

.header
{	
	height:40px;
	background-color:#454756;
	line-height:40px;
}


.main
{
	background-color:white;
	display:table;
	width:100%;
	height:500px;
}

.left
{
	display:table-cell;
	padding:10px;
}

.right
{
	width:200px;
	display:table-cell;
	border-left:1px solid #92A0C8;
	padding:10px;
}

.footer
{
	width:100%;
	background-color:black;
	height:30px;	
}

The site will be displayed at the center of the page with a 1200 px size (website_size class).

Let's add now the css constraint. Our goal is to define a 95% page width as soon as the browser is not able to properly display the 1200px site width (95% is just to give some margin on the left and on the right).

@media screen and (max-width: 1250px){ 
	.website_size
	{
		width:95%;
		margin-top:0px;	
	}
}

If the screen is still smaller, like a mobile browser, the double side content will be unreadable. For this reason, as soon as the screen is too small, we have to transform the double side content to one column element. For this reason we have to add another constraint for a smaller screen size. At this step the left and right classes should be with a 100% width and one below the other.

@media (max-width: 500px) {
	.main
	{
		display:block;
	}
	.left
	{
		display:block;
		padding:10px;
		border-bottom:1px solid #92A0C8;
		padding-bottom:50px;
	}
	
	.right
	{
	
		display:block;
		border:0px;
	}
}

 

You can download the example from here.

Leave a comment












AboutContactPrivacy