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.

---

Related Articles:

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

How to make a blog into a real website

This article explains how you can use Blogger to make a site that looks just like any other website and why you might, sometimes, want to do this.

Blogs vs Websites

Some people are very happy to use Blogger to make a blog, that is, website that looks like a diary or journal that they write in regularly.

But others aren't.   So a common question is "how to I make my blog into a real website, just like "someone" has done over at "this website"?

This isn't easy to answer:  Not everyone means the same thing when they say "real website".  "Someone" might have just changed the background image, installed a third-party theme, changed a few settings - or re-written the entire Blogger theme file!  They may have just made the blog look more professional than the basic themes do - or maybe they've removing all "blog" features so that the site is like a regular brochure website.

The bottom-line is that, even with no changes a blog is a "real website", because it's got:

• An url (www.your-blog-name.blogspot.com)
• A space on the internet that's dedicated just to it. (For Blogger users, that space is inside Google's servers - we don't have to pay for our own hosting).
• Web-pages, made in HTML, which visitors can look at using a web-browser (eg Internet Explorer, Firefox, Chrome, Safari, etc)

And there are some sites which are not at all ashamed to look like blogs, for example:

• www.IkeaHackers.net/ - a site for sharing clever ways of repurposing kitset furniture
• www.DarkRoastedBlend.com - a site about coffee - notice their About page is really just a post from 2005!
• www.HowAboutOrange.blogspot.com - a very stylish crafts website
• www.RUStling.org - a site listing all the songs in a large folk-song book
• www.TableQuizHelper.com - a site providing templates etc pub quiz-organizers
• http://www.trendmatcher.nl/ - a Dutch-language site about technology trends.

This article from Blogger Buster lists a 100 others - and I'm sure that there are plenty of popular non-English language sites that look like blogs, too.

But there are many other sites that have had some or all of their Blogger features hidden, for example

• www.GalwayTransport.info - a local public transport information site
• www.ConcentricsRestaurants.com/ - a promotional site for a company that builds restaurants
• www.RenewPilates.com - the site for a Pilates studio

You need to do more work to make the second type of site - and even then, if a knowledgeable visitor looks at the source-code for a page, they can still tell that you're using Blogger.   So, usually, I'd recommend that you focus on what you want to achieve with the site, rather than "getting rid of blogger".

That said, here is a lit of things that you may want to to do to "turn your blog into a website".   They are in, roughly, the order that I recommend doing them to have the maximum effect.

Initial steps to reduce the "bloggy" feeling

1)   Get a custom domain

This is a website address like  www.mySite.com  or  www.yourBlog.org - or whatever available name that you choose.

Using a custom domain means that your address will not have "blogspot.com" in it.

You can do this either:

• Using Blogger's  Settings > Basic > Blog Address > Add a Custom Domain function, or 
• By using an URL that you buy directly from a domain registrar - you might need to do this if the address you want isn't available through the Blogger function (eg I recently needed a co.nz address for a site) or if you do not have a credit card.

This step is essential if you don't want the site to be perceived as blog, because the address is what people see when they first find the site in search-engine results.

If you are going to get a custom-domain, then I strongly recommend doing it at the very beginning of setting up your blog, so all the later steps are based on the custom-domain name rather than re-directions.  This is is A Good Thing for SEO - and even if SEO doesn't matter for your blog initially it may become important later on.


2)    Turn off the navBar, and remove the space where it used to be


3)   Show only 1 post on the main page.


4)   Hide the "blog-specific" values from posts, on the Layout > Blog post (edit) tab.  

At a minimum the things to turn off are:

• Post-date
• Posted-by
• Post-time
• Comments
• Links to this post
• Labels
• Reactions
• Email post links
• Post sharing

5)    Make a home page - ideally using the custom-redirect option


6)    Remove the attribution gadget (the bit where it says "Powered by Blogger")


7)    Remove the "subscribe to posts (atom)" link


8)    Add an RSS-subscription gadget using Feedburner.
Some people say this is optional - but I believe that all "proper" websites offer an RSS feed and show that they do so by using a feedburner-style RSS chiclet.   If you just add Blogger's Subscribe gadget instead, it gives the Atom - ie blog-style feed.

Banishing the Blogger look for good

These next steps really go together: if you do one, you need to do the others too. They are needed if you totally want to remove the blog-ish-ness:


9)     Remove all gadgets that show a list of posts. These include the Archive, Labels.  This is simply the reverse of the add-a-gadget procedure - edit the existing gadget, and click Remove.


10)   Remove the "older posts / home / newer posts" links.

11)   Set up your own navigation system: every post or page needs to be able to be accessed from either a button or a link that is in either a gadget or another post/page.

