Tutorial: Home page

Showing posts with label Home page. Show all posts

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

<div dir="ltr" style="text-align: left;" trbidi="on">
<b>This article discusses the issues of giving your blog a home page, and how this works for people using mobile devices.</b> <br />
<br />
<div style="clear: both;">
</div>
<br />
<a href="https://draft.blogger.com/null" name="more"></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhotYtfKpDl4C6pa8NHEjVWtA8jYCuoI_m8PP-Kr61VQT5pI_jWx4l2qENtasb9C-SzbUagwRFfoucg7MSgmm0P-1XTH0S0JxpBlDfDDk9ozZjq1WO5Jdy8oloaV3od86PPQMMoPqeWeJZE/s517/blogger-home-page-mobile-template-custom-redirect-issues.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhotYtfKpDl4C6pa8NHEjVWtA8jYCuoI_m8PP-Kr61VQT5pI_jWx4l2qENtasb9C-SzbUagwRFfoucg7MSgmm0P-1XTH0S0JxpBlDfDDk9ozZjq1WO5Jdy8oloaV3od86PPQMMoPqeWeJZE/s320/blogger-home-page-mobile-template-custom-redirect-issues.png" width="320" /></a></div>
Previously I've described the <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/setting-what-goes-on-home-page.html">options for giving your blog a "home page"</a>, and also <a href="http://blogger-hints-and-tips.blogspot.com/2012/05/mobile-templates-for-blogger-and-why.html">how and why to enable a mobile template</a> for your blog.<br />
<br />
The home page (aka landing page) issue was a challenge with no good solution for a long time - until <a href="http://blogging.nitecruzr.net/2012/06/blogger-magic-static-home-page-improved.html" target="_blank">someone cleverer than me</a> 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.<br />
<br />
<br />
<div style="clear: both;">
</div>
However, I have found that <b>if you have enabled a mobile template</b> for your blog, <b>then this approach does not work for visitors using mobile devices</b>.<br />
<br />
Instead of the home page that non-mobile visitors see, mobile-using visitors are shown <b>a mobile-specific page</b> with:<br />
<ul>
<li>Your header,</li>
<li>The page gadget (if you've used one - it's not used in this example) as a drop-down list</li>
<li>A list of tiles - one post each (more about these below)</li>
<li>An older posts / home / newer posts  navigation tool</li>
<li>A link to view the web-version</li>
<li>A mobile attribution gadget (unless you've <a href="http://blogger-hints-and-tips.blogspot.com/2012/04/remove-attribution-from-mobile-template.html">removed it</a>)</li>
<li>An <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/setting-up-adsense-on-your-blog.html" target="_blank">AdSense</a> ad-unit, if you have put AdSense into your blog using the AdSense gadget(*).</li>
</ul>
<br />
<br />
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.<br />
<br />
But a key point is that <b>any home-page custom-redirect that you have set up does not work</b> - even though other custom-redirects (ie not involving your home page) do work.<br />
<br />
<br />
<br />
(*) The rules for whether this is shown or not are actually a little more complex - but that's a topic for another day!<br />
<div>
<br /></div>
<br />
<h2>
What do mobile users see on their post-tiles.</h2>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipZQGN8cE_Pk1prt6SyCjFCRwrVfu1xfDy3k6QvzjxxBTLLeEyNCc0R-4LZA0f_-uqsiLkdyFdenGwM3orO03TyPkYZnE16VJjgzMH8Et4hSJbEGrtcFI6c5d0IQJRwuRjHRwr47uvXJ4C/s460/mobile-template-tiled-home-page-content-example.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipZQGN8cE_Pk1prt6SyCjFCRwrVfu1xfDy3k6QvzjxxBTLLeEyNCc0R-4LZA0f_-uqsiLkdyFdenGwM3orO03TyPkYZnE16VJjgzMH8Et4hSJbEGrtcFI6c5d0IQJRwuRjHRwr47uvXJ4C/s320/mobile-template-tiled-home-page-content-example.png" width="218" /></a>The landing page for a mobile user includes a vertical "tiled" list of posts.<br />
<br />
 In this, <b>each tile</b> has:<br />
<ul>
<li>The date and post title,</li>
<li>The <a href="http://blogger-hints-and-tips.blogspot.com/2011/07/postsnippet-and-postthumbnail-tools-for.html">post-thumbnail photo</a> and</li>
<li>The first few words for the post (less than the whole snippet though) for a post.</li>
</ul>
<br />
They are sorted by descending-date - meaning that your <b>most recent post is at the top</b> of the list.<br />
<br />
The applies if  you are using a standard (ie designer) or custom mobile template. <br />
<br />
<div style="clear: both;">
</div>
The <a href="http://buzz.blogger.com/2012/08/dynamic-mobile-reading-experience.html" target="_blank">recently-introduced dynamic mobile template</a> 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.<br />
<br />
<br />
<h2>
What this means for bloggers who care about their home page</h2>
There are main things that you need to think about:<br />
<ul>
<li>Using a mobile template gives you <b>far less control</b> over your mobile landing page - although it can be set up to work well if you understand how it operates, and if <a href="http://blogger-hints-and-tips.blogspot.com/2012/11/use-blogger-to-make-a-website.html">you don't mind your blog looking like a blog</a>, not a webpage..</li>
</ul>
<ul>
<li>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 <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/making-one-post-always-come-up-first.html">make sure that this post always has the most recent post-date</a>.</li>
</ul>
<ul>
<li>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.</li>
</ul>
<ul>
<li>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.</li>
</ul>
<div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://upload.wikimedia.org/wikipedia/commons/b/b1/Gnome-emblem-important.svg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="http://upload.wikimedia.org/wikipedia/commons/b/b1/Gnome-emblem-important.svg" width="200" /></a></div>
<div>
<b><br /></b> <b>If you are not happy</b> with mobile visitors to your blog being shown a tiled-list of posts, then you should <b>not</b> enable a mobile template - and you should disable it if you've already enabled one</div>
<div>
<br /></div>
<div>
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.</div>
<br />
<br />
<br />
<hr />
<h2>
Related Articles:</h2>
<a href="http://blogger-hints-and-tips.blogspot.com/2012/05/mobile-templates-for-blogger-and-why.html">Enabling a mobile template for Blogger</a><br />
<br />
<a href="http://blogger-hints-and-tips.blogspot.com/2012/04/remove-attribution-from-mobile-template.html">Deleting "Powered by Blogger" from mobile-template blogs</a><br />
<br />
<a href="http://blogger-hints-and-tips.blogspot.com/2010/03/making-one-post-always-come-up-first.html">Making one post always come up first</a><br />
<br />
<a href="http://blogger-hints-and-tips.blogspot.com/2010/01/setting-what-goes-on-home-page.html">How to give your blog a fixed landing page</a><br />
<br />
<a href="http://blogger-hints-and-tips.blogspot.com/2011/07/postsnippet-and-postthumbnail-tools-for.html">Understanding post.thumbnail and post.snippet</a><br />
<br />
<a href="http://blogger-hints-and-tips.blogspot.com/2012/11/use-blogger-to-make-a-website.html">Using Blogger to build a "real" website</a></div>

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 ...