5 MIN TUTORIAL – Responsive Web Design – SIMPLE EASY

Articles, Blog

5 MIN TUTORIAL – Responsive Web Design – SIMPLE EASY

5 MIN TUTORIAL – Responsive Web Design – SIMPLE EASY


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!

36 thoughts on 5 MIN TUTORIAL – Responsive Web Design – SIMPLE EASY

  1. Very clear and concise. Most other videos I found seem to go through the entire process of creating a website. For someone looking for a refresher on the key elements that make a website responsive (ie: Using percentages, and 'viewport'), this was great.

    Keep it up,

  2. So easy to understand.  I haven't designed a website since the old-days so this was a perfect intro to the new responsive design. Thank you

  3. I'm a little confused Tom. You are showing two pages. Are these pages both in an html document? You referred to css but I don't see a css stylesheet involved here. Perhaps the left is a stylesheet, but I've never seen the "<!doctype html>" at the top of a stylesheet; only at the top of an html page. Can you please clarify. In your example, are you using a stylesheet?

  4. but how do you do so your sidebar will have also responsive web design? it will not work with the help you just showed.

  5. this is the great tricks of responsive website . i think it will work for all ..if you need to know more you can visit here
    https://www.fiverr.com/md_rakib_hasan/repair-your-html5-and-css3

  6. Thanks.. But I have some table contents in my html website.. Some parts of tables are hiding right side the screen..how to fix it.. Visit www.lotusbeautysalon.in

Leave a Reply

Your email address will not be published. Required fields are marked *