Easy Responsive Web Design Tutorial

Responsive web design differs from the standard fixed width that traditional web pages utilize. Traditional web pages viewed on computers are a standard fixed width design that enable the web page to be viewed in it’s entirety and to fit the web page best on large screens. However more and more people access the Internet on mobile devices including smart pads in today’s society.

These mobile devices are not compatible with standard fixed width design pages and there is another format that is used called responsive web design. This allows the webpage to be moved around the person’s mobile device by touch of their hand and fits part of the webpage to the device at a time so there are maximum viewing capabilities.

The first step is to edit the viewport meta tags of the HTML web pages so that the browser is instructed to utilize the mobile device width as the viewport width which will disable the initial scaling option set. In order to set this meta tag, the code:

meta name="viewport" content="width=device-width, initial-scale=1.0"

should be added to the <head> of the HTML page body without the parentheses or quotations.

However there are some older web browsers such as Internet Explorer 8 and earlier that do not have the option to support media query. In this instance, the individual may use media-queries.js or respond.js. Once these queries have been used, media query support will be enabled for use in Internet Explorer. In order to enable media query support, in Internet Explorer 8 or earlier versions, the following code should be added:

The next step is to code the HTML to present an HTML structure that is capable of being viewed on mobile devices properly. A basic HTML structure should contain a header, the content container, a sidebar and the footer section. A basic rule to follow is to set the header to have a fixed height of 180px, the container to 600px wide and the sidebar to 300px wide.

The last and most important steps are to code the media queries correctly so that they display on the mobile devices correctly. Responsive webpage design is capable because of coding CSS3 media queries correctly. Coding media queries correctly will instruct the browser to render the webpage on the specific smartphone or mobile device correctly.

If the viewport width is up to 980px or less then the following code should be added so that that the web page containers act fluid and move the way they’re suppossed to.

@media screen and (max-width: 980px) {
 
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
 
 
}

Up to a 700px or less viewport must have the #content and #sidebar sections set to auto width and to have the float removed so that they will display as full width. The following code for setting the viewport for 700px is:

@media screen and (max-width: 700px) {
 
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
 
}

Lastly, mobile screens that have the capability to display up to 480px or less should have the #header height reset to auto, the #sidebar set to hidden and also a change should be made to the font size. In order to set the viewport to 480px or less, the following code should be entered:

@media screen and (max-width: 480px) {
 
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
 
}

While these media queries are only basic ones that can be set for a few basic screen sizes, there are many different media query that can be written and added to the HTML page. Setting different CSS media queries will allow the HTML pages to be adapted to a variety of various mobile layouts.

Leave a Reply