5 MIN TUTORIAL - Responsive Web Design - SIMPLE EASY
179.9 هزار بار بازدید -
10 سال پیش
-
RESPONSIVE WEB DESIGN TUTORIAL FOR
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/Re...
Exercise file
http://tomtomheylen.com/download_file...
NEXT VIDEO – responsive images, videos, menus, backgrounds and hiding elements
7 MIN TUTORIAL - Responsive Web Desig...
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...
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...
When we view our webpage on a mobile device now, it looks the way we want.
NEXT VIDEO
7 MIN TUTORIAL - Responsive Web Desig...
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_widg...
Resources:
http://searchenginewatch.com/article/...
http://blog.hubspot.com/marketing/goo...
http://webdesign.tutsplus.com/article...
https://developer.mozilla.org/en/docs...
Please have a look at my webpage where you can find extra information and
download the pdf version.
http://tomtomheylen.com/categories/Re...
Exercise file
http://tomtomheylen.com/download_file...
NEXT VIDEO – responsive images, videos, menus, backgrounds and hiding elements
7 MIN TUTORIAL - Responsive Web Desig...
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...
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...
When we view our webpage on a mobile device now, it looks the way we want.
NEXT VIDEO
7 MIN TUTORIAL - Responsive Web Desig...
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_widg...
Resources:
http://searchenginewatch.com/article/...
http://blog.hubspot.com/marketing/goo...
http://webdesign.tutsplus.com/article...
https://developer.mozilla.org/en/docs...
10 سال پیش
در تاریخ 1393/07/15 منتشر شده
است.
179,992
بـار بازدید شده