Design a Responsive Blogger Template - Tutorial


Design Responsive Blogger TemplateDesigning Mobile Responsive Templates has become a trending topic in web today. Mobile Technology and Mobile Traffic has evolved immensely from 2010 to 2013 especially in Asia USA and Africa. People now prefer reading emails on their iPhone as compared to using their Desktop computer. Fast wireless wifi connections is another reason that encouraged usage of mobile devices like smart phones (Apple and Android), Tablets, netbooks and low resolution cellphones like NOKIA.

More of our clients today are interested in fluid and flexible Blogger templates compared to traditional Fixed width Layouts. We have received over a hundred requests for this tutorial series. We are therefore releasing the first ever complete step by step Tutorial Guide on Mobile Optimized Responsive Blogger Templates to the Google Blogger Community. You will learn how to enable your Blog layout adjust itself automatically to the Device Screen Size.

Tutorial Series
1. Design a Responsive Blogger Template
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

Note: You are reading Part 1. Read it only for understanding the theory behind what Mobile friendly blogspot templates are. We will do the coding part from Part 2 onwards which is Common Device Breakpoints.

What is a Responsive Layout?

In layman terms a responsive webpage is a flexible design that adjusts its width and styles according to user device Screen size. It will look different on a Desktop Screen and much different on a smart phone or Tablet (has two sizes: portrait and landscape) . No matter what device you use a responsive design will adjust itself perfectly to give you a Clean user interface.

For Blogspot Users:

If you have activated Mobile view for your blogger blogs then if you view your blog in a smart phone, you will find its look completely different compared to a desktop. By default all blogger blogs are made mobile optimized but those styles are too simple and doesn't represent the blog in its true form therefore we will learn to create a custom designed Mobile Friendly layout for Blogger ourselves. This will allow you to customize your mobile Template and have a better control over the display of elements such as Ads and widgets on your site.

Therefore in our case we don't need the default mobile view at all and we have disabled it completely.

Mobile view Disabled in Blogspot

See it yourself!

An example of a responsive website is the latest design of MyBloggerTricks.com. Just view it using this amazing tool linked below. Observe clearly how its Menu changes as the size of the screen shrinks. You can also test it by simply adjusting your browser window size using your mouse cursor!

MBT view in iPhone

Just insert the following URL in the Input Field

http://mybloggertricks.com?m=1

Testing Responsive Designs

Are you too late?

If your blog layout doesn't support auto adjustment of layout and loading of new stylesheets based on Device width then you don't need to worry because Responsive layouts is a new idea and it will take time till everyone applies it. You wont believe this but Giant Corporate sites like TechCrunch have not yet upgraded their theme to a responsive one and moreover Google is so slow that it has not even introduced auto-width-adjusting AdSense Ads for such fluid layouts.  So it will take time till this new terminology is well acknowledged by majority of websites and internet firms.

Update: TechCrunch is now responsive and Google now favors Mobile friendly Pages. Google now ranks Mobile friendly blogs better and give them preference in Mobile search results over sites which are not yet mobile optimized. So hurry up and save that precious mobile traffic which you might be loosing at this moment!

How are Responsive Layouts Designed?

If you know some basics of HTML and CSS then trust me you are going to find it extremely easy and you would love to play with your layout columns using just your browser. CSS3 has introduced several new techniques of achieving some frequently used functions. It is no more limited to just styles but it now supports some really interesting front-end programming functions like @import, counter-reset, animations, transitions etc. and the most popular amongst them are Media Queries (@media ) that acts like conditional IF statements used in blogger.

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.. In order to tell the browser to detect the screensize we will add a META viewport tag inside <head> section of your layout.
 

Any Template can be converted into a flexible layout in just two simple steps:

1. Add Meta Viewport just below <head> tag

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

Here width=device-width will detect the screen size.

2. Use CSS3 Media Queries

Update: Ignore the Breakpoints below and instead follow our detailed tutorial on Defining Device Breakpoints  discussed in Part 2 

Media Queries are conditional CSS3 queries that detects screen size and applies the relevant stylesheet to that screen. For example see these two media queries for smart phones and Tablet devices.

@media screen and (max-width : 480px) {

/* If screen size less than 480px Load these styles */

/* Done for Smart Phones */

}

@media screen and (max-width : 768px) {

/* If screen size less than 768px Load these styles */

/* Done for Tablets */

}

Here are some interesting tips that you keep in mind throughout this tutorial series:

Tips To remember:

  1. Use percentages instead of numeric values to define width of columns
  2. Create Separate Style sheets for Three Major Breakpoints  320/480/768
  3. Remember to use box-sizing, max-width and min-width properties

Need help?

This was a brief introduction of how exactly a responsive layout is designed and what makes responsive websites so important today. I just hope I did justice with the post by making it as easy as possible. Please be aware that responsive web design requires a significant amount of testing to make sure your site looks good on all devices and browsers, you may want to look into a variety of test management tools in order to expedite the process. If you are facing confusion in any part just feel confident to leave your precious comment in the comment box below and I will be at your service 24/7. Please let me know how useful was this tutorial for you and did it help answering most of your questions?

Wish you peace and blessings buddies :)

Need Quick Help within 24 Hours? ASK NOW



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 »

