Making Blogger Responsive Mobile-friendly Template Design | Responsive Web Development





In future more people are going to use a mobile phone as compared to the computers to be online, rather they are getting started now, and that's why you are here. Lots of people prefer their mobile phone for daily online activities like to read their emails. By consideration of this, plenty of bloggers have to secure their position for future, they need have enabled mobile-friendly responsive template or smartphone website template for their blog. By one survey carried out 2015-16, it is seen that; more than 52% of your traffic is coming from mobile devices especially in the US, Asia & Africa, so you can now imagine what going to happen in the future. You all the blogger who reading this need to start building mobile compatible website template for your blogger site. Responsive Mobile-friendly Template Design - Now the question is how to make blogger template responsive and how we start to develop responsive blogger templates. And it's one of the tough tasks in making a website mobile responsive because it is a great job to manage HTML5 and CSS with @media queries. If you see, there are lots of where you easily get free basic responsive website templates for your website. But you need to leave your existing design. Learn Responsive Web Development from scratch to build & develop a responsive web mobile layout using including flexible layouts, simple CSS3 media queries that produce flexible media to convert your current theme into mobile-friendly responsive look. This advanced tutorial provides you an introduction to building responsive web design for mobile layouts of any site, but especially for the blogger. This is an ultimate guide you need to follow that explains all about mobile friendly website design with the help of mobile friendly CSS in HTML5 which allows you to make blogger template mobile friendly & extremely responsive.
Making Blogger Responsive Mobile-friendly Template | Responsive Web Development
Responsive Web Development
Last time we have seen responsive site checker. Learn more about a responsive website designing and the factors affecting in designing web sites. I knew, every visitor is like our customer, and it is a very important person for your blog, so then I made this tutorial after lots of troubleshooting with blogger template to help you for building a mobile web site design so that your mobile visitor will not go back and become a regular reader of your blog.

Also, read: 5 Tips To Make Your Blog Load 10x Faster | Blogging Tips

Responsive Web Development - Multiple Screens, ONE DESIGN

Responsive web design for mobile - Your site design is good for desktop but some of your's, it gets failed when it comes to the small screen. Here is advanced tutorial described for making the responsive blogger HTML template compared to old fixed layout template in which you can not only able to configure the widgets to show an alternate content for the mobile view but also you will able to customize the full mobile friendly template, place AdSense ad units only for mobile template too.

Check: Improve Search Engine Ranking [PageRank] by Generating HTML Meta Tags

Making A Website Mobile Responsive

Mobile friendly website design - All new website are now built in HTML5. But by-default the blogger have provided only 7 templates which you can NOT edit as per your requirement, or it may cause different look than the one you are on now. Also there are lots of sites can provide free mobile template for your blog, even though they built a nice template for your site, they have some drawbacks as you cannot place AdSense ad widget, they gonna place their banner in your template more over some sites places ads and earn money from your mobile visitors. The main disadvantage of this site according to me is that it makes your website links differently than original, so social sharing state varies.

Building Responsive Website

You'r now like a responsive website developer and learning something new for better future. Flexible or responsive template means one design which is automatically redesign itself according to the screen size. Consider following advantages of this tutorial to build a responsive website;
  • Forget about maintaining a separate website for mobile.
  • It’s good in case of SEO.
  • Your site links have remained same, so it doesn't cause any effect in social sharing statistics.
  • Browser’s user agent doesn't cause an effect on the design.

Responsive Development - Get started

Note: Before starting any work here or anywhere, you need to backup everything you need, in a case to restore all the things if happened any wrong. So backup all the settings and template you are using now.
  1. First go to Template >> Choose Mobile template >> Select Custom.
  2. Save
You can see preview of your site. It may look good for some bloggers. But we are here to make it nice and flexible.

Screen size for responsive web design: Screen Detection

  1. Go to Template >> Edit HTML
  2. Add following code below <head> tag
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
This Meta viewport is used for detecting the screen size then fed it to CSS for redesign accordingly.

Mobile friendly CSS - Designing Web Sites

We need to load CSS property for <body> according to screen-view:
Find <body> and replace it by following code:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>


