The Mobilegeddon or the new algorithm of Google to rank a mobile friendly site is officially rolling out since April 21 2015. This new algorithm will affect search queries of mobile device and not for desktop and tablet device. So making our blogger template responsive is a call to action.
Applying the responsive design on our blogger template is not an easy task. We should know the basic of HTML and CSS to make things right on our blogger template. However, if you don't have any knowledge about HTML and CSS you can visit
www.w3schools.com which is a good site to learn basic to advanced web development.
I know most of us are aware about the importance of responsive design for SEO and for user’s experience. But did you know that most statistics project that the mobile web usage will soon take over the desktop usage? So let’s start making our blogger template responsive because it is a big deal.
Set the Viewport
The first thing we need to do in order to make our blogger template responsive is to set the viewport meta tag. By setting the viewport we are telling browsers that our blog knows how to format itself to any mobile devices. To set a correct viewport on our blogger template we need to add this meta tag
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> on the head of our template. The viewport meta tag above simply says that the width of the layout viewport should equal to the device width. We also set the initial scale to 1 to avoid some IOS device formatting issues.
Adding Viewport Meta Tag on Blogger
1. Go to Blogger Dashboard
2. Click the Template button
3. Go to Edit HTML and search this code <head>
4. Paste the given code bellow it
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Apply Fluid Layouts
One of the basic things we should do to make our blogger template responsive is the fluid layout. Fluid layout is a design than can adapt to different screen sizes. The typical example of Fluid Layout is when a user will turn his phone from portrait to landscape mode while maintaining the proportion of the elements on the page. Applying Fluid Layout includes using em and % as your unit of measurement instead of fix size (px). The blogger template is composed of different elements that need to adapt to different screen sizes, especially the font size, content-wrapper, sidebar-wrapper and the header-wrapper. To apply the fluid layout on these elements we should change the unit of measurement from px to em or %.
Following the example below the outer-wrapper is the parent of main-wrapper. If the width of main-wrapper is equal to 65% there for it will get the total 65% width of the parent. So now the main-wrapper has now the total width of 624px which is the 65% of 960px.
<style>
#outer-wrapper {width:960px; color: red}
#main-wrapper {width: 65%; color: green}
</style>
<div id="outer-wrapper">
<div id="main-wrapper">
</div>
</div>
Use Media Queries
There are many kinds of devices that people are using in surfing the web such as smart phones and tablet with different screen sizes. By using the Media Queries we can design our blog according to different screen sizes because each width of a device has a different best user experience to consider. Media Queries are really important for a responsive web design, and it also helps us to optimize a critical rendering path on our blog template.
I already provide a simple CSS Media Queries, you should put it after to this code
]]></b:skin> on your blogger template. Looking at the codes below, the max-width simply say that every device having less than or equal to max-width the browser will use the CSS inside the two brackets.
/* For Desktops and Laptops*/
@media only screen and (max-width : 1280px) {
/* If device width is less than or equal to 1280px */
}
/* For Tablets*/
@media only screen and (max-width : 1024px) {
}
/* For Small Tablets*/
@media only screen and (max-width : 768px) {
}
/*For iPhones */
@media only screen and (max-width : 640px) {
}
/* Mobiles */
@media only screen and (max-width : 480px) {
}
/* Small Mobiles */
@media only screen and (max-width : 320px) {
}
Tip 1: In coding your blog design in a specific Media Queries applying the Fluid Design is a must.
Tip 2: Try to use the Chrome developer tools in designing your blog. This post might be helpful Customizing Blogger Templates Using Chrome Developer Tools.
Tip 3: Open your blog on a mobile device to see what is the possible errors happening on your blog. You may use this site:
www.mobiletest.me to test your blog on different mobile devices then apply Tip #2.
Tip 4: Try to avoid making repeated CSS code. For example: in the Media Queries CSS in the max-width: 768px you have already set font-size:1.2em then you must not put again the same code to max-width: 480px. Always keep in mind the word max-width.
Show Widgets on Mobile View
Some widgets on our blog might be useful to mobile view so we need to consider showing them. By default, blogger is hiding widgets when our blog is viewed on a mobile device, but we can make them available to mobile view by adding attribute: mobile='yes' in <b:widget> tag.
To add this attribute simply go to your blogger dashboard->>Template->>Edit Template and find the ID of the widget you want to be available on mobile device then add the attribute
mobile='yes'.See the image below.
If you don’t know how to find the ID of your widget you can simply go to your
Blogger Dashboard->>
Layout and
edit the Gadget you want to get its ID. Then on the url part, just select the part of the address something similar to the image below.
Your Turn!
Responsive design is a huge topic, so I just hope you’ve learned something to this post about making your blogger template responsive. You probably encounter some problem when you start designing your blogger template for responsiveness, you can comment below to ask questions.
Thanks for reading this article now go build responsive template.
