Making mobile version of a blog for Blogger

Preface

Blogger offers its own, stunningly comfortable way to showcase our blogs on mobile devices. Nothing is required to do, Blogger cares about everything and we can browse our blogs on mobiles as comfortably as we browse its desktop version. The only "but" is that Blogger offers its own interface for mobile view and not always we want it, sometimes we want our custom mobile view of our custom design. So, the question is how to make? Well, it is pretty easy.

Start doing

Actually we can see our custom design fitting perfectly the mobile screen (screen size I mean), just because Blogger has a certain command to showcase website/blog on mobiles. Code looks this way (in xml file, in head):

The problem is that our design, with masses of elements, blocks, buttons, full-width navigation etc (what is fine for desktop since we have plenty of room to locate our masses of elements, blocks, buttons etc) becomes... tiny-tiny. And this is really uncomfortable way to browse websites on mobile. Naturally, when we see that everything is small, overloaded with elements (which might be absolutely unnecessary for mobile browsing) and difficult to read we simply switch to native Blogger Mobile view. Good way, but once again, what should we do to keep our custom design and along with enjoy comfortable browsing on mobile?

I was searching for the answer to this question and found it in great article from this wonderful blog: Five For Blogger, explaining exactly what to do. Read it if you wish your custom design to be displayed on mobile device.

In short, summarising what was said in the article mentioned above, we fulfil next two simple steps:

1. Create a version of the blog for mobile devices with media queries (in css file)

2. Change a little bit viewport command in head of xml file

Literally, thus should look your css: (it is just an example, naturally)

.center{
 margin:0 auto;
 width:1400px;
 clear:both;
}
@media screen and (max-width: 1440px) {
.center{
    width:1200px;
}
}
@media screen and (max-width: 1024px) {
.center{
    width:960px;
}
}
@media screen and (max-width: 800px) {
.center{
    width:92%;
    margin:4%;
}
}

And your viewport command should look this way

instead of this:

Actually, that's it, we are done. What we get if we follow two above steps? This is for desktop:

And this is for mobile:

Short note: naturally, if we need images for our blog design, we must make them double-sized for mobile version, otherwise they will look blurry and bad. Here is a sample code for "search" icon:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
#searchsubmit{
 background:url(images/search@2x.png);
 background-repeat:no-repeat;
    background-size: auto 36px ;
}