Speaking frankly, I think it’s really necessary to make every blogger mobile friendly. You might ask why. So here is a clear statement for you.
Mobile users are increasing dramatically because of so much cheap internet packages from the operators. Actually the mobile internet cost is half or even lower than a wireless or broadband connection. So a lot of people choose to surf internet using their mobile-phones.
On the latest internet trends report, KPCB proved how mobile users are increasing. They provided a graph showing the global mobile traffic as the percentage of total internet traffic:
Source: http://www.slideshare.net/kleinerperkins/internet-trends-2014-05-28-14-pdf
Just imagine 25 of every 100 visits are from mobiles. If your blog is not mobile friendly, almost 25% percent of all your visitors won’t be able to enjoy your site properly. And that will be nothing but a great shame of you.
To make sure none of our blog readers are making the same mistake, I have made the plan to share the news and show you how to do this.
Wanna make Blogger mobile friendly? You have 3 options
Option #1: Enable default mobile template
Do you know there are already 8 build in mobiles templates available on blogger platform? I’m sure many of you haven’t seen it yet. Simply activating one of them will do the trick.
By activating any of them, your site will automatically render the mobile theme for the mobile queries. Actually, when a phone user will surf the site, it will redirect to the stringed url like http://yourdomain.com/?m=1. In fact, you can test a mobile site on the desktop just defining the string ?m=1 in the urls.
Here is how you can do it:
- Navigate to Blogger Dashboard > Template.
- Click the gear icon for the mobile.
- Now select “Yes. Show mobile template on mobile devices.” and choose your theme.
- Click the save button.
Option #2: Make Your Template Responsive
There is a rumor, responsive sites are better than separated mobile sites. I think, it’s true. Because a responsive site shows the same content over different devices where a site with a mobile theme doesn’t.
So in case of seo, I also think we should choose responsive themes. In fact, Google recommends responsive layouts for every site and especially the blogs.
That’s why it’s better to make theme responsive. Unfortunately, if you are not a web developer, it might be seemed difficult. It’ll be better for you to contact your site developer.
Contrary, if you know at least the basic css, you can easily do it. Just follow up the instructions:
- Navigate to Blogger Dashboard > Template > Edit HTML.
- Now add this line inside the <head> and </head>:
<meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0'/>
- Now prepare your custom css code for mobile rendering and paste it in Blogger Dashboard > Template > Customize > Advanced > Add CSS.Simple css code will render both on desktop and phone. So we need to specify that the code should be rendered only in specific devices. In this case, we will need to use CSS3 @media Query. Here I have created the basic @media query css structure:
/* Laptops and Desktops */ @media only screen and (max-width : 1280px) { /* The following css will be rendered if device width is less than 1280px */ } /* Tablets (Landscape) */ @media only screen and (max-width : 1024px) { /* The following css will be rendered if device width is less than 1024px */ } /* Tablets (Portrait) */ @media only screen and (max-width : 768px) { /* The following css will be rendered if device width is less than 768px */ } /* iPhones */ @media only screen and (max-width : 640px) { /* The following css will be rendered if device width is less than 640xpx */ } /* Mobiles */ @media only screen and (max-width : 480px) { /* The following css will be rendered if device width is less than 480px */ } /* Small Mobiles */ @media only screen and (max-width : 320px) { /* The following css will be rendered if device width is less than 320px */ }You can change the width as per your recommendation. Put you css for specified widths inside the curly brackets. All you have to adjust the widths of your web page elements to make it fit on all the browsers. - At last click “Apply to Blog”.
Tips for writing responsive css:
- Change all the main element’s width from pixel (px) to percent (%). So the width will respond according to the width.
Example:.class { width: 100%; } - If any unwanted scroll bar appears, you can use overflow in your css.
Example:.class { overflow: hidden; }
If you think making the current template responsive is quite harder, you can use free or premium blogger templates which are already made by the developers. For premium themes, you can check ThemeForest. Or if you are looking for free blogger templates, you can check BTNT themes.
Option #3: Create an app for mobile devices
Without changing your site, you can also build an app for your phone users. So they can simply enjoy your site without any hesitation. An app will surely increase your blog engagement and could make you some extra revenues later. I would only advise you to have an app if your blog is so much popular.
In terms of creating, I think this is some type of geeky works. You will need far knowledge of app development to make an app by yourself. In fact, I personally don’t know so much of it to help you out.
Though it could be expensive, you might want to hire an app developer to create a custom app for your blog. Or you can use Mippin or AppGeyser to build an app easily, based on your blog RSS feed.
Over to You!
These are my known ways to lead a mobile friendly blogger site. I personally think, we should be really considering a mobile friendly layout thinking about readers and seo.People from all over the world has started to engage in internet with their mobiles and smartphones. So we should better make our blog ready if we don’t want to lose them.
What do you think about making blogger mobile friendly? Don’t forget to share your valuable thoughts with us through commenting.
Sumber : http://www.bloggingspell.com/make-blogger-mobile-friendly/
No comments:
Post a Comment