How to plow on a mobile subject / template for blogs inwards Blogger

This article explains why mobile mattes for some blogs (but non all), what tools Blogger has provided to assistance amongst this, too how to gear upwardly a mobile subject (aka template) for your blog.  It also links to Google's mobile testing tool, which shows you lot how your spider web log looks on a mobile device.



By default, when individual uses a smartphone, tablet or other mobile device to aspect at your blog, they run into the "full site" simply similar they would if they were using a PC.   The pages aren't gear upwardly to piece of occupation good on their pocket-size screen, but they convey access to all the features too gadgets you've installed.

In some cases, this is fine.  For example, when I kickoff wrote this article, I looked at the statistics for this site and hardly whatever of the visitors were mobile.   However now, a duo of years subsequently things convey changed too I've implemented a mobile subject for this blog.

But for other blogs, specially ones that convey maps too other location-information or which people read on the go, having a mobile-friendly subject is really important:   for example, on my public-transport blog, over 25% of visitors are using mobile, too that figure is growing.  Making my site piece of occupation good for these visitors is definitely of import for its long-term futurity (and my curt term advertising revenue!)


What's available

Blogger convey made a laid of mobile themes, to agree the measure Designer Themes, too thus far only i to agree the Dynamic theme(s).

We cannot command the layout of gadgets on these - when the shroud is only 300-ish pixels wide, there's non much room to move.

But nosotros tin dismiss add too take gadgets, too also past times choosing a custom template instruct colouring textile settings that agree our original blog.


How to enable a mobile subject / template for your blog

Log in to Blogger using an draw of piece of occupation concern human relationship amongst administrator rights to the blog.

Go to the Themes tab.

If your spider web log has a Designer or Dynamic theme, thus at that spot volition hold upwardly a Mobile option to the correct of the "Live on Blog" area.



If the spider web log is non gear upwardly to piece of occupation a mobile subject ,then the give-and-take Disabled will hold upwardly inwards the middle of the film expanse - although it may hold upwardly difficult to read if your base of operations template (chosen inwards the Live on Blog area) has a film behind it.

Click on the gear-wheel underneath the film to run into the mobile options.

Select "Yes.  Show mobile template on mobile devices."



Either move out the mobile template on Default, or select i of the other options.
  • If you lot lead Default, your mobile template volition piece of occupation the measure template matching your desktop template.
  • If you lot lead Custom, your mobile template volition piece of occupation the colour-scheme too diverse features from your desktop template, too you lot volition hold upwardly able to makes changes to these settings.

Use the Preview push if you lot desire to run into what your spider web log volition aspect similar amongst the selected template on a mobile device.

When you lot are happy amongst your selection, press Save.


What your readers see

Visitors to your spider web log who are using a desktop PC (or laptop or netbook or whatever other automobile amongst a full-size screen) won't run into anything different.

Readers who are using an internet-enabled cellular telephone (ie smartphone), tablet, iPad, etc volition run into a dissimilar view:
  • They won't convey a sidebar
  • The gadgets volition hold upwardly limited (unless you lot add together some extra ones) too inwards the header too footer only
  • On the home-page at that spot volition simply hold upwardly the title, thumbnail too snippet for each post, too a push for read-more (this is irrespective of where you've seat the jump-break) - notice that the green methods of giving your spider web log a home-page don't ever work.
  • Custom styles that you lot convey added to the template may non hold upwardly applied (this has happened on i spider web log where I piece of occupation styles, I'm all the same investigating whether it's a characteristic of all mobile templates, or simply due to the agency I added these detail styles).
  • There volition hold upwardly buttons at the bottom of the page for Home, <   too > .    I mean value that the latter 2 refer to older too newer posts (though possible they are the reverse agency around from what I expect).
  • There volition hold upwardly a link to "view spider web version", which lets your visitor switch to to run into the spider web log using the desktop template.

I convey a  feeling that at that spot may hold upwardly another differences also - really neat to postulate heed most any others you've spotted.


Seeing what your mobile readers see

The absolute best agency that I've institute to accurately experience my blogs every bit mobile visitors run into them is to piece of occupation a mobile device myself:
  • Just similar preview agency inwards the Post-editor, the mobile preview mode shows a "look too feel" view, which is non solely accurate.   For illustration inwards the film above, it shows business office of the most-recent article insteaod of simply the send service championship too mini-snippet that I run into when I aspect at the site on my phone.
  • The screen-size testers that I've tried out (ie software tools that mimic showing your website inwards diverse dissimilar shroud sizes) don't genuinely piece of occupation the mobile template - I suspect that this is due to the agency that Blogger detects mobile devices.

However you lot tin dismiss run into whatever spider web log every bit it would hold upwardly on a mobile device past times appending /?m=1 to the goal of the URL.    For example, to run into this spider web log inwards mobile, I would aspect at https://magictrikss.blogspot.com/?m=1      If you're going to piece of occupation this approach, it's best to re-size your browser window thus that it's most 300px broad - from my netbook, that's most 1/3 of the shroud size, but it would hold upwardly less from machiens amongst bigger screens.


Another approach is to piece of occupation Google's Mobile Friendly Testing tool, which will
... analyze a URL too study if the page has a mobile-friendly design.
As good every bit showing you lot how your spider web log looks, it also reports on whatever issues that convey been found.






Related Articles

Adding gadgets to your mobile template.

Removing the attribution from moblile blogs

Showing a Google custom map on your blog

Advertising programmes for websites

Types of Blogger template

Administrator rights to your blog

Popular posts from this blog

How to role Picasa-web-albums without beingness re-directed - August 2016 update

How to include the spider web log postal service description when you lot percentage on Facebook

Making mortal an writer on your blog