It's temping to think about navigation from the home page. But first-time visitors who come to your site from search-results will not arrive at the home page. They might not even think to look at the home page. Ideally your navigation system should offer several routes to get to every piece of information, and should include both logical links between posts and a search-based option.

Tools that you might use to help with this:

• Summary posts, with links to detail pages about the topic. (Eg my public-transport site has a "city buses details" page, which links to individual route maps)
• A menu bar with links to the most-important summary posts.
  NB  If you use the Pages gadget for this, it is automatically included if you give the site a mobile theme which is an important step if you want the site to be responsive.
• Linked-List gadgets to show summary posts, or lists of related detail posts, in the sidebar or footer.

An alternative to your own navigation system is to use categories to put your posts into pages. This doesn't fully reduce the bloggy feeling, since someone who looks at a page sees a list of posts (with just post-summaries if you've used jump-links).   However changing the the status message (the grey box that says "showing all posts with label whatever") can make this acceptable in some sites (ie ones where the line between blog and website is blurred).

What you (currently) cannot do

You cannot remove the post-date values from the URL of blog posts.
If your entire site could be done with 20 or fewer screens, you could use Pages for everything - but IMHO this isn't necessary, visitors don't seem to be overly spooked by URLs with numbers in them.

You cannot use a dynamic theme 
If you want your site to look like a website, not a blog: you need to use a Designer, or possibly a Layout, theme.

Other things that you might do

You might want your blog tostand out in the seach results in order to get more visitors - see Getting Started with SEO.

You might want to link it to the social networks - remember that there are wide range of possible links, and you need a strategy about how the site relates to each social medium that you use.

Have I missed anything?

I wrote this article  while I was setting up a site on which I want to minimise the "blog" look-and-feel, and I've tried to capture all the steps that I did.  

But maybe I've missed some things?   Maybe there are features that work differently on other themes.

What else would you do?

Using an URL from domainDiscount24 for a blog

This article shows Blogger users, who have purchased a domain through Google Apps using domainDiscount24 (dd24.com), how to set up the 2nd CNAME statement that is needed by  Blogger's custom-domain verification step. 

Most of the information also applies to any who purchased a domain from Key Systems / DomainDiscount24 / dd24 and wants to use it for a Blogger blog.

Why buy a custom domain from Google Apps

A while ago, I noted that Google Apps now provide the ability to buy a range of domains not available via Blogger - for example co.nz (New Zealand), .com.es (Spain), .in (India), .de (Germany) -and many more.

Although they advertising that pricing is "from $US8", when I finally used Apps to buy my co.nz domain, the actual cost was $US20. C'est la vie.   And besides, anything to make the setup-process easier is welcome - and this is a feature of domains purchased using Google Apps.

One good thing that I noticed about buying a domain via Apps is that you set up a domain-administrator account as part of the process.  Though it's a bit more "technical" than many Bloggers are used to, it's better to have the admin account set up to start with, instead of having to try to find it when you want to check the settings, access the email that comes with your domain, or use the URL for some other type of website.

Also, after the domain administrator account was set up, the details for logging on to my registrar account were emailed to me.   This is a nice touch - it's possible to get the details from the domain-administrator account, but having them at hand during the setup process was handy.

What happens when you buy a domain through Google Apps for your blog

Google are partnering with several domain registrars for domains registered via Apps, and my one came from domainDiscount24 (dd24.com) - which is actually the brand-name of a German company called Key Systems.   I was a little concerned at first, about whether this would work with Blogger - but my fears were soon put to rest.

