Responsive Web Design Tutorial Step By Step For Beginners

Responsive web design
0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 0 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.

About author View all posts

Andrew Johnson

Andrew Johnson is founder of BestPSDtoHTML. He loves creative designs, photography, paintings and everything about innovation. As an Internet entrepreneur, he constantly tries to develop new ways to bring content faster and closer to the end users in a more streamlined way. His main focus lies in inspiring all the designers and developers with all new ideas through his blogs.

7 CommentsLeave a comment

  • Great items from you, man. I’ve consider your stuff
    prior to and you are just too great. I actually like what you’ve obtained right
    here, certainly like what you are saying and the way in which you
    assert it. You make it enjoyable and you still care for to keep it sensible.

    I can’t wait to learn much more from you.
    This is really a tremendous website.

  • I don’t even understand how I ended up right here, however I assumed this
    post was great. I do not know who you are but certainly you’re going to a famous blogger in case you are
    not already. Cheers!

  • I’m impressed, I have to admit. Seldom do I come across a blog that’s equally educative and interesting, and without a doubt, you’ve hit
    the nail on the head. The problem is an issue that too few people are speaking intelligently
    about. Now i’m very happy that I stumbled across this
    during my search for something regarding this.

  • This is the perfect website for everyone who hopes to understand this topic.

    You understand so much its almost tough to argue with you
    (not that I really would want to…HaHa). You certainly
    put a brand new spin on a subject which has been discussed for decades.
    Excellent stuff, just excellent!


Leave a Reply

Your email address will not be published. Required fields are marked *