Blogger hosting blogs can be ultra fast on mobile devices unless we know that Blogger have strong native API that detects mobile devices and works accordingly. I cannot imagine how many users have seen "?m=1" or "?m=0" while surfing their blogs in mobile. 1 and 0 are representation weather site is on mobile template or not. Lets dig into it to get more familiar with what you may know.
Introduction & Setup
Web is filled with CSS3 responsive solutions, but making the site responsive is not only focused on re-sizing the stuff to fit in the screen but instead this topic is much more heated. A mobile site should be focused on several mind sets.
- Mobile data are slower than those of PC have.
- Mobile screen is smaller than PC.
- Images must not only smaller in dimension but in size too.
- Not all widgets and codes are necessary in mobile.
- Ads should be use effectively in order to get maximum revenue.
Then select Yes...
Click Save and in this way your Blogger mobile template is activated.
Mobile condition using b:if tag
Using mobile condition tag, you can target scripts to be loaded in mobile template. Mobile template is only activated when site detects the mobile devices and shocking point is that no script is necessary for that, Blogger itself detects and redirect the page with parameter as m=1. Now to mobile condition add the following code for it.
<b:if cond='data:blog.isMobile'>
<!-- Mobile Targeted Content Here-->
</b:if> <b:if cond='!data:blog.isMobile'>
<!-- Not Mobile Targeted Content Here-->
</b:if> Mobile Class
If you replace body opening tag with the following markup, you would be able to get a .mobile class in body whenever the mobile site is active.
<body expr:class='"loading" + data:blog.mobileClass'>.outer-wrapper{
width:60%;
float:left;
}
.mobile .outer-wrapper{
float:none;
width:100%;
}Widget Mobile Support
Widgets can be set with mobile attribute to show them on mobile template. You can control mobile view with mobile attribute on b:widget tag.
<b:widget class='footer-area' id='footer-area' mobile='yes'></b:widget> - Header
- Blog
- Profile
- PageList
- AdSense
- Attribution
- default (above listed 6 widgets have yes others have no)
- yes (Every kind of devices shows up)
- no (Non mobile devices only)
- only (mobile only)
Post A Comment:
0 comments: