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.
Therefore follow this interesting tutorial series in order to make sure you keep receiving traffic to your blogspot blogs from mobile phones and receive a Mobile-Friendly Label from Google.
What are Breakpoints?
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.
Suppose your Navigation Menu may look fine on a Laptop or Tablet but it may look broken, horizontally scrolling the page on a small hand phone set containing a width less than 480px. The Menu tabs may look misaligned or out of position. This is the time when you will need to specify a different custom Layout using CSS styles for your menu for the breakpoint 480px so that your menu may look just fine on small screen sizes. The browser will load that Menu styles (layout) only when the screen size of the device is less than 480px.
Done with theory now lets start converting your Blogspot template into a Responsive Template!
Disable Blogger Default Mobile Template
Since we are designing a custom responsive template for your blog therefore we don't need the Default Mobile View templates offered by blogger. It is important to disable it else you will not be able to see the custom mobile changes we will make in this tutorial series.
1 Go To Blogger > Template
2 Click the Gear Icon
3 Choose "No, Show desktop template on mobile devices"
4 Click Save
5 Next Click Edit HTML and search for this code if in case it exists in your template else ignore this step and follow step#6.
<b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>
Delete the code above if you found it.
6 Paste the following meta viewport code just below <head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
The code above gives information to the web browser about the screen size of the mobile device.
7 Save your template
Mobile Friendly Breakpoints For Blogspot blogs
Choosing the right breakpoints for any platform is the most complex task but it can be made quite easy if you apply the rule of KISS to it i.e. Keep it Simple Stupid!
We have defined below some of the most common Content Specific Device Breakpoints for blogspot blogs which respond quickly to changes in viewport. We will term it as the Responsive Cheat Sheet.
Note that we have used CSS3 Media Queries by Keeping Apple Devices as standard for simplicity but the breakpoints below cover all major brands like Samsung, Black berry, Nokia, Windows Phone, Kindle, Nexus and so on.
1 Go To Blogger > Template > Backup your template
2 Click Edit HTML
3 Search for ]]></b:skin> and paste the following CSS Code just below it:
<style>
/* ######## Responsive Cheat Sheet ########### */
/*-----iPhone 2G, 3G, 4, 4S Portrait View ZONE1 ----------*/
@media only screen and (max-width:320px) {
}
/*-----iPhone 2G, 3G, 4, 4S Landscape View ZONE2 ----------*/
@media only screen and (max-width:480px) {
}
/*-----iPhone 5,6 ZONE3 ----------*/
@media only screen and (max-width:568px) {
}
/*-----iPads, Tablets ZONE4 ----------*/
@media only screen and (max-width:768px) {
}
</style>
4 Save your template and you are almost done!
The above are the only breakpoints required to make any blogger template responsive. You don't need combined or separate breakpoints for landscape and portrait view. The above Cheat Sheet is enough to make everything work just fine!
How these breakpoints work?
The yellow highlighted regions above are viewport sizes that defines the CSS Styles for a particular screen size. The CSS styles for each screen size will be defined inside these viewports.
By max-width:480px we mean width less than or equal to 480px. Styles inside this breakpoint will load only when the screen size is less than or equal to 480px.
For example If you wish the Sidebar Column which has a CSS Class .sidebar and width 300px, to have a 100% width in a Mobile Phone then you will add its new width inside ZONE1 breakpoint (inside the curly braces) as shown below
/*-----iPhone 2G, 3G, 4, 4S Portrait View ZONE1 ----------*/
@media only screen and (max-width:320px) {
.sidebar {width:100%; overflow:hidden;}
}
That simple!
Note that none of the codes above will make your blog mobile friendly yet. The above guide is the skeleton/basic structure for a responsive layout. Your blog template will be fluid once you cover and follow all parts of this tutorial series.
Need Help?
Let us know if you need further clarification on any concept. I would love to answer all your questions posted in the comment form below. A lot more interesting parts are on its way. In our coming tutorials we will learn in detail how to insert the new responsive styles correctly inside the breakpoints specified above for different components/widgets of your blog. Make sure to Subscribe to our Email newsletter to ensure you don't miss any update.
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 »
Mohammad
7/04/2015
Responsive
Great Tutorial! Most Bloggers Don't Know About The Media Queries But After This Post Their Queries Will Be Solved! :)
ReplyDeleteAwesome article :)
ReplyDeleteMay Allah SWT reward you for your efforts, really helpful for newbies like me ...
ReplyDeleteMohammed Bhai
ReplyDeleteThanks for the tutorial. Tried these steps but not successful. I am sure that is is due to my lack of technical knowledge.
Can you please check my site and assist me what exactly I have to to do
http://www.munnartourguide.com/
Buddy as we mentioned "None of this code will make your blog responsive unless you follow all parts of the Tutorial once they are published" At the moment only read the parts for understanding but dont implement them unless we publish all parts. Subscribe for updates
DeleteCleared? :)
i didn't know what wrong with my breakpoint it show perfectly responsive for homepage and post in mobiletest but when tried my self on android my homepage look messed up not like in mobiletest
ReplyDelete"None of this code will make your blog responsive unless you follow all parts of the Tutorial once they are published Let us share the remaining parts especially Mobile Conditional Expressions without which things will always look messy :)
DeleteI can not make my responsive template? ; (
ReplyDeleteThank you so much ! very helpful :D
ReplyDeleteHi Mohammad,
ReplyDeleteI have one question. Are the above media queries only for iphone users? or these are for all the mobile user including Android or symbian phones?
Very useful, i tried this tutorial but when i open in chrome android still view desktop layout while chrome setup on mobile not on desktop but in uc browser good, what wrong on me
ReplyDelete