Force Blogger "Dynamic Views" to ignore mobile templates

Here is how to get desktop, non-mobile templates working on mobile view if you use Blogger's "Dynamic Views".

10wontips in "Mosaic" view on a mobile device

Background

Blogger's "Dynamic Views" templates can be very lovely and useful.  But previously, one limitation was that you were limited to using the "Classic" view for your mobile audience. This could be fine for some, but I suspect that the whole reason people would choose to use a Dynamic View template is to highlight more of their collection of posts, rather than just the newest. Using a Dynamic View on mobile, especially the "Mosaic" or "Flipcard" view, actually works quite well, as it is automatically responsive to the size of the screen.

It makes sense, then, to use these "dynamic views" (hence the name) on all screen-sizes. Sure, not every View looks great on a mobile screen, but some look and function fabulously. Just for an example, you can see here what the "Mosaic" view looks like for this blog on a 5-inch screen smartphone, in the Chrome browser for Android.

This has always been possible by appending the URL with a "/?m=0" suffix, forcing it to use the non-mobile template. But what if you want your visitors automatically directed to the non-mobile view when browsing on a mobile device?

Blogger supposedly gave you the option of disabling any special "mobile" by choosing "No. Show desktop template on mobile devices."

However, it was clear that this didn't work when using a Dynamic View template. It would only revert your blog to the "Classic" dynamic view for mobile viewers, no matter what view was applied to the "desktop" version.

Solution Intro

But don't worry. You can utilize these Dynamic Views even on mobile devices with a simple change to your blog's template code. There are basically three ways, and all involve editing basically one line of code. Go to your blog's template settings and choose "Edit HTML". Hit Control-F inside the code box and do a search for "MobileRequest". That should bring you right here to this section of code which we'll be using:

 <b:if cond='data:blog.isMobileRequest'>        <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/classic.js&quot;' type='text/javascript'/>      <b:else/>        <b:if cond='data:skin.vars.blitzview'>          <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/&quot; + data:skin.vars.blitzview + &quot;.js&quot;' type='text/javascript'/>        <b:else/>          <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/sidebar.js&quot;' type='text/javascript'/>        </b:if>      </b:if>

I list 4 methods below, but honestly, I think #4 the best choice. I'll keep the others here for your information, but hey, if you're busy, just scroll down to #4.

Method #1: Remove the mobile view option

One way to force the desktop view is to remove the code that checks to see if the blog is being accessed from a mobile device. In the code above, find and delete the colored lines.

 <b:if cond='data:blog.isMobileRequest'>        <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/classic.js&quot;' type='text/javascript'/>      <b:else/>        <b:if cond='data:skin.vars.blitzview'>          <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/&quot; + data:skin.vars.blitzview + &quot;.js&quot;' type='text/javascript'/>        <b:else/>          <script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/sidebar.js&quot;' type='text/javascript'/>        </b:if>      </b:if>

This will force the blog to use whatever Dynamic Template View has been set for the full "desktop" version. One problem, however, is that widgets/gadgets will be missing from the resulting mobile view.

Method #2: Customize the mobile view option

In the original code above, find this line:

<script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/classic.js&quot;' type='text/javascript'/>

Notice that it shows "classic" there. That's the code that's making the blog revert to the Dynamic Templates' "Classic" view when viewed on mobile. You can edit this to be any of the available Views: Classic, Flipcard, Mosaic, Magazine, Sidebar, Snapshot, or Timeslide. This is handy in case you want to use two different template views: one for desktop and a different one for mobile. The mobile template chooser in the Blogger GUI allowed that option only for standard templates, but this way you can do it with Dynamic Templates too.

One downside here is that it seems, again, widgets/gadgets won't show up.

Method #3: Redirect to the desktop view when accessing the mobile site

This is a bit of a nuclear option. In this method, we simply redirect all would-be mobile traffic to the blog's non-mobile, desktop home. For this, find the same part we just edited above:

<script expr:src='data:blog.dynamicViewsScriptSrc + &quot;/js/classic.js&quot;' type='text/javascript'/>

And change it to this:

<script> window.location=&quot;http://YOURBLOGNAME.blogspot.com/?m=0&quot;; </script>

This way, any visitor that lands on your blog's mobile site will be redirected to the "full" version. This also ensures normal widget/gadget operation. Hat tip to this post at Blogtimenow. The downside is that any mobile page view will redirect to the blog's non-mobile home. This can be a problem when, for example, someone on mobile follows a link to a specific post on your blog. They'll get the "mobile" redirect back to the blog's non-mobile home, and have to go find the post manually. Not ideal. 

Method #4: URL redirect to equivalent non-mobile page

This is the best method in my opinion. This will simply use the mobile-check feature like above, but if a mobile device is found, it will simply edit the page URL from m=1 to m=0, thereby taking you to the non-mobile version of that page.

 <b:if cond='data:blog.isMobileRequest'><script>var url = window.location.toString();window.location = url.replace(/m=1/, 'm=0');</script>

This gets around the problem of Method #3. Now, widgets/gadgets should continue to work, and any links to particular posts will stay in-tact and simply direct you to the desktop, non-mobile version of that post. Perfect! Huge hat-tip to Matt Ball over at Stack Overflow for this idea. 

Final Thoughts

Blogger's "Dynamic" Templates have a lot of amazing strengths. It's just too bad that Blogger built something so cool and then sort of left us to ourselves in modifying and editing them. Southern Speakers is a must-have resource if you use Dynamic Views. I do not, for this particular blog project at least, because of the widget/sidebar limitations. I just like the way this one looks :-) But for family blogs and/or project blogs, I prefer Dynamic Views. 

Good luck.