Highlight text to annotate itX
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.
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.
When we view our webpage on a mobile device now, it looks the way we want.
In this video you have learned:
What the difference is between a resizable webdesign and a mobile webdesgn.
How to setup your html and css for resizable content
The use of viewport in the metatag and in css in order to have a correct display on
any device A fix for internet explorer.
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!