Easy Ways To Create And Build A Responsive Website Design

Share:

Easy Ways To Create And Build A Responsive Website Design. A good website is a website with a comfortable and responsive design that can be easily accessed by Internet users from anywhere, via computer or smartphone. The importance of responsive website design has actually been discussed in several previous posts, for it was in this post. We will explore in full, how to create and build a responsive website design.
Easy Ways To Create And Build A Responsive Website Design
Actually there are two ways how to create a website we have a responsive design. The first way is to create two versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to do access and reading.

Easy Ways To Create And Build A Responsive Website Design

In this tutorial, we will discuss the second way, which is to create a basic website design that is responsive to the screen browser.
First, of course is to create a html document. Here’s the basic html for the website layout:

<div id="responsive-page">
<div id="responsive-header">
<h1>RESPONSIVE WEBSITE DESIGN</h1>
</div>
<div id="responsive-navigation">
<h2>HOME ABOUT CONTACT</h2>
</div>
<div id="responsive-content">
<p> Easy Ways To Create And Build A Responsive Website Design </p>
<p> Actually there are two ways how to create a website we have a responsive design. The first way is to create 2 versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to access and reading.</p>
</div>
<div id="responsive-sidebar">
<p>Sidebar</p>
</div>
<div id="responsive-footer">
<p>Footer</p>
</div>
</div>

Second, setting the size of the layout of the website. As a default layout, we will use desktop size is 1300px width, to adjust the length of the layout is.
The following css code for the overall look of the default website:

#responsive-page {	
width:1300px;
margin:auto;
}
#responsive-header {
width:1300px;	
background:#90C;
border:solid #555;
}
#responsive-navigation {
width:1300px;	
background:#36F;
border:solid #555;
margin-top:5px;
}
#responsive-content{
width:775px;
float:left;
background:#900;
border:solid #555;
margin-top:5px;
}
#responsive-sidebar{
margin-left:5px;
width:500px;
background:#0F6;
border:solid #555;
float:left;
margin-top:5px;
}
#responsive-footer{
width:1300px;
border:solid #555;
float:left;
background:#F60;
margin-top:5px;
}

Next is create a css code for mobile screens. For mobile and gadgets with a screen width of 1024px and less, as follows :

/* for 1024px or less */
@media screen and (max-width: 1024px){
#responsive-page {	
width:100%;
float:none;
}
#responsive-header {
width:100%;	
background:#90C;
border:solid #555;
}
#responsive-navigation {
width:100%;	
font-size:0.7em;
background:#30F;
border:solid #555;
}
#responsive-content{
width:63.8%;
float:left;
background:#900;
border:solid #555;
}
#responsive-sidebar{
margin-left:0.5%;
width:34%;
background:#0F6;
border:solid #555;
float:left;
}
#responsive-footer{
width:100%;
border:solid #555;
float:left;
}
}

Technique is to change the width sizes from px initially to percentage so that the width will change of 1300px to 100%.
Screen size of mobile browsers are extremely diverse, and there are even width 320px size. If we just using a 1024px size, the size of content and sidebar be very small. For that, content and sidebar will be made down and not next door. How to do ? add the css script below. *This time, the screen setting is with a width of 700px or less.

/* for 700px or less */
@media screen and (max-width: 700px) {

	#responsive-content {
		width: auto;
		float: none;
	}
	#responsive-sidebar {
		width: auto;
		float: none;
	}

}

If we had set the width of the layout of our website then do not forget to set the font size. Don’t forget when the font size becomes smaller when viewed through mobile.
1 em = 16 px -> for the font size in paragraph (p)
1.5 em = 24 px -> for h1
1.25 em = 20 px -> for h2
etc
So the css code for the letters used in the responsive website design are:

h1 {
font-size:2em;
}
h2 {
font-size:1.5em;
}
p {
font-size:1em;
}

Overall, the following is the html and css code to create a responsive website design. Please copy and paste into notepad or adobe dreamweaver.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Easy Ways To Create And Build A Responsive Website Design </title>
<style>
#responsive-page {	
width:1300px;
margin:auto;
}
#responsive-header {
width:1300px;	
background:#90C;
border:solid #555;
}
#responsive-navigation {
width:1300px;	
background:#36F;
border:solid #555;
margin-top:5px;
}
#responsive-content{
width:775px;
float:left;
background:#900;
border:solid #555;
margin-top:5px;
}
#responsive-sidebar{
margin-left:5px;
width:500px;
background:#0F6;
border:solid #555;
float:left;
margin-top:5px;
}
#responsive-footer{
width:1300px;
border:solid #555;
float:left;
background:#F60;
margin-top:5px;
}
h1 a{
font-size:1.5em;
text-decoration:none;
}
h2 {
font-size:1.25em;
text-decoration:none;
}
p {
font-size:1em;
}
/* for 1024px or less */
@media screen and (max-width: 1024px){
#responsive-page {	
width:100%;
float:none;
}
#responsive-header {
width:100%;	
background:#90C;
border:solid #555;
}
#responsive-navigation {
width:100%;	
font-size:0.7em;
background:#30F;
border:solid #555;
}
#responsive-content{
width:63.8%;
float:left;
background:#900;
border:solid #555;
}
#responsive-sidebar{
margin-left:0.5%;
width:34%;
background:#0F6;
border:solid #555;
float:left;
}
#responsive-footer{
width:100%;
border:solid #555;
float:left;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {

	#responsive-content {
		width: auto;
		float: none;
	}
	#responsive-sidebar {
		width: auto;
		float: none;
	}

}
</style>
</head>
<body>
<div id="responsive-page">
<div id="responsive-header">
<h1><a href="http://tutorial.world.edu/website-design/easy-ways-create-build-responsive-website-design/"> Easy Ways To Create And Build A Responsive Website Design </a></h1>
</div>
<div id="responsive-navigation">
<h2>HOME  ABOUT  CONTACT</h2>
</div>
<div id="responsive-content">
<p> Easy Ways To Create And Build A Responsive Website Design </p>
<p> Actually there are two ways how to create a website we have a responsive design. The first way is to create 2 versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to access and reading.</p>
</div>
<div id="responsive-sidebar">
<p>Sidebar</p>
</div>
<div id="responsive-footer">
<p>Footer</p>
</div>
</div>
</body>
</html>

Of the basic layout, you can build various forms of display are responsive website design.
For the record, has a responsive website design like this has a drawback. If your default website has a high capacity and has a lot sidebar, the users who come from mobile applications will remain tough to access your website. When the website size is very big, you should use the first way that I mentioned in the first paragraph above. At other times we will discuss it later.
I hope this tutorial can be useful for you
Thanks for reading Easy Ways To Create And Build A Responsive Website Design

[Tutorial.World.Edu]

2 thoughts on “Easy Ways To Create And Build A Responsive Website Design

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>