42 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Great Work Mustafa Sir. Its really amazing. By using this trick we have resolved thats errors in our blog. Bundles of Thanks.

    ReplyDelete
  2. Muhammad Bhai You are always be a great man.... I learn Many Things from your's and today i have to much knowledge about blogging, websites, etc.. thanks alot for telling about this new Feature...

    ReplyDelete
  3. awesome series this will go viral in the market as it is the most asked topic now adays the responsive design. it will make our blog to take one more step towards succses thanks.

    ReplyDelete
  4. Awesome work bro.. That meta tag is not working because of it's ending tag is not available. Well, Thanks for that great share.

    ReplyDelete
    Replies
    1. Bro Why Are You Not Blogging? I Was A Big Fan Of Blogger Yard But Now No Posts Are Written There? Why?

      BTW Great Article For Newbie Bloggers Mohammad :)

      Delete
  5. I am using a responsive type of template. even i can edit font size color width etc. in blogger template editor. But I want make some major changes in template. can you Help me? http://www.windiaw.com/

    ReplyDelete
    Replies
    1. We have just started publishing remaining parts of this tutorial series please follow up for all your answers :)

      Delete
  6. Nice Tutorial Mohammad. Its unbelievable that Big Blogs like TechCrunch still not implemented Responsive design. In Wordpress, there are many Responsive Themes and i've also used some responsive Blogger Templates and never tried creating one. And one thing that i wanted to ask is why we need ti use em instead of Pixels?

    With Regards.

    ReplyDelete
  7. These is incredible! Thanks so much bro Muhammad for sharing these awesome tricks.

    ReplyDelete
  8. I love Responsive Templates,Thanks for Sharing the Awesome info :)
    ifti!

    ReplyDelete
  9. error parse xml when add meta tag i think you missed / closing

    ReplyDelete
  10. @subaharan nithiyananthan Brother there is an mistake done by Mohammad Bro. Actually, That meta tag is not containing ending tag so here is working code below :

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    Hope this will help. Peace

    ReplyDelete
  11. sir i want to know is there any thing we need to write other than the CSS code mentioned by you on the top? Can i copy and paste the above mentioned code in my blog http://www.webcodeexpert.com/ ? will it work?

    ReplyDelete
  12. have been waiting for this from long time, thank

    ReplyDelete
  13. Hello Mohammed bro,
    we are Expecting a lot of new templates with some free and many of those for licensed sales :)

    ReplyDelete
  14. nice one
    you are simply GrEat MusTafA

    ReplyDelete
  15. Good work, my template too responsive :D
    http://www.ngeramput.com

    ReplyDelete
  16. hi...can u pls explain further in detail...where to add css?

    ReplyDelete
  17. nice posting but very simple. me need more tutorial
    thanks you :)

    http://aikonmedia.blogspot.com/

    ReplyDelete
  18. When you offer a tutorial why not links to all? Very annoying

    ReplyDelete
  19. i add above coing just below head tag, another coding in css.. but still its not working..?
    can explain in brief and provide full coding ??

    ReplyDelete
  20. Thanks sir iwas searching this info for long time..thanx to share this trick I love your site it is really toooooo good..i want to make my blog like you can you visit at least once at www.anlob.org

    ReplyDelete
  21. nice info.. but it doesnt do anything when it get placed in blog template.. I tried with more than 3 templates.. need more tuts with demoes n pics.. cheers

    ReplyDelete
  22. informative tutorial to generate more traffic :), Thnx Mustafa

    ReplyDelete
  23. where to add the css in the original template or in the advanced css.Please help me with this :)

    ReplyDelete
  24. Mohammad sir thank you soo much, what you have posted that i was really looking for..!!

    ReplyDelete
  25. your blog has helped me a lot. thanks alot.

    ReplyDelete
  26. Mohammd Bhai

    I have tried the steps on by blog and not get it done. Can you please assist me to fix the issue on my site http://www.munnartourguide.com/

    Waiting for your response.

    ReplyDelete
    Replies
    1. None of these codes will make your template responsive unless you we publish all parts of this tutorial series. The above post is for understanding the concept only. You may kindly follow the coming Parts which are publishing one by one this month. Once you have read all parts you may then start implementing the codes

      Delete
  27. Really Nice tutorial here on MBT. Thanks for the article and I can't wait to see the remaining part of the series.

    Also, I have a very nice desktop view of my Tech Blog but the mobile view looks so crappy, rough and not mobile-friendly especially when viewed with Opera Mini. I want a total redesign of the mobile view, making it very simple and easy to navigate without altering the Desktop view. Is that possible and how ?

    Thanks

    ReplyDelete
  28. Love the Blogger tutorial series - any idea when the 7th part of the series is coming out? I'm looking forward to creating a similar Blogger template based on this free website layout.

    David

    ReplyDelete
  29. Hi, thanks for the post.
    Can you tell me how do I add responsive ads to my mobile version of the site ? The
    current ad banners are quite large and look ugly in the mobile screen. Any alternate for ads ?

    ReplyDelete
  30. hai sir i have doubt
    In google search instead my blogs direct link, my google plus profile is appearing plz tell me how to change it

    ReplyDelete
  31. admin kya ap ke blog ka ye mojoda theme aur template koi aur use kr skta hai to kesy plz repy

    ReplyDelete
    Replies
    1. Hello Waqas !
      waise to aapka question Admin Sir se h but muje lagta h ki m aapki help kr sakta hu to Admin (Mohammad) Sir se sorry bolte huye m aapka reply kr raha hu.
      Ha Theme or template use ho sakta h but iske liye aapko jo b template pasand h, us Template ki XML file le kr apne blog me upload karni hogi.
      For example: aapko is blog ka template apne blog me use karna h to aapko ye template lekr apne blog me upload karna hoga.
      online store se Khareed kr ya fir admin se 1 copy le kr

      Delete
  32. sir mera ek big problem he mera blog ka main post show nhi kr rha he kya kre,, maine ek nya (parfect mag template) install kiya hun, home page ka other sare option show kr rha he but jo post kr rhe he oo show nhi ho rha he kya kre,,mujhe ye template,,bahut pasand he aur maine ise 3 bar install kiya fir v nhi ho rha he,,plz help kre

    ReplyDelete