I get many question as a UX developer about the template design of blogger. Some are very serious like, "How do i make my blogger template responsive?". Why they should not pay more weight to a responsive layout. mobilegeddon is about to launch which will take the mobile friendliness as a ranking signal and it becomes necessary to make your website and blogs mobile friendly.
What does Responsiveness mean?
 |
| top 10 richest person in Kanpur |
Responsiveness is the liquidity in a website design and a tendency to transform width height and wrappers according to the size of browser window or device screen. The responsiveness has become the life blood of website design now a days. Your coding ought to be very neat and clean for the purpose of getting fitted for every device. I've launched a new Blogger template that can tackle all your problems for $10 at lifetime. But I know some of you are not that wealthy to pay for a blogger template and reading this post just because you want your blogger template to be responsive.
Your audience having problems when they surf your blog is not a good signal for your website repo and Search Engine OPtimization efforts as well. The ranking signal is also broken which hard your site visibility on Search Engine Results page.
I guess, you're thinking ,"Hey! I am not a UX developer. How would i do it? Nah! This is beyond my skills."
Trust me, you will need no extra skills but some beginner knowledge of CSS and layout optimization.
Things you need to make your template responsive
CSS
Before starting it out, You'll need to know basics of CSS and then you're ready to do it. CSS is as easy as literature of Primary classes. You'll be saying, "Hey! Tell me how?" W3schools can better teach you some basics of CSS.
Blogger Knowledge
Unless you're not familiar with blogger template HTML, I ask you to stay away. This is not the work of dollish folks. You need to have a simple knowledge of DIV and wrappers which are used in your template.
How to make responsive blogger template?
There are many resources to study about responsive web designing. COde school and w3school is best. You need to become an expert of Bootstrap to make a fully responsive blogger template. Many of folks are still unable to design a responsive blogger template even if they are an expert of Bootstrap just because of complexity in blogger XHTML language.
We will use META and MEDIA tags to liquidate
Adding DEVICE WIDTH meta tag for responsiveness
As usually we do it in any case of template customization, Goto Template setting and refer to EDIT HTML there.
Now just above /head paste the code below
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
Working with @media tags
Once you've inserted basics of CSS and HTML in your brain, you will have no issue in making your template responsive.
Let me tell you How.
@media screen and (max-width : 1280px) {
/* CSS FOR NETBOOK AND DESKTOP ------------*/
}
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
}
Media queries are separate CSS for each device size. For Tablets, you need to write your CSS code for each wrapper separately. You have to be very very careful while writing CSS code for each media screen. Consider the maximum width of the media screen in your mind and keep writing it.
I have an example of it.
In the below snippet I have a main content wrapper to be liquidated. Let's see how I do it.
@media screen and (max-width : 1280px) {
/* CSS FOR NETBOOK AND DESKTOP ------------*/
"main-wrapper {width:1000px; height:auto; padding:5px; }
}
@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
"main-wrapper {width:800px; height:auto; padding:5px; }
}
@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
"main-wrapper {width:490px; height:auto; padding:5px; }
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
"main-wrapper {width:400px; height:auto; padding:5px; }
}
@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
"main-wrapper {width:350px; height:auto; padding:5px; }
}
@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
"main-wrapper {width:1000px; height:auto; padding:5px; }
}
In the above example, I've allotted many width to a single HTML object to be shown on different screen sizes.
What to Keep in Mind?
#Tip1
Make sure you've alloted a wrapper with div to each object of the blog. Keep in mind, you're going to allot different widths to a single object in many cases, be cautious.
#Tip2
Its the work of great confusion of mind. You need to make a framework how your blog should look like on every device. This will make you committed about the widths and paddings.
#Tip3
Don't waste you time if unable to customize and optimize your template. Upload a free responsive blogger template and enjoy the juice of responsiveness. Don't commit the stupid act of buying premium unless you have sufficient to spend.
Final Words :
In the flowing Ganga, you shall also leverage the juice of responsive blogging. In lack of responsive web design many webmasters have already faced many problems. It is better to make your layout responsive that to repent afterwards.
