3 Basic Steps to Creating Responsive Web Design

Basic Steps to Create Responsive Web Design — Creating a responsive website is difficult and easy, it will be easier if you know what are the main things to pay attention to when you want to make a responsive website.

The login is simple, a website that used to have several columns will usually expand when opened on a smaller device such as a tablet or smartphone. So for that, it is necessary to set some of these columns to be more proportional when opened on a smaller device, for example by changing the column that was two columns into one column, extending downwards.

Responsive design is a design technique that makes websites look good when opened in various browsers with different screen sizes.

screen device size
Photo via line25.com

Some examples of responsive web are The Boston Globe, The Next Web and Okezone. If you want to check whether a website is responsive or not, you can use responsive web test tools.

There are at least three basic steps to create a responsive web, here are the steps.

  1. Define Meta Tags For Responsive Design
    Mobile browsers will usually scale the html page according to the viewport width, which ultimately makes the website appear on the mobile screen. You can use the viewport meta tag to reset this. The viewport tag itself is used to tell the browser to use the device width as the viewport width reference and disable initial scaling. You can include meta tags like the following in the section.


Internet explorer browser versions 8 and lower usually don’t support the above tag, you can use media-queries.js or respond.js in IE by writing the following tag.

  1. Define HTML Structure
    The second step is to determine the HTML structure of the website, the website usually consists of a header, content, sidebar and footer. Headers are usually made in full width and height according to needs.

While the content can be specified for example 660px width and 300px sidebar, so the overall width is 960px.

web design layout
web design layout (photo: monstertut.com)

  1. Create Media Query in CSS To Command Browser.
    This is the last step that will make your website responsive, CSS3 capabilities here are very sophisticated, we seem to be able to use conditions (IF) like programming languages ​​such as PHP and JS. But here CSS3 only provides conditions for how the browser must render the page for the viewport that has been set in width with CSS3 as below.

The CSS below will tell the browser, when the screen width is 960px or less, then run the script, set the width according to the script. Here the wrapper width is set to only 96% of the screen width. While the content is set so that the width is only 66% of the screen width, and the sidebar width is 30%.

/* If the screen is 980px or less */

@media screen and (max-width:980px) {

wrapper{

width: 96%;
}

maincontent{

width: 66%;
}

sidebar{

width: 30%;
}
}
However, if the screen size is only 680px or less, then run another script as below, where the width is set to auto, or automatically follows the screen width, as well as the sidebar, made auto too so that the width follows the screen width, while the float is set to none so that the div elements are arranged downwards.

/* If the screen size is 680px or less */

@media screen and (max-width:680px){

maincontent{

width: auto;
floats: none;
}

sidebar{

width: auto;
floats: none;
}
}
Then set if the screen size is 480px or less (usually this is the size for cellphones/smartphones), then we can hide the sidebar and set the header height to be auto. You can set all conditions yourself based on your needs.

/* If the screen size is 480px or less */

@media screen and (max-width: 480px) {

headers{

height: auto;
}

sidebar{

display: none;
}

}
Those are some important steps to make a website responsive, so you need to pay attention to the meta tags and media queries in CSS so that the website can appear proportional, this is of course just a theory, for an example of how to make it you can read the previous article entitled Tutorial How to Make a Design Responsive Web.

Hopefully this short article can help you understand the basic steps of making a responsive website.