7 Flares Twitter 0 Facebook 3 Google+ 2 StumbleUpon 1 Pin It Share 1 7 Flares ×

Responsive web design

Today Internet is not limited to desktop screen or desktop users but it has inclined more towards web browsing through mobile phones, tablets or small notebooks. Earlier browsing the internet was a tremendous task but all thanks to HTML5 and CSS3 media queries for creating responsive web design. Let take you through easy and simple responsive web design tutorial step by step

Define The Viewport Meta Tag

The viewport meta tag is the foremost important step of responsive web designing. This meta tag allows you to modify the browser viewing area. Once you will define the viewport meta tag it will disable the default scale and will instruct the browser to use the device width as the viewport width. The The Viewport Meta Tag can be used inas follows

Create HTML Structure

Second step is to define and create the structure of your website. Creating structure includes setting the page layout by defining the header height, the width of the content container, and of the side bar and the footer in terms of columns. You can add some supporting images and navigation in HTML structure.

Set stylesheet features

Third step is defining stylesheet features. Every responsive website has some basic features the same across all screen sizes, determine style features such as typeface, color, icons to be used, etc.

Start with Media Queries – Smaller Screen

Fourth is CSS3 media queries, the key element of responsive web design. Often designers choose to start with small width about 320-480 pixels. It is a good idea to start with smaller width as it includes very essential content. Maximum width can be 480px or less than this. You can set the header height and font size accordingly.

Start with Media Queries – Relatively Larger Screen

Again moving towards media queries – a magic hand behind responsive web designs, you can set the media query for larger screen with a minimum width of about 480px. A relatively larger screen means tablet screen.
@media only screen and (min-width: 481px) {


Start with Media Queries – Larger Screen

Moving towards media queries here is final media query to be written for desktop screen. For desktop maximum screen should be 769px or 1100px but minimum width should be 769 px.

@media only screen and (min-width: 769px) {


Adding content

Once you are done with the coding part it’s time to add some spice to the website by adding relevant content to it. Post some good, quality and informative content to read. Also make sure your content should contain most relevant key phrases and content related to your niche.

Make Images Flexible

Making images flexible is one of the most important feature. Dont miss to mention the height and width of the given images in media query to adjust according to screensize (small screen, relatively larger screen, larger screen like desktop)

Make Video Flexible

Use the same technique mentioned above of image flexibility for videos flexibility. Dont miss to mention the height and width of the given videos in media query to adjust according to screensize (small screen, relatively larger screen, larger screen like desktop)

Final Demo

By following all the above steps you responsive web design is completed. Now its time for a final demo of your website. View it in different browsers or resizing it. You can also check in different mobile phones like iPad, iPhone, Blackberry and all android devices.

Hope above 10 steps for Responsive Web Design are really helpful for beginners. I am sure you will become an expert by following these simple steps.