Introduction: How to Make a Responsive Web Design - Basics
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.
- 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
