Showing posts with label Mobile. Show all posts

Thursday, June 13, 2013

Why enabling a mobile template just became more important to some bloggers

This QuickTip explains some recent announcements from Google about SEO and mobile devices, and what they mean for Blogger users.

If SEO matters for your blog, and your blog is relevant for users with moble devices, then you pretty much need to enable a mobile template.

Why? In short, because this recent post from Webmaster Central says that for Google the ranking of search results on mobile devices is now impacted by how well sites are optimized for mobile devices.

This means that if you haven't set up your blog for mobile, then it won't come up so highly in the search results seen by mobile users.

As well as the template, there are a range of other factors that affect how well your site works for mobile. Blogger users cannot control a lot of them, though we can think about:

Page load speed
Using the Pages gadget as the top menu bar, rather than a linked-list or labels gadget, - because it converts into a drop-down menu in when a mobile template is applied.

Also, remember that if you make a home-page using a custom re-direct, this will only work in your desktop version. The re-direct isn't applied for mobile viewers, they just see your most recent posts in mobile-friendly tiles.

Thursday, November 22, 2012

Blog home-pages and mobile-templates: Do they work together?

This article discusses the issues of giving your blog a home page, and how this works for people using mobile devices.

Previously I've described the options for giving your blog a "home page", and also how and why to enable a mobile template for your blog.

The home page (aka landing page) issue was a challenge with no good solution for a long time - until someone cleverer than me spotted the potential offered by the custom-redirect feature. With this, you can put the content for a "home page" into a post or page, and then redirect your blog's "landing page URL" (www.yourBlog.blogspot.com) to it.

However, I have found that if you have enabled a mobile template for your blog, then this approach does not work for visitors using mobile devices.

Instead of the home page that non-mobile visitors see, mobile-using visitors are shown a mobile-specific page with:

Your header,
The page gadget (if you've used one - it's not used in this example) as a drop-down list
A list of tiles - one post each (more about these below)
An older posts / home / newer posts navigation tool
A link to view the web-version
A mobile attribution gadget (unless you've removed it)
An AdSense ad-unit, if you have put AdSense into your blog using the AdSense gadget(*).

There may be some different things too, if you have chosen the "custom" mobile template option and added other gadgets to be shown on mobile.

But a key point is that any home-page custom-redirect that you have set up does not work - even though other custom-redirects (ie not involving your home page) do work.

(*) The rules for whether this is shown or not are actually a little more complex - but that's a topic for another day!

What do mobile users see on their post-tiles.

The landing page for a mobile user includes a vertical "tiled" list of posts.

In this, each tile has:

The date and post title,
The post-thumbnail photo and
The first few words for the post (less than the whole snippet though) for a post.

They are sorted by descending-date - meaning that your most recent post is at the top of the list.

The applies if you are using a standard (ie designer) or custom mobile template.

The recently-introduced dynamic mobile template is different again - in it, the tiled post looks more like the "before the jump" summary shown on your regular blog - but even so, it is still a list of posts sorted in reverse-date order, not a custom home-page.

What this means for bloggers who care about their home page

There are main things that you need to think about:

Using a mobile template gives you far less control over your mobile landing page - although it can be set up to work well if you understand how it operates, and if you don't mind your blog looking like a blog, not a webpage..

If you have a mobile template enabled, and you want mobile visitors to your blog to always see one post first, then you need to make sure that this post always has the most recent post-date.

With a non-dynamic mobile template enabled, visitors won't see whole posts or before the jump post-summaries initially: instead they see even more abbreviated summary tiles.

With a dynamic mobile template enabled, visitors will see post-tiles that are more like the post-summary from the main blog (even if it's using a non-dynamic template) - but they still won't see your custom landing page.

If you are not happy with mobile visitors to your blog being shown a tiled-list of posts, then you should not enable a mobile template - and you should disable it if you've already enabled one

This will mean that people using a mobile device to look at your blog will see a full-featured version, that they will most likely have to scroll around to view, ie they won't see the whole screen at one glance. Though this sounds painful, in two of my blogs, I've decided that this is actually the best approach.

Enabling a mobile template for Blogger

Deleting "Powered by Blogger" from mobile-template blogs

Making one post always come up first

How to give your blog a fixed landing page

Understanding post.thumbnail and post.snippet

Using Blogger to build a "real" website

Tuesday, September 18, 2012

Desktop search turns a downward corner?

This Quick-Tip shares an interesting observation about the trends in search-volumes - and is a reminder to think about what your blog is like for readers who use mobile devices.

Today I noticed an interesting post from on-line marketing firm Blind Five Year Old, who've been tracking comScore search-engine ratings for seven years.

comScore's ratings are all about relative market share of the search-engines.

But BFYO has used them to look at overall search engine volumes and has noticed that

August 2012 was the first time that US desktop search volume declined year-on-year

This means that there were less desktop searches (in the USA) in August 12 than there were in August 11. Year-on-year comparisons are often better than monthly ones because they can cancel out the effects of seasonal patterns (holidays, starting school, major events, etc)

Now this doesn't mean that people have stopped doing more searching than before. Most likely it means that they've started to do more of their searching on mobile devices (tablets, smartphones, etc).

For Blogger users, it means that:

If your blog depends on search to get readers (or even just new readers)
and
Your blog topic is one that people will search for using a mobile device
then
You need to think about how how your blog looks and works on mobile devices, and most probably to enable a mobile-template for it.

This doesn't apply to everyone. For example, Blogger is primarily desktop software, so I'm not really worried about the mobile experience given by Blogger-Hints-and-Tips. But my public-transport blog now gets about 25% of its visitors from mobile devices - and I think this will grow. So it matters there.

Even if you don't think that your blog would have "mobile-appeal" or appear in local search results - don't forget that many people now like to catch up on reading using their smartphone in in-between moments. If your blog is "a good read" rather than desktop-specific reference information, then being mobile-friendly might be the difference between whether people subscribe to you or not.

Mobile templates, by the way, are fantastic because they let Blogger-users deliver sites that are responsive with far less effort than owners of conventional websites are having to put in.

Wednesday, May 9, 2012

How to enable a mobile template in Blogger

This article explains why mobile mattes for some blogs (but not all), what tools Blogger has provided to help with this, and how to set up a mobile template for your blog.

Blogger and Mobile - do you need to care?

By default, when someone uses a smartphone, tablet or other mobile device to look at your blog, they see the "full site" just like they would if they were using a PC. The pages aren't set up to work well on their small screen, but they have access to all the features and gadgets you've installed.

In some cases, this is fine. For example, the last time I looked at the statistics for this site, hardly any of the visitors were mobile. This makes sense - people wanting to find out how to do things in Blogger are probably using the full Blogger software at the time.

But for other blogs, especially ones that have maps and other location-information or which people read on the go, having a mobile-friendly template is very important: for example, on my public-transport blog, over 25% of visitors are using mobile, and that figure is growing. Making my site work well for these visitors is definitely important for its long-term future (and my short term advertising revenue!)

What's available

Blogger have made a set of mobile templates, to match the standard Designer Templates, and so far only one to match the Dynamic template.

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

But we can add and remove gadgets, and also by choosing a custom template get colour settings that match our main blog.

How to make your blog use a mobile template

Log in to Blogger using an account with administrator rights to the blog.

Go to the Template tab.

If your blog has a Designer or Dynamic template, then there will be a Mobile option to the right of the "Live on Blog" area.

If the blog is not set up to use a mobile template,then the word Disabled will be in the middle of the picture area - although it may be hard to read if your base template (chosen in the Live on Blog area) has a picture behind it.

Click on the gear-wheel underneath the picture to see the mobile options.

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

Either leave the mobile template on Default, or select one of the other options.

If you choose Default, your mobile template will use the standard template matching your desktop template.
If you choose Custom, your mobile template will use the colour-scheme and various features from your desktop template, and you will be able to makes changes to these settings.

Use the Preview button if you want to see what your blog will look like with the selected template on a mobile device.

When you are happy with your selection, press Save.

What your readers see

Visitors to your blog who are using a desktop PC (or laptop or netbook or any other machine with a full-size screen) won't see anything different.

Readers who are using an internet-enabled cellphone (ie smartphone), tablet, iPad, etc will see a different view:

They won't have a sidebar
The gadgets will be limited (unless you add some extra ones) and in the header and footer only
On the home-page there will just be the title, thumbnail and snippet for each post, and a button for read-more (this is irrespective of where you've put the jump-break) - notice that the usual methods of giving your blog a home-page don't always work.
Custom styles that you have added to the template may not be applied (this has happened on one blog where I use styles, I'm still investigating whether it's a feature of all mobile templates, or just due to the way I added these particular styles).
There will be buttons at the bottom of the page for Home, < and > . I think that the latter two refer to older and newer posts (though possible they are the opposite way around from what I expect).
There will be a link to "view web version", which lets your visitor switch to to see the blog using the desktop template.

I have a feeling that there may be some other differences too - very keen to hear about any others you've spotted.

Seeing what your mobile readers see

The absolute best way that I've found to accurately experience my blogs as mobile visitors see them is to use a mobile device myself:

Just like preview mode in the Post-editor, the mobile-template preview mode shows a "look and feel" view, which is not entirely accurate. For example in the picture above, it shows part of the most-recent article insteaod of just the post title and mini-snippet that I see when I look at the site on my phone.
The screen-size testers that I've tried out (ie software tools that mimic showing your website in various different screeen sizes) don't actually use the mobile template - I suspect that this is due to the way that Blogger detects mobile devices.

However you can see any blog as it would be on a mobile device by appending /?m=1 to the end of the URL.

For example, to see this blog in mobile, I would look at http://blogger-hints-and-tips.blogspot.com/?m=1

If you're going to use this approach, it's best to re-size your browser window so that it's about 300px wide - from my netbook, that's about 1/3 of the screen size, but it would be less from machiens with bigger screens.

I'm very interested in suggestions about any other tools that give a reliable mobile-experience view without actually having to use a smartphone.

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

Tuesday, May 1, 2012

Adding gadgets to your mobile-template makes your blog better for smartphone visitors

This article shows how to add gadgets to the mobile version of your blogger template.

Gadgets and mobile templates

Previously I've described how to add a gadget to your blog.

If you have not enabled a mobile template for your blog, then visitors who look at it using a mobile device (smartphone, tablet etc) will see all your content and gadgets. But they will probably have to scroll left and right a lot, because your blog will be a lot wider than their screen. There might be some issues if you have gadgets that require javascript or particular media players, which their device doesn't have installed. But these are exactly the same as the issues for your visitors who are using desktop computers.

But if you have enabled a mobile template, then readers who are using a mobile device see a different design which is tailored to their screen-width, though still using the colour/theme that you chose.

Blogger faced some challenged when they built these mobile templates: many bloggers put a lot of effort into design and providing gadgets that. But a 300-ish pixel screen simply does not have room for a sidebar and blog content, and may not have space for some of the things that gadgets do, either.

What Blogger have done is to say that only some gadgets are normally shown on mobile-template versions of your blog:

Header
Blog Posts
Profile
Pages
AdSense
Attribution

However it's easy to add other gadgets to your own customized mobile template, and to set up gadgets that are only seen by readers using mobile-devices - provided you are willing to take the risks of editing your template.

(I've described how to remove the attribution gadget from mobile-templates before, because it's one that some people particularly hate - and of course the same approach can be used for the other standard gadgets too.)

How to add a gadget to the mobile template

First, check that mobile has been enabled for your blog, and that your mobile template is set up to show customizations: go to the Template tab, click on the gear-wheel under mobile, tick Yes (for show mobile template), then select Custom, and press the Save button.

Add the gadget to your blog, in the usual way: when you are choosing the parameters, make sure you think about the amount of screen-space that your mobile-readers will have to see it.

Find the gadget ID.

Edit your template: you don't need to expand the widgets.

Locate the gadget code, by searching for the ID you found (tip: use your brower's search function, eg ctrl/F). It will look something like this (slightly different, of course, if the gadget you are working on is of a different type):

<b:widget id='PlusBadge1' locked='false' title='Google+ Badge' type='PlusBadge'/>

To show the gadget on the mobile version of your blog, add mobile='yes' to the code, like this:

<b:widget id='PlusBadge1' locked='false' mobile='yes' title='Google+ Badge' type='PlusBadge'/>

To show the gadget only on the mobile template and not to desktop users, add mobile='only' to the code, like this:

<b:widget id='PlusBadge1' locked='false' mobile='only' title='Google+ Badge' type='PlusBadge'/>

Save the changes.

Use either a mobile device (ideally), or another tool that lets you test blogs as they would appear on different screen sizes, to check that the gadgets are showing as you think they should.

What gadgets should you add to your mobile template?

There are no hard-and-fast rules here: it's all about what you want your mobile visitors to be able to access. I have seen people add blog-rolls, linked-lists, polls, profiles, and various other simple widgets.

Gadgets that I think could be more troublesome are slideshows, popular posts (if you try to show a thumbnail), newsreel, subscriptions, gadgets from Amazon.com and other 3rd parties.

You just need to remember amount of screen space which your visitors have, and how large the images are likely to be for them. And also that gadgets are likely to be shown as the bottom of the list-of-posts (which is how the blog-posts gadget shows the home page of your mobile blog), so won't be nearly so obvious as they are in the sidebar.

Why put gadgets only in the mobile blog?

You may wonder why a gadget should only go on the mobile version.

One reason is to provide a simpler alternative to a full-featured gadget that is shown on the non-mobile version of the blog. For example, I use a two-page google-custom-search option here on Blogger-Hints-and-tips. This lets me control what sites are searched, and use some advanced display features. But a mobile-sized screen won't cope with this. So if I wanted to make Blogger-HAT more mobile-friendly, I'd add a regular search-gadget, but only show it to on mobile-devices so that non-mobile visitors didn't get confused.

Positioning gadgets on the mobile template

As far as I can see, we do not easily have any control over the positioning of gadgets in the mobile-template versions of our blogs.

Some experiments make me think that:

gadgets from the header in the regular layout are put above the list of posts in the mobile view
gadgets from the footer in the regular layout are put below the list of posts in the mobile view
gadgets from the sidebar in the regular layout are put below the list of posts in the mobile view

But there could be more going on here - please let me know if you've worked out any more rules that are applied.

Also, I have no idea how mobile templates will cope with tricks like gadgets that are put above your header: test your blog extra carefully if you've tweaked your template in this way before adding mobile-specific tweaks.

Troubleshooting

Stopping gadgets from showing on mobile-template blogs (ie adding mobile='no') does not require you to choose the Custom option from the list of mobile template. But adding them (except for the ones in the default list) does.

The default mobile gadgets are only shown if you have put them onto your blog template: if they are not in your blog at the moment, then they will not automatically be shown just because you enable a mobile template.

What other problems have you had with mobile-templates?

Friday, April 20, 2012

Removing the attribution gadget from mobile template blogs

This article is about removing the "Powered by Blogger" statement from the bottom of blogs that have a mobile template.

Blogger and attribution gadgets.

Picture of a cellphone with "Powered by Blogger" taking up screen space

Previously I've described the attribution gadget that Blogger has added to blogs with designer templates, and various ways of removing it.

This was a real game of cat-and-mouse: I found a way to delete the gadget, Blogger's engineers put in code to add it back in again if you removed it using that method. But eventually I found some methods that haven't stopped working - or maybe Google saw the logic in my arguments and gave up trying.

(For the record, I show the gadget on most of my blogs, but really didn't want it on one particular blog that is really powered by Google custom Maps: Blogger is just a nice wrapper around the custom maps that it shows.)

Now a reader has asked about getting rid of the attribution from a blog that uses a mobile template. This is easy provided you accept the risks of editing your template.

How to remove the attribution from a mobile template:

Edit your template in the usual way - you don't need to expand the widget templates.

Use the browser search tool to find this statement:

<b:widget id='Attribution1' locked='true' mobile='yes' title='' type='Attribution'/>

The number after the word "attribution" may be different, if you've tried several other ways to remove the "powered by Blogger" statement. This doesn't matter - just make sure the same number is used in the original statement and the replacement one.

Replace it with this statement

<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>

Save your template .

And that should be "job done".

It is a good idea to check what your blog looks like on a mobile device. If you find that this approach doesn't work for your blog, please leave a comment including your blog's URL - in case there are some conditions that I've missed.

Note: test so far make me thing that this setting is kept even if you change which mobile template your blog uses, and even if you switch off the mobile template and then switch it off again later.

blog