darkportrait
Regular Member
- Jul 22, 2014
- 483
- 16
Seeing a lot of folks worrying about Google's recent (mobile) update. So heres my two cents on fixing your site -
First off, Responsive/Mobile-friendly - features aren't anything new. back in 2012 it was the trendy term every theme developer tagged their themes with. Its actually pretty easy to implement.
So if you are using a recent wordpress theme. chances are you already got yourself covered. go ahead and check it here -
https://www.google.com/webmasters/tools/mobile-friendly
Now if your site isn't mobile friendly and still on wordpress, we can try out this plugin - https://wordpress.org/plugins/wptouch/ - free version does the job, havent used the paid features....
If your site includes just a few static html files, heres what you can do -
(note some knowledge of html and css will be helpful)
A generic site markup goes something like this -
html
--head
--body
----div:main-wrap
------div:article
------div:sidebar
Heres what you need to do (will explain below)-
1) in head, add boostrap css. heres the code you need to add
Example:
2) in div:main-wrap, add the class "row".
Example:
3) in div:article, add the class "col-sm-8 col-xs-12"
Example:
4) in div:sidebar, add the class "col-sm-4 col-xs-12"
And Magic! Your page is mobile-friendly. That was easy right. Read on, for a short description of what happened here.
If you are new to bootstrap, you might be thinking what these numbers means, read on (i will try to keep it super short)-
bootstrap display model works like a table. First you put the elements that go side-by-side in a ROW.
We did that in step 2. Article and Sidebar appear side-by-side. So they are placed in the same row.
Each row can hold a most of 12-columns. Here you can adjust the space, each element takes by mentioning the number columns they cover. The classes we added in steps 3 and 4 are exactly for that purpose.
Still we have one missing component to explore, notice the SM and MD tags.
Bootstrap allows you to change layout based on the screen size of the user.
So,
so, for example,
Note one final thing, small screens take precedence over larger screens, say if you want the display to be same for medium and large displays, you can only define the medium layout.
You can read more about the bootstrap css http://getbootstrap.com/css/
Hope this helps.
If you are developer, feel free share your tips, we all can learn new things
First off, Responsive/Mobile-friendly - features aren't anything new. back in 2012 it was the trendy term every theme developer tagged their themes with. Its actually pretty easy to implement.
So if you are using a recent wordpress theme. chances are you already got yourself covered. go ahead and check it here -
https://www.google.com/webmasters/tools/mobile-friendly
Now if your site isn't mobile friendly and still on wordpress, we can try out this plugin - https://wordpress.org/plugins/wptouch/ - free version does the job, havent used the paid features....
If your site includes just a few static html files, heres what you can do -
(note some knowledge of html and css will be helpful)
A generic site markup goes something like this -
html
--head
--body
----div:main-wrap
------div:article
------div:sidebar
Heres what you need to do (will explain below)-
1) in head, add boostrap css. heres the code you need to add
Code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">Example:
Code:
<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
...
</head>2) in div:main-wrap, add the class "row".
Example:
Code:
<div id="main-wrap" class="row">3) in div:article, add the class "col-sm-8 col-xs-12"
Example:
Code:
<div id="article-wrap" class="col-sm-8 col-xs-12">4) in div:sidebar, add the class "col-sm-4 col-xs-12"
And Magic! Your page is mobile-friendly. That was easy right. Read on, for a short description of what happened here.
If you are new to bootstrap, you might be thinking what these numbers means, read on (i will try to keep it super short)-
bootstrap display model works like a table. First you put the elements that go side-by-side in a ROW.
We did that in step 2. Article and Sidebar appear side-by-side. So they are placed in the same row.
Each row can hold a most of 12-columns. Here you can adjust the space, each element takes by mentioning the number columns they cover. The classes we added in steps 3 and 4 are exactly for that purpose.
Still we have one missing component to explore, notice the SM and MD tags.
Bootstrap allows you to change layout based on the screen size of the user.
So,
Code:
xs = extra small, generally phones
sm = small, generally tablets
md = medium, generally desktop
lg = large, desktopso, for example,
Code:
col-md-8
means
8 columns when showing to medium sized screens(tablets)Note one final thing, small screens take precedence over larger screens, say if you want the display to be same for medium and large displays, you can only define the medium layout.
You can read more about the bootstrap css http://getbootstrap.com/css/
Hope this helps.
If you are developer, feel free share your tips, we all can learn new things