5 MIN TUTORIAL – Responsive Web Design – SIMPLE EASY

By Han Shuyen  |  January 1, 2018  |  Website Designing  |  Comments

Facebook: https://www.facebook.com/OfficialTomHeylen

RESPONSIVE WEB DESIGN TUTORIAL FOR BEGINNERS – MOBILE WEBDESIGN – HTML5 css3

Please have a look at my webpage where you can find extra information and
download the pdf version.
http://tomtomheylen.com/categories/Responsive_web_design/Responsive_web_design_part_1.php

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

NEXT VIDEO – responsive images, videos, menus, backgrounds and hiding elements

IN THIS VIDEO YOU WILL LEARN
How to make a responsive webpage using HTML and css
The difference between a mobile website and a responsive website and why not to use the mobile version.

You should have a basic understanding of html and css in order to follow along this video.

I got really confused when starting to look into the topic of mobile devices, responsive web design and mobile sites.

This video will save you the time and hassles.

RESPONSIVE WEBDESIGN vs MOBILE VERSION
A responsive website is one website that resizes all the way to fit the screen of the user’s device
Whereas a mobile version 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

And the list goes on.

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 marging left and right.
With min-height, the elements can increase if needed,
Margin left and right are expressed in percentige 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.

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 metatag was Apple’s solution to the problem and was quickly adopted by other platforms. But was never pud forward by the W3C.
Therefor we will define a similar viewport rule in our css.
And another one as a fix for internet explorer.

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.
viewport reference:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

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

NEXT VIDEO

In the next video you will learn how to make
responsive navigation menus,
responsive images and videos,
responsive backgrounds
and how to hide elements.

Did you like this video?
Subscribe to my channel and share!
http://www.youtube.com/subscribe_widget?p=tomtomheylen1

Resources:
http://searchenginewatch.com/article/2208496/72-of-Consumers-Want-Mobile-Friendly-Sites-Google-Research

http://blog.hubspot.com/marketing/google-hates-your-mobile-optimized-website-ht

http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag–webdesign-5972

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