loading

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:

http://tomtomheylen.com/download_file.php?file=res...

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.
  • m.dot 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.

http://tomtomheylen.com/download_file.php?file=responsive1_final&extention=html

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.

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Step 5: Result

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

Extra information:

http://tomtomheylen.com/categories/Responsive_web_design/Responsive_web_design_part_1.php

Test your website

https://developers.google.com/speed/pagespeed/insi...

<p>Thank you<br>for this great article! Very simple andcomprehensible. Indeed, nowadays graphic designer is an interesting and<br>one of the most popular profession if not the most popular one. So, as written<br>up above, you should learn how to introduce and advertise yourself in this<br>competitive market. And of course you need your own website for that. One of<br>great examples, that I found recently on the net <a href="http://www.olyablack.com/" rel="nofollow">http://www.olyablack.com/</a><br>Here you can learn about designing web pages, it's usefull and well-structured.</p>
<p>That's a lot of awesome information! Thanks for sharing your knowledge!</p>

About This Instructable

3,640views

50favorites

License:

Bio: 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 ... More »
More by tomheylen:Long range, 1.8km,  Arduino to Arduino wireless communication with the HC-12. How to connect a FT232RL programmer to the Arduino ATMEGA328 for uploading sketches $2 Arduino. The ATMEGA328 as a stand-alone. Easy, cheap and very small. A complete guide. 
Add instructable to: