Design Responsive Blogger Templates - Step by Step Guide

how to design responsive blogger templatesFinally we are done with the most comprehensive and descriptive tutorial series on Google powered  blogger blogs. We have discussed the core basics to create and develop a mobile responsive layout using simple CSS3 @media queries and some built-in scripts. This series will help you understand the step-by-step effort involved in transforming an ordinary static, inflexible and non-responsive blogger template into a fluid and responsive one that may help you improve your Mobile Search traffic and better entertain your users with a mobile friendly user-interface (UI). A Mobile UI is an important SEO ranking metric and helps you improve your mobile pageviews and thereby the site CTR revenue.

Why bother creating a responsive design?

Google recently rolled out a Mobile Friendly update on April 21, 2015, which boosts the ranking of mobile-friendly sites on mobile search results.  Google no longer favors fixed width layouts and recommends that all sites must provide better touch experience, where text should be readable without tapping or zooming, tap targets are spaced appropriately and the page avoids unplayable content or horizontal scrolling.

Running out of time? Let's read a brief summary to each part.

Brief Summary

Here we demonstrated what exactly are responsive designs and how they are created using CSS3 @media screen queries. Normally mobile browsers emulates a desktop view by squeezing big resolutions into small screens that is often difficult to read and browse. You must be familiar that how difficult it is to click a web link in iphone unless you zoom it.

Therefore we make sure all elements on the site from buttons, links and images/media provide a better touch experience. To make them look big and clean with clear resolution all that needs to be done is to add Meta Viewport tag in the page header and some CSS3 Media queries that does all the job.

Breakpoints are points at which your layout design breaks or crashes. Breakpoints are CSS3 Media Queries that tells the browser which Layout to load for your website based on the screen size (viewport). It controls the display of your user interface (UI) on mobile devices.

With so many Mobile Products in market where each smartphone or tablet has a different Screen size, it is important that we select some Content Specific Breakpoints so that your blogspot page may adjust and fit perfectly to the different screen sizes and may not looked squeezed or poor in resolution

3. Hiding Widgets & Scripts in Mobile Templates [1], [2]

Surprisingly blogger templates supports a rarely used mobile conditional expression i.e. isMobileRequest which is a Globally Available Data which can be applied to any HTML DOM inside the template. isMobileRequest  is a Boolean Data Type that accepts only two values which is either True or False. It can be used to show or hide HTML content or widgets containers in smartphone devices. It currently does not support Tablets or iPads etc. but you can surely use it to prevent rendering of unnecessary widgets and scripts on mobile devices to speed up your page load time on small screen devices.

This tag also helps you to avoid using CSS Display:none  to hide content on your site which is not a SEO friendly approach to responsive designs. Thus it is really a time saving condition that gives you more control and power over the blog content that loads in mobile phones.

The fundamental part of a responsive design is the structure of its Header which includes your blog logo and navigation menu. This tutorial shares an easy to use responsive drop down menu with a search functionality. This menu can be displayed on both PC Desktop screens and smartphones and tablets. You can also choose to maintain your current desktop menu and instead chose to use this responsive menu for mobile screens only. A simple fix to the most important component of your mobile layout.

Ever wondered how to make your blog images to auto adjust their dimensions in mobile phones and tablets without effecting its resolution and quality? Images with large sizes often don't fit in small screen devices and as a result gives a bad UI impression. Images must be fluid in its behavior, their width and height dimensions should be stylized such that they may instantly change their overall size as the browser screen goes smaller or bigger.

Our approach is based on CSS @media Queries unlike adaptive image methods which makes use of JavaScript of php.

Are you among people who complain about AdSense responsive Ad units showing a blank space on your webpage? If yes then read this tutorial to fix this blank rendering issue and better style your responsive ads for different screen sizes using device breakpoints.

7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

Since we have learned the core basics, now its time to start customizing different sections of your blog and make them auto adapt to mobile screens. This tutorial in chunk discusses ways to mobilize the 4 important sections of your blog which are:

  1. Header
  2. Content area
  3. Sidebar
  4. Footer 

Need Help?

I hope this short summary of different parts of this major and longest tutorial will help you take a helicopter view of every tools and methods required to customize your beautiful blogs into a mobile supported layout that may better help your readers to browse and read your articles. Thus giving you the advantage of both pageviews and search ranking. Let us know if you need any help and I would love to answer all your queries. Peace and blessings buddies! =)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

15 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. i love this whole series to template responsive.
    your explanation style is amazing and i love it.
    i learnt lots of things from this blog.
    ALLAH apko aur apke blog ko aur ziyzda balke sabse ziyada kamiyab banaey.

    ReplyDelete
    Replies
    1. Thank you dear abuzar, this feedback means a lot and we will continue sharing some more great tutorials in coming days :)

      Delete
  2. Tutorial is really nice, thanks for share MBT

    ReplyDelete
  3. Hello Mohammad bro.
    Thanks for your hard work. I love blogspot platform as well blogger default template. I will able to make my template full responsive according to your guide. Thanks bro
    Thanks a ton !!
    Your regards
    Salek

    ReplyDelete
    Replies
    1. I am so glad you tried the responsive guide and converted your static template into a responsive one. Wish you all the best buddy. =)

      Delete
  4. What!!!!!!!!!
    Series completed....
    But what for my request mohammad bhai...
    I was request for responsive popup subscrition box for blogger blog and you assure that you provide this in your responsive series. So how can this series ended.. i thinkmy request 8s more useful for all bloggers. This is must need widget. Please do not finish the series.

    ReplyDelete
    Replies
    1. OMG! looks like I almost forget that! =d

      Don't worry buddy, create a forum thread and ask me for any subscription box and I will convert it for you into a responsive one. This is the especial favor I can do for you. :)

      Post your question at ask.mybloggertricks.com and then email me at mohammad@mybloggertricks.com so that i may reply fast

      Delete
  5. Thank you very much Mohammad Bhai..

    That why I like your site to visit.

    ReplyDelete
  6. Interesting article!
    I'm new to blogger,though have read many ebooks and my understanding of blogger has improved.
    But right now I'm facing a tough time with my blog not been responsive!
    I browsed and was introduced to viewport and media queries, CSS!
    The problem is " I'm unable to implement these tricks," please help me out friends.

    sometimes I had to click zoom to see the contents on my blogger blog!

    I will be happy to get positive feedbacks!

    ReplyDelete
  7. heyy I have one problem.In responsive blogger template how to post by category means menu bar??plz reply soon.

    ReplyDelete
  8. Replies
    1. Because you are reading the summary and not the tutorial guide itself which can be find by clicking here :)

      Delete
  9. Hello Mohammad.. I decided to write you after a few weeks of finally being able to make my website responsive. And would also like to inform you about some changes i found while making my site responsive.


    The sidebar wrapper did not work, so it seems blogger have replaced it with sidebar-right-1 or sidebar-left-1 depending on RHS or LHS..

    The main section did not also work so i had to replace it with .main-inner .column-center-inner .section . Should incase any one is facing such troubles, just use google inspect tool to see which one will work well for you.

    Have a nice day.

    blog url: www.obhiabablog.blogspot.com

    ReplyDelete
  10. I don't know how can i make a blog .Can you help me!

    ReplyDelete