Mind blowing SEO improving and Google rank increasing Signature Rotator SEO Tool.

Blog: 

How To Create Responsive Website Tutorial And Guide!

Avatar
Topic Stats
Comments: 4
Likes: 2
Views: 2130
victor
Why you as a webmaster have to worry about making sure your website has the responsive design. Well the answer is simple cause of the Google Mobile update which states that now Google uses mobile friendlies as a ranking signal in SEO! This means that if your website is not mobile friendly it will be given lower rankings.

You can easily have a separate mobile version or theme of your web-site bit deal with 2 themes can be a bit of a pain!

Now how do you create this design! Actually it's easier than you think!

You will need to have a Google Chrome web-browser installed and have installed an addon called FireBug. Then you can use Chrome mobile simulator or emulator when working on web design. Settings -> More Tools -> Developer Tools

First you have to avoid using in your HTML tables as they are not resizable this means that the table will have to be given specific width otherwise it will not fit on the screen and will overflow.

For that you should use HTML DIVs and make sure you don't use any max-width or min-width CSS properties!

Now to account for different screen resolutions we have to use this similar CSS3 properties.

@media screen With this we can tell the browser at this resolution we want the code inside to run!

Example:

Let say we have inline 2 DIVs and the content of them is design for the 1280x728 screen resolution this means that on on responsive design 2 divs will overflow and we need to hide one div on non desktop version right.


Here are our 2 divs inline:
Code:
<div style="float:left;display:inline-block;">This is left side div content</div>
<div id="desktop_version" style="float:left;display:inline-block;">This is right side div content</div>

Notice the id="desktop_version"!

Now we have to write CSS code that will hide this id="desktop_version" on PCs or computers and show it on smartphones and tablets.


Code:
@media screen and (min-width: 1280px) {
  #desktop_version {
    display: none;
  }
}


This means that when resolution of the screen is less or below 1280px id="desktop_version" will have CSS value display: none;

Now you can also use some like this:

Code:
@media screen and (max-width: 1280px) {
  #mobile_version {
    display: none;
  }
}

This will add display: none; CSS value to id="mobile_version" when the resolution of the screen goes above 1280px.

As you can see can easily hide and show content depending on the device screen resolution.

You can add as much CSS properties to the ID as you want.
Chat gratis
Avatar
Posted on: 05-05-2016 , 07:58 PM Post ID: #30
These days responsive or mobile friendliness is a very important factor for Google.
Avatar
Posted on: 05-05-2016 , 12:02 PM Post ID: #28
Creating the head – Doctype and Meta Tags
Creating the head – CSS files
Creating the head – Javascript / jQuery files
Creating the body – Introduction
Creating the body – Building the website structure
Avatar
Posted on: 10-04-2015 , 12:03 PM Post ID: #10
These days Google is pretty serious about websites being mobile-friendly this factor even used as a ranking signal!
Avatar
Posted on: 09-07-2015 , 02:31 PM Post ID: #3
You also need to add meta tag viewport to your header so that mobile devises would render the page as mobile and not a desktop one!

Code:
<meta name=viewport content="width=device-width, initial-scale=1">