Like us on Facebook

Minggu, 23 Agustus 2015

Hadi Yanuar

The Basic Of Creating Responsive Web Design


 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.



Some examples of web responsive is The Boston Globe, The Next Web and Legal. If you want to check if a web that's responsive or not yet able to use test tools responsive web.

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


Mobile browser will usually set the scale of an html page suitable width of the viewport, which eventually website can appear on a mobile screen. You can use the viewport meta tag to reset reset. Tag the viewport itself is used to tell the browser to use the width of the viewport width as a reference device and disable the initial scale. You can include the following meta tag in the <head>.

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


2. Specify the HTML Structure


The second step, namely to determine the structure of HTML websites, usually consists of a header, content, sidebar and footer. For the header usually made his full width and height are adjusted to your needs.

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%;
    }

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.

Hadi Yanuar

About Hadi Yanuar -

Author Description here.. Nulla sagittis convallis. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.

Subscribe to this Blog via Email :