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.
