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.
UPDATE: isMobileRequest is applicable only to smartphone devices and it does not apply to tablets, iPads etc. Just a correction to this post.
For The record: This tutorial is introducing Blogger Mobile Conditional Expressions first time across the web. The Data variable below is not even listed in official Blogger Layouts Data Tags.
Why not use Display:none; in Responsive Templates?
Display:none; property can surely be applied to images, widgets, iframes or any Div section with minimum textual content. You can not hide an entire Navigation Menu in Mobile template which you do display in Desktop template because you wish to instead display a responsive menu in Mobile devices. The menu will only be hidden from Front End view but its HTML will still be rendered and search robots will still crawl each link. This can make robots suspicious and they can flag you for a Keyword stuffing activity.
More worse is the case when I see newbie designers hiding an entire content section with display:none. The content will still be visible to robots and they can penalize you for stuffing your page with unnecessary use of keywords.
Display:none also slows down the page because the script or HTML that you have hidden from front end view using CSS will still load and render in background thus eating up your precious Page Speed.
In Short Display:none is a Front end approach we need one that hides the content at Server Side.
Use Blogger Conditional Expression For Mobile Devices
Blogger Templates are built with XHTML which support a long list of Conditional expressions and Logic Operators that can help you better communicate with the server and format the UI using widget layout tags. One Such Data Tag is isMobileRequest which is a Globally Available Data which can be applied to any HTML DOM inside the template. isMobileRequest is a Boolean Data Type that accepts only two values which is either True or False.
Blogger adds a mobile parameter in Domain URL when the blog is visited using a Smartphone, Tablet, iPad or any mobile device. The mobile parameter works on a Boolean logic i.e. 0 or 1. If you visit mbt on a mobile device, you will see ?m=1 being appended to the URL in your address bar.
m=1 means that the device is a mobile device and m=0 would mean a desktop or Laptop. However by default ?m=0 is not appended to the URL tail in Desktop devices.
?m=x is detected by isMobileRequest which then tells the server that whether the device being used is a Mobile device or Desktop. We can use this request to hide or Show HTML content at server side which is not only just a SEO friendly approach but would also drastically improve your Mobile Page load time.
Google Has Given us a 100% Score for User Experience
This Magic Data Tag has helped us receive a 100/100 score on Google PageSpeed tool for MBT;
- The pageSpeed score is however 63 because of too many Advertising banners on our site which we can not remove by any cost.
How To Hide or Show HTML using isMobileRequest?
The Conditional expression has the following syntax which works on a Boolean Logic:
<b:if cond='data:blog.isMobileRequest == "true"'>
HTML To Show Only in Mobile Devices
</b:if>
The content inside the conditional expression above will load only in Mobile devices where the condition has value true due to the parameter ?m=1 where 1 means True.
If in case you wish to display a content only on desktop devices then you will reverse the logic in this order:
<b:if cond='data:blog.isMobileRequest == "false"'>
HTML To Show Only in Desktop Devices
</b:if>
As simple as that. Note that this condition works irrespective of whether or not you have enabled or disabled the default Blogger Mobile template. You can use it in both cases.
Need Help?
In Part#2 I will share in more detail on how to disable JavaScript and widgets in mobile themes using this logic. Stay tuned and do ask me as many questions as you may have. 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/10/2015
Responsive
But i don't get this coding <b:if cond='data:blog.isMobileRequest == "false"> in my blog.
ReplyDeleteyou need to add it. It is not present by default. Read part [2] of this tutorial
DeleteMine User Experience in 98%, please check my pagespeed graph and kindly let me know what are the changes should be done to get good rating..
ReplyDeleteLink: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.cineringtones.com%2F&tab=mobile
For pagespeed you need to block and disable scripts in mobile devices. Read part [2]
DeleteWhere can I read lists of blogger tag conditional and the explanation bro?
ReplyDeleteAoa Bro I hide some of my website parts for different mobile devices using css media queries and css tag display:none; , this trick is good but I have a question can we use it within media queries in the place of display:none; ?
ReplyDeletew.salam sis,
Deleteyes you can surely enclose your CSS media queries inside these tags. You can apply different mobile styles using this tags for sure.
Just write down your complete CSS code and then enclose it inside these tags. Add that code just above closing head tag
This was really informative. Actually, I was looking for these codes exactly!
ReplyDeleteOnce again...thanks. :)
always a pleasure buddy! :)
Deletethanks for this insightful post on mobile device.
ReplyDeletereally need to optimize our site for better performance.
can't wait for MBT further mobile tips!
Waiting to share all as soon as possible. :)
DeleteThanks for this information, awesome tricks :)
ReplyDeleteJust for fix the code above because that code error in edit html blogger, should writte like this:
<b:if cond='data:blog.isMobileRequest == "false"'>
thank you for the reminder adhy just fixed that :)
DeleteI dont fine in blogger template
ReplyDeleteWell I also get 100/100 user experience but the speed is very slow. it is 63/100
ReplyDeleteFor Blog speed you need toidisable scripts in mobile devices. Read part [2]
DeletePage Speed can not be optimized if you are running too many ads like MBT does because after all we can not sacrifice revenue too much for page speed :)
DeleteCan we use it with Javascripts?
ReplyDeleteyes sure you can, we have discussed it in part#2 please click here
DeleteAnd how not display on mobile and desktop?
ReplyDeleteIt is only possible with [ display:none] ?
where do i add this codes can you show me an example
ReplyDeletethanks
Amazing, Its working and the method used in html version is help to increase adsense revenue also.
ReplyDeletethis thing ruin my whole blog, that my custom widget I store my css is gone in which the blog template mess up..., second, after I put the code inside the cond, all I see in mobile is complete blank... this is so painful
ReplyDeleteHi okezumi,
DeleteThe above code is a simple condition, how can it ruin your whole blog buddy? Let me help you. Simply remove the codes and you are back to where you were. That simple! Why painful?
Hi Mohammed sir, this code doesn't seem to work for me...i have mobile template disabled and using it to display a image conditionally on mobile devices...if u can take a look at it (hope u dont consider it spam : blog url http://engineersevanigam.blogspot.com)
ReplyDeleteMohammad Mustafa Ahmedzai,
ReplyDeletemb you can chage your "In Short Display:none is a Front end approach we need one that hides the content at Server Side." above
to a better and clearer "In Short Display:none is a Front end approach. We need a better one that hides the content at Server Side."
Hi Mohammed,
ReplyDeletethis is an extremely important and informative post! Thx.
In your part #2 you gave examples with real codes inserted inside the conditional expressions. That is very helpful. Actual real examples always make everything visual, crystal clear and simpler to understand.
Could you pls do the same here? Pls give two or three examples. By replacing your text "HTML To Show Only in Desktop Devices" & "HTML To Show Only in Mobile Devices" with the actual codes.
Thx.
Hello. There, i just got penalize by google of sneaky redirect, but it only redirect to mobile versions, what is the problem, this google kept rejecting my reconsideration? Any idea
ReplyDeletethanks for the trick sir. You are my inspiration for blogging. Keep share more trics..
ReplyDeleteNow my blog www.jakbelajar.com can hide a menu in mobile view.
Code is working but what about table(7inchs) & other devices, i use
ReplyDelete......
Code is working but it hiding content from desktop/laptop too, only this one the last constrain...hope you help me....my blog address is https://maxtalent-jobs.blogspot.in/
This code hides page title on desktop only:
ReplyDeleteh3.post-title {display:none;}
What's the code to hide this page title on the phone only?
and
What's the code to hide page title on both desktops and phones pls?
Thx
PS. This comment app does not allow some tags, so I used with a space on purpose
The mobile parameter works on a Boolean logic i.e. 0 or 1. If you visit mbt on a mobile device, you will see ?m=1 being appended to the URL in your address bar.
ReplyDeleteAwesome! How about if you want it to show up both in mobile and desktop?
ReplyDelete