Monkey Raptor

Monday, December 29, 2014

Blogger: Some Things about ?m=1 Blogger Mobile View

There's the provided mobile view on Blogger.
Either you enable or disable the functionality, the default mobile view URL patterns are:
  • Your homepage: [yourblog_URL]/?m=1
  • Your post: [yourblog_URL]/2014/[month_integer]/[your-post-title].html?m=1
  • Your static page: [yourblog_URL]/p/[your-static_page-title].html?m=1
ETC.

Notice the parameter ?m=1? That's the Blogger mobile view parameter. Mobile mode is activated, sort of speak.
It will (automatically) work nicely on small screen devices if you enable the predefined mobile theme.

There's also ?m=0.
That's the desktop view of your Blogger blog. It's like your blog URL without any parameter, but plus additional default thingies. You can try that out yourself (if you're using template from Blogger).


Limitation
Since Blogger doesn't provide any method to tinker the default mobile view (the provided ones, not the custom option), there are limitations. Such as:
  1. The head and body sections of your Blogger blog will be automatically adjusted to have no other external resources (especially CSS frameworks and JavaScript libraries) but the ones provided by Blogger server.
  2. Which means, external link (CSS) and script (jQuery, for example) won't work if you placed them outside the post section (from Blogger HTML editor).
    If you placed them inside the post, they'll be pulled in, the external resources. They'll work "locally" on that particular post only. Like, being "sandbox"-end.
  3. We can't inject "anything" from within the post to the outer part. Like, dynamically adding CSS or script to the head or other part.
    Well, actually we can. But that'll be a weirdly inefficient method.
Anyway, there's the custom mobile template. You can try to start tinkering for mobile view with that option.


How to get the current post mobile view URL? (on desktop view)
There's a data tag for current post url, that is: <data:post.url />. That will return the current post URL without any parameter.
If we wanna use it (the value) in an HTML tag, we will need the Blogger special expression attribute (expr).
For instance:
<a expr:href='data:post.url'> Current Post URL </a>
That a (anchor, link) tag will point to the current post URL.

Now the mobile view URL
It can be done with this pattern (example for an anchor tag):
<a expr:href='data:post.url + &quot;?m=1&quot;'> Current Post Mobile View URL </a>
&quot; is the escaped character of quote sign (").
That will point to the current post URL, plus the parameter ?m=1.


We can disable the Blogger mobile view functionality
  1. Go to your Blogger Template
  2. Look for the Mobile section
  3. Click the gear icon beneath the mobile thumbnail, then choose: No. Show desktop template on mobile devices.

Or, using the custom mobile template
We can also use the custom mobile view option (not disabling the mobile view functionality). Then we need to reorganize the main desktop template to have lots of lots of CSS override for the mobile view.
By the power of Greyhound, I've tried it, the custom mobile view option didn't change the overall main template.
But because I had to work on two templates, and I'm not that detergent, so.


Closing
Creating a fluid responsive design is quite a tedious work I suppose, in general. In Blogger, we have to familiarize ourselves with the Blogger data tags, then continue to re-build something and such.
All in all, it depends on your enthusiasm for tinkering.

Well then, that is all.
Blogger: Some Things about ?m=1 Blogger Mobile View
http://monkeyraptor.johanpaul.net/2014/12/blogger-some-things-about-m1-blogger.html

No comments

Post a Comment

Tell me what you think...