How to Design a Responsive Blogger Template easily

Its is now easy to desing responsive blogger template through our tutorial, design of Responsive Templates has become a trending topic in web today. Mobile Technology and Mobile Traffic has an 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 un iMobile 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.
n 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 

Tutorial Series

1: Introduction To the 
Mobile Responsive Layouts

2: Design a Responsive Menu, Header, Sidebar, Post Content area, footer etc...

3: Using Responsive Images in Blogger..

4. Responsive AdSense Ads..  Really?

5. In Progress..

Note: Throughout this series we will implement all the  techniques on our own blog as a practical DEMO. Which means at the end of this series MBT will turn into a Mobile Optimized Responsive blog!

What is a Responsive Layout?

In layman terms a responsive webpage is a flexible design that are the 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 Blogger 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 custom designed layouts for blogger ourselves.

See it yourself!

An example of a responsive website is the latest design of Mashable.com. Just view it using this amazing tool created by the Mattkersley and implemented on Studiopress server. You will see its preview on a total of 5 different screen sizes. 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!

Testing Responsive Designs

Are you too late??

If your blog layout doesn't support auto of the 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 very 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.

How are the Responsive Layouts Designed?

If you know some basics of the 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 :

Media Queries are conditional CSS3 queries that detects screen size easily 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 em instead of pixels (px) to define font-sizes, padding, margin etc.
2. Use percentages instead of numeric values to define width of columns
3. Create Separate Style sheets for Three Major Breakpoints  480/768/1024
4. Remember to use box-sizing, max-width and min-width properties

Need help???

It is useful ? this post , please let me know in the comment box, thank you.