Create a website that's difficult-responsive hard easily, it would be easier if you know what the main thing to note when a website wants to make responsive.
Logically is simple, website, who had had a few columns will typically widen when opened in smaller devices like the tablet or smartphone. Well for that needs to be regulated so that multiple columns is proportional when it opened in a smaller device, for example by changing the column was two columns into one column only, extends down.
Responsive design is a website design that makes the technique can perform properly if opened in different browsers with different screen sizes.
The basic steps for creating web responsive there are at least three, here are his pace.
1. Define the Meta tags for the Design of Responsive
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Browser internet explorer version 8 and lower do not usually support the tag above, you could use the help of the media-queries. js or respons.js in IE with writing the tag as follows.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2. Specify the HTML Structure
While the content can be specified such as your background and sidebar 660px 300px, so the overall width is 960px.
3. Create Media Queries in CSS For Ordered Browser.
This is the last step that will make your website be responsive, CSS3 capabilities here are already very advanced, we seem able to use conditions (IF) such programming languages like PHP and JS. But here the CSS3 gives only the conditions of how browsers should do the rendering of the page for the viewport that has set its width with CSS3 as below.
The following CSS will send the browser, when the screen width 960px-sized or less than that, then run the script, set the width of the corresponding script. Here the width of the wrapper is set to be 96% of your background layarya. While the content is arranged so that the width is 66% of the width of the screen, and the sidebar width to 30%.
/* If the screen size is 980px or less */
@media screen and (max-width:980px) {
#wrapper{
width: 96%;
}
#maincontent{
width: 66%;
}
#sidebar{
width: 30%;
}
@media screen and (max-width:980px) {
#wrapper{
width: 96%;
}
#maincontent{
width: 66%;
}
#sidebar{
width: 30%;
}
But if screen size 680px only or less, then run another script as below, where the width/width is set to be auto, or automatically follow the width of the screen, as well as the sidebar, made auto also so that its width follow the width of the screen, while his float is set to none so that the div element arrayed down.
/* If the screen size 680px or less from it */
@media screen and (max-width: 680px) {
#maincontent {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
The next set if the screen size is 480px or less from it (usually this size for mobile phones/smartphones), then we can hide the sidebar and adjust so that the height of the header be auto. All conditions you can specify your own based on your needs.
/* If the screen size is 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
#sidebar {
display: none;
}
}
That's some important stages to create a website be responsive, so noteworthy is part of meta tags and the media query in the css so that the website can perform proportional. Hopefully this brief writing can help you understand the basic steps of website creation responsive.
