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


Blogspot template with 100% Mobile User Experience

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.

Tutorial Series
3. Hiding Widgets & Scripts in Mobile Templates [1], [2]
7. Make Blog Sections Responsive: Header Widgets, Posts + Sidebar, Footer

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.

www.mybloggertricks.com/?m=1

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.

MBT has a 100% user Experience

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 :)

Need Quick Help within 24 Hours? ASK NOW



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 »

30 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. But i don't get this coding <b:if cond='data:blog.isMobileRequest == "false"> in my blog.

    ReplyDelete
    Replies
    1. you need to add it. It is not present by default. Read part [2] of this tutorial

      Delete
  2. Mine 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..

    Link: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.cineringtones.com%2F&tab=mobile

    ReplyDelete
    Replies
    1. For pagespeed you need to block and disable scripts in mobile devices. Read part [2]

      Delete
  3. Where can I read lists of blogger tag conditional and the explanation bro?

    ReplyDelete
  4. Aoa 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; ?

    ReplyDelete
    Replies
    1. w.salam sis,

      yes 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

      Delete
  5. This was really informative. Actually, I was looking for these codes exactly!

    Once again...thanks. :)

    ReplyDelete
  6. thanks for this insightful post on mobile device.
    really need to optimize our site for better performance.
    can't wait for MBT further mobile tips!

    ReplyDelete
  7. Thanks for this information, awesome tricks :)
    Just for fix the code above because that code error in edit html blogger, should writte like this:
    <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

    ReplyDelete
    Replies
    1. thank you for the reminder adhy just fixed that :)

      Delete
  8. I dont fine in blogger template

    ReplyDelete
  9. Well I also get 100/100 user experience but the speed is very slow. it is 63/100

    ReplyDelete
    Replies
    1. For Blog speed you need toidisable scripts in mobile devices. Read part [2]

      Delete
    2. Page 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 :)

      Delete
  10. Replies
    1. yes sure you can, we have discussed it in part#2 please click here

      Delete
  11. And how not display on mobile and desktop?
    It is only possible with [ display:none] ?

    ReplyDelete
  12. where do i add this codes can you show me an example
    thanks

    ReplyDelete
  13. Amazing, Its working and the method used in html version is help to increase adsense revenue also.

    ReplyDelete
  14. this 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

    ReplyDelete
    Replies
    1. Hi okezumi,

      The 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?

      Delete
  15. 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)

    ReplyDelete
  16. Mohammad Mustafa Ahmedzai,

    mb 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."

    ReplyDelete
  17. Hi Mohammed,

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

    ReplyDelete
  18. 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

    ReplyDelete
  19. thanks for the trick sir. You are my inspiration for blogging. Keep share more trics..
    Now my blog www.jakbelajar.com can hide a menu in mobile view.

    ReplyDelete