Design Responsive Blogger Templates - Step by Step Guide

Finally 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.

More

Mohammad 9/03/2015

Make Blog Images and Post Thumbnails Responsive!

We have covered most important core concepts of responsive designs and have shared almost every tip to design mobile friendly layouts in blogspot blogs, now it is time to learn how to make blog images to auto adjust their dimensions in mobile phones and tablets without effecting its resolution. 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.

More

Mohammad 8/21/2015

Make Your Multi Column "Blog Footer" Responsive

 

In this tutorial you will learn how to convert your three Column footer into a responsive and auto-adjusting footer wrapper by creating separate stylesheet for different device breakpoints. Your blog footer could be a single column, 2 column, 3 or even 4 column, it may contain multiple rows and columns but the idea behind mobile optimized layouts is a simple concept which if understood would make it really simple for you to play around all elements on your blog and make them mobile responsive. I am sharing below the tutorial for blogger blogs but this methodology can be applied across all platforms. We have already learned how to mobilize Blog header and content area and now we need to play around the footer. Lets get to work then!

More

Mohammad 8/17/2015

How to make 'Posts' and 'Sidebar' column responsive?

I hope you have now learnt the basic steps required to make a layout responsive. You have already learned how to create a responsive stylesheet using CSS3 media queries and choosing the right breakpoints. Now you just need to start making each section fluid by creating separate stylesheet for each section and then adding these styles to the correct breakpoints or ZONES. We have already discussed how to make header widgets responsive and now we will discuss ways to create a mobile stylesheet for Content area which includes your Blog Posts column and Sidebar Column. Lets get to work!

More

Mohammad 8/16/2015

How To Make Blogger Header Widgets Responsive?

Now when you are prepared with the core basics of how to use CSS3 Media Queries to design responsive blogger templates, its time to start with the header and then move towards content section, then sidebar and finally the footer. In default Blogspot Templates the Header consists of mostly two wide widget sections where the first section includes Blog Logo while the second section contains space for your Header Menu. In Custom templates the first Header widget section  is further divided into two sub-sections which floats to left and right sides. The left section contains your Blog Logo Image or Title/Description and the right section is often a HTML/JavaScript widget where you can add any advertisement banner or content you may like.

More

Mohammad 8/14/2015

Create a Mobile Responsive Multi-level Drop Down Menu

The biggest hurdle while creating a Fluid layout is to convert your Static header menu into a responsive one. You need to replace your wide desktop menu with an auto-adjusting mobile menu that must match your webpage color theme and should also contain enough room for both your Navigation links and Search Form. It thus can play a two-in-one role. Today we will create a jQuery menu with Toggle effect to slide up and slide down the Link list. The Menu container will also contain a search functionality and will support nesting of as many child lists as you wish to create. Our previously shared Responsive menu lacked few features which we have covered in this menu. It is therefore an advanced Multi-level Drop Down menu with several important features which are:

More

Mohammad 7/28/2015

Hide HTML in Mobile Devices For Blogspot without using 'Display:none' - [1]

After Google's Mobile Friendly Update Algorithm which was rolled out on April 21, 2015. Many webmasters have seen a slight drop in their mobile traffic and they have now understood the importance of not just Mobile Friendly Web layouts but also templates that must load fast because mobile browsers are quite slow in rendering a webpage due to slow 3G or cellular network. Website Page Speed is an important Search engine metric to rank websites and it is really important that your Responsive and fluid layouts may serve content to visitors as fast as possible. Since People are new to creating Responsive Blogger templates, they often misuse some standards which can cause them a serious SEO blow in coming updates if not taken care of. One of such mistakes that I found on many freely available blogspot templates was the extensive use of CSS "Display:none" property for hiding Menu Links, Widgets and Columns. Read below to understand Why I believe use of Display:none is neither a good Design Approach and neither a SEO friendly method.

More

Mohammad 7/10/2015

Defining Device Breakpoints for Blogspot Templates

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. 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 be made fluid and responsive, where text should be readable without tapping or zooming, tap targets are spaced appropriately and the page avoids unplayable content or horizontal scrolling.

More

Mohammad 7/04/2015

Design a Responsive Blogger Template - Tutorial

Designing 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. While there are security risks with using wireless connections, the rise of home VPN router technology negates a lot of this risk. Which is now widely used by visitors to your site, thus providing faster and secure browsing experience.

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.

More

Mohammad 7/04/2015

How I use Google Chrome To Design Blogger Templates?

Google Chrome has excellent capability of allowing you to see how your design looks by adjusting the settings live. You can redesign or edit the style sheet of any website your wish using Chrome. While designing a template, one of the things that takes much time is alignment of objects on a div section. The margin and padding property can be a headache if you are not habitual with tools such as Chrome. I normally use MBT HTML Editor to design widgets but just few weeks ago I have started enjoying using chrome for my design projects. I will share some basics here that you can learn in order to better align and style elements on your blog. You can also investigate what CSS properties like font type and effects a site is using.  All this is done using the Developer Tool provided by Google Chrome. Which lets you to edit CSS, HTML and Scripts of any website online. I am sure you will enjoy this tutorial. Follow up.

More

Mohammad 12/27/2011