Widget Customization

Now we can allow particular widgets to be shown on mobile view. How?
Normally in HTML widget it defined as:
<b:widget id='ID-type' locked='true' title='Widget-Title'/>
Here you just need to add mobile tag to it
<b:widget id='ID-type' locked='true' mobile='yes' title='Widget-Title'/>
This mobile property tag will cause that widget to be shown in mobile view.

Mobile Property Tags Meaning
mobile=‘yes’ show in mobile-view
mobile='no' don’t show in mobile-view
mobile='only' show in only mobile-view

Mobile friendly CSS Customization

Now actual hard work is started now. If you know CSS editing well then you can you following class to design you mobile template.
.mobile #sidebar-wrapper {
Display: none;
}

This class will not allow sidebar to be shown in mobile view.
Likewise described above, you just need to put .mobile class to each part of your old CSS class and define as per your requirement.

Advanced conditional CSS Customization

Learn to make web design according to screen-size conditions.
@media screen and (max-width : 320px) {

#sidebar-wrapper {
Display: none;

}


This class will not allow sidebar to be shown in mobile view if screen-size is less than 320px like for smartphones.
Example: for tablets
@media screen and (max-width : 768px) {

/* CSS for big size screens like tablets */

}


This class will load the CSS you have defined in it when screen size is less than 768px like tablets.

You need to read for full detailed CSS tutorial: How to Build Responsive Blogger Template CSS : Advanced Tutorial

HTML5 Mobile Responsive Template Customization

Now we also make changes in HTML simultaneously. For this you just need to know following mobile condition
<b:if cond="data:blog.isMobile">
<!-- Show this for mobile-vew-->
<b:else/>
<!-- Show this if it’s not mobile screen or for desktop view -->
</b:if>

What you learn

A Responsive template is also important as your current template playing a role for visitors. It makes considerably change in your bounce rate. We really need to be aware and have to grab a good position in the market. For responsive website samples check this page on mobile and desktop, you will get what you are learning and what you need to do with mobile web site design.

What Next
In next tutorial we are actually going to edit complete CSS and HTML of blogger template and will see how to develop it according to the screen-view.
Stay addicted.


You liked this article? Please, share this...

Seriously. It helps a lot with the growth of this blog.
Most of the online readers don’t share this article as they feels that we as bloggers don’t require their “tiny” social share. But here’s the fact…
I've developed this blog piece by piece, your one small share at a time, and will continue encouraging me to do so. So I appreciate your support, my dear reader if you share this page on your social profile.
It won’t take more than 5 seconds of your time. The share buttons are right here.

Authorised by:

A cybercrime expert, CBI - he is a personal technology columnist and the founder of ProBlogBooster. You can follow him on the social media or subscribe for the email newsletter for your daily dose of updated guides and tutorials. He talks about computer security and vulnerability prevention methods and mostly publishes news articles about blogging tips, SEO, making money online, affiliate marketing, and reviews.



Prev Story
Next Post »
Read & Post Comments

COPYRIGHTS & USAGE

All of the ProBlogBooster ideas are free for any type of personal or commercial use. All I ask is to keep the footer links intact which provides due credit to its authors. From time to time, we may use visitors/readers, information for distinct & upcoming, unanticipated uses not earlier disclosed in our privacy notice. If collected data or information practices changed or improved at some time in the future, we would post all the policy changes to our Website to notify you of these changes, and we will use for these new purposes only data collected from the time of the policy change forward. If you are concerned about how your information is used, you should check back our website Policy pages periodically. For more about this just read out Privacy Policy




Articles on Writing Unique Content

Making Blogger Responsive Mobile-friendly Template
Learn More About Responsive Web Development

Top 15 Must-Have Apps You Should Install
Right After Buying A New Smartphone

Making Blogger Responsive - How to make, design and build a responsive blogger template. This is an advanced tutorial & tep-by-step guide for making mobile-friendly responsive blogger HTML template compared to responsive web development. [Read More...]
These are the best android and iOS apps you need to consider and install right after buying a new smartphone to make your life easier. These apps will keep you smartphone as like new and boost mobile performance regularly. [Read More...]