Once you have purchased a domain through Google Apps, the domain settings that are automatically configured for you are aimed at having the domain used with Google Sites.
(Does anyone actually build websites using Sites? I'm reluctant to, out of concern that Google are going to "spring clean" it out of existence!)

This isn't exactly what you need, but it's a good start:

• The CNAME for the www "sub-domain" was pointed to  ghs.google.com - which is what Blogger needs.
• The ANAME records that were set up had the correct values, as per Blogger's requirements.

So the only challenge is setting up the second CNAME record that is now part of the security verification for switching to a custom domain.

How to set up a 2nd CNAME record for a domain from domainDiscount24

In domainDicsount24 term, this is done by creating another sub-domain that is named after the host-value from Blogger's instrutions, and giving it a txt record with the 2nd value.
(NB  I think that technically  you are not actually creating a "real" subdomain - but that's the phrase that DD24 used to describe what needs to be done.)

Follow these steps

1   Log on to the dd24.com website with the account information (get this from the Google Apps> Domains> Advanced Settings tab - or from the email that they sent you after you set up the administrator account.)

2  Click on the domain name

3  In the upper right is a drop down menu where you can access and create all sub-domains for your domain name (I was using a netbook so had to scroll to see it)

4  Choose Create New Subdomain from this menu,

5  Enter the "Name, Label or Host" field value from Blogger.  
(See Using a domain purchased from another registrar if you're unsure where to get this information from Blogger - remember that it's specific to your blog, and each pair of values is valid for around 24 hours.)

6  Click Create Subdomain.

7  In the window that opens, specify the settings:

• Put the "Destination, Target or Point to" value from Blogger into the field called CName.
• Under DNS settings, leave Source set to "Not in use"
• Under Mail settings, leave Source set to "Not in use"

8  Save the dns settings, by clicking Verify Changes.


Job done - at this point, your second CNAME has been created, and you can log out from the domainDiscount24 site and go back to Blogger to continue he custom domain setup there, as described in Using a domain purchased from another registrar.

domainDiscount24 warn that, as always, may take several hours until DNS changes take effect - however recently I was able to re-direct my blog to the custom domain within Blogger almost immediately.

The only additional step that I needed to do was use the Apps dashboard to make the web-address work without having www at the front (Blogger has this option to tick, but it appeared not to be working.)

And I was pleased to notice that, after the domain purchase had verified properly, I did not have to enable  accounts from my custom domain to use Blogger - it was turned on by default.   (This didn't happen immediately, there was a time delay while the Google Apps purchase was verified.   But it did work eventually).

About domainDiscount24

Of course I didn't work this out myself - I had to get help from domainDiscount24 to figure out how to do the 2nd CNAME record, since the word "cname" wasn't on the front of the domain management tool for my domain.

They don't seem to have on-line help articles.

But when I clicked their Help button:

• I was sent to a nice web-form where I could submit my question. 
• An answer arrived within 3-4 hours (even though I'd sent my query at 1am, German time).
• The answer was correct - and it showed that they clearly understood the question, had checked what was set up so far.

So overall, I'm a happy customer, and now I just need to work on building my new site.

And I think I'll keep domainDiscount24 in mind if I'm looking to buy more domains in the future, including some of the ones that Google Apps doesn't provide access to as yet.

---

Related Articles

Google Apps now provide the ability to buy a range of domains not available via Blogger

Using a domain from another registrar for your blog

Making custom domains work without having www at the front

Allowing custom domain users to access Google's Blogger - the website making tool for the rest of us

Simpler - but more limited - AdSense sign-up for Blogger users

This quick tip describes an announcement from Google about an upcoming simplified process for applying to use AdSense on Blogger or Hubpages.

New simpler AdSense application process

Google AdSense have announced that from today there is a change the application process for new publishers who apply to use AdSense through a "host partner site". Currently Blogger and Hubpages are AdSense's "host partner sites" - meaning ones where the "host" provides internet space to store the monetized content, rather than the content-owner buying the internet space themselves.

They say that

"publishers approved for AdSense accounts via a host partner site will be able to place ads on and earn from policy-compliant content they’ve created on any host partner site. If they then decide to show ads on their own domain, ... they’ll need to complete an extra approval step similar to the application process at www.google.com/adsense."

What this means is that if you sign up for AdSense with a host-partner, you will only be allowed to use AdSense ads on host-partner sites. If you want to use AdSense elswhere later on, then you need to do a 2-step verification process, which involves:

• Applying to become a "full" publisher
• Generating ad code,
• Implementing it on a live page of a non-host-partner site.
• Someone from the AdSense team will reviews that site and the ad in it.

If Adsense approve your other site, they give you permission to put ads on any sites other than host-partner sites (of course they still need to meet the AdSense Terms and Conditions). If they don't approve, you can still put ads onto host-partner sites (ie Blogger blogs or Hubpages pages), but you cannot use AdSense on other sites until you have fixed the problem(s) that stopped you from being approved..

Google have said that these changes don't affect people who are already approved as AdSense publishers - so I won't be able to see their effects first hand.

But I'm wondering if perhaps people who are only approved as "host partner publishers" won't have access to www.Adsense.google.com at all? This would be painful, because:

• The reports on the Earnings tab are not nearly as good as the ones in the Adsense interface.
• Some options (eg showing image-only ads, or re-using custom colour palettes, or accessing new mobile-friendly ad-sizes like 300x15) are not available from Blogger's Adsense ad generator.

Also, I'm wonder if perhaps Google have any plans to pay lower rates to people who they provide hosting and unrestricted bandwidth for?  Nothing has been said, but I can see why they would think this is reasonable.

How to sign up

If the site that you want to put AdSense ads on has a blogspot address   (www.example.blogspot.com), then the only way you can now sign up for AdSense is from Blogger's earnings' tab.

If it has a custom domain, then I don't know if it's possible to use the regular AdSense sign-up process, or if you have to use the Blogger one.

Either way, I still recommend that you should protect your AdSense account from malicious use, and also make sure that the ads you display meeting Blogger's Terms and Conditions too.