How to Make a Responsive Web Design - Basics

Introduction: How to Make a Responsive Web Design - Basics

About: I like to make stuff in my free time. Especially programming, cooking, electronics etc. Lately I'm making tutorials about stuff I made the last few years.

In this instructable you will learn how to make a responsive webpage using HTML and css.

We will cover:

The basics of resizable HTML elements.

Difference between responsive website and mobile website.

The use of the viewport tag to detect the user's mobile device and display the webpage in the best resolution.

Step 1: Video

You can watch the video or follow the rest of the tutorial.

In the final step I will leave you some links where you can find extra information and where you can test your website.

Exercise file:

Step 2: Responsive Web Design Vs Mobile Website

  • A responsive website is one website that resizes all the way to fit the screen of the user's device.
  • A mobile website is a different website usually starting with m-dot

Why not to use the m-dot version.

  • Responsive web design doesn't require a separate website.
  • You only have to maintain one website that looks good on any device.
  • websites can create errors when sharing url's, as they will be opened on desktop and mobile devices.
  • When errors, Search engines will punish your site in ranking lower

Step 3: HTML & Css for Resizable Web Design

You can download the exercise file in the link below.

A good way to build your website is by making your HTML tags fluid.

It is very easy to do by using percentage in your css.

For this example we are making a head, menu, the content body and a footer, centered in the web browser.

You only have to give the elements a min-height and a margin-left and margin-right.

With min-height, the elements can increase if needed.

Margin left and right are expressed in percentage to keep proportion for any screen resolution.

And same thing for margin-top and bottom.

You can play around with this figures to fit your needs.

Step 4: Viewport Meta Tag

So here we have a responsive website!!!

When I view this website on a mobile device however, it shows the website in full resolution and I have to zoom-in and out to navigate.

Here is where the Viewport Meta Tag comes into play...

The viewport meta tag was Apple's solution to the problem and was quickly adopted by other platforms. But was never pud forward by the W3C.

<meta name="viewport" ... >

Therefore we will define a similar viewport rule in our css.

@viewport{ ... }

And another one as a fix for internet explorer.

@-ms-viewport{ ... }

The width adjusts the site to the device in normal view and landscape view.

And zoom or initial 1 stands for no zooming.

There are a whole bunch of viewport properties to use for every single device.

But to make it easy, we only use a few to fit all.

I leave you a link as a reference.

Step 5: Result

When we view our webpage on a mobile device now, it looks the way we want.

Extra information:

Test your website

Be the First to Share


    • Halloween Contest

      Halloween Contest
    • Back to School: Student Design Challenge

      Back to School: Student Design Challenge
    • Fandom Contest

      Fandom Contest



    2 years ago

    Thanks for your valuable information


    2 years ago

    First of all thanks for the article. I usually do my web design work with bootstrap.


    5 years ago

    Thank you
    for this great article! Very simple andcomprehensible. Indeed, nowadays graphic designer is an interesting and
    one of the most popular profession if not the most popular one. So, as written
    up above, you should learn how to introduce and advertise yourself in this
    competitive market. And of course you need your own website for that. One of
    great examples, that I found recently on the net
    Here you can learn about designing web pages, it's usefull and well-structured.