We got this video for you so that you don’t need to spend your time in the search.

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

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

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

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

NEXT VIDEO – images, videos, menus, backgrounds and sensitive hidden items

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

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

I was very confused when I started to look into the topic of mobile devices, responsive website design and mobile sites.

This video will save you time and hassle.

WEBDESIGN RESPONSIVE vs MOBILE VERSION
A responsive website is a site that resizes all the way to fit the screen of the user's device
While a mobile version is a different site usually starting with m-dot

Why not use the m-dot version.
Responsive website design does not require a separate website
You only have to maintain a website that looks good on any device.
M.dot websites can create errors when sharing URLs because they will be open on desktops and mobile devices.
In case of errors, the search engines will punish your site in the lower ranking

And the list continues.

HTML & CSS FOR WEB RESIZABLE DESIGN

You can download the exercise file in the link below.
https://tomtomheylen.com/download_file.php?file=responsive1_final&extention=html

A good way to build your website is to make your html tags flowing.

It's very easy to do using the percentage in your CSS.

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

You only have to give the elements a minimum height and a left and right margin.
With min-height, the elements can increase if necessary,
The left and right margins are expressed as a percentage to keep a proportion for any screen resolution.
And same thing for margin-top and bottom.

You can play with these numbers to meet your needs.

So here we have a responsive website !!!

When I look at this site on a mobile device, it shows the site in full resolution and I have to zoom in and out to navigate
.
Here's where the Meta Viewport Tag comes into play …

The viewport metaphor was Apple's solution to the problem and was quickly adopted by other platforms. But has never been modest before by the W3C.
For this, we will define a similar viewport rule in our CSS.
And another as a solution for Internet Explorer.

The width adjusts the site to the camera in normal view and in landscape mode.
And the zoom or initial 1 does not mean any zoom.

There are a lot of viewport properties to use for each device
But to make it easy, we only use a few for all.

I leave you a link as a reference.
Viewport reference:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

When we look at our web page on a mobile device now, it looks like what we want.

NEXT VIDEO

In the next video you will learn how to do
responsive navigation menus,
responsive images and videos,
reactive media
and how to hide elements.

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

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

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

https://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.

This content was first published here.

We inserted this video based on certain parameters as on date of insertion. Few of them are below.

Video Views: 38759

Video Rating: 4.73


LEAVE A REPLY

Please enter your comment!
Please enter your name here