Making my blog mobile friendly

Yesterday night I finally managed to finish something I’ve been planning to do for a while: change my WordrPress based blog theme to one that adheres to the “responsive design” philosophy.

After doing this I figured that it would be (potentially) helpful to write a post and urge others to make their blogs mobile friendly. Especially if you are running a WordPress based blog, it is not that difficult.

Why in the name of all HTML tags would you want to make your blog mobile friendly?

Well the answer is quite simple: because more and more people end up doing serious reading on their mobile devices. If you’ve been attending mobile conferences lately, you know that the days when we thought people tended not to use their mobile devices for anything serious are gone. People not only do complex task on their phones but they read too. And when the mobile phone is the only device at hand and you are stuck in some place without a computer you want to and you do spend time with your phone.

Now, a couple of years ago a colleague told me that I should take good care of my mobile users and add support for a mobile theme. This made me instantly anxious as (for no particular reason) I pretty much hated the mobile.somesite.com version of all sites. It always felt alien, remote, and a little bit fake.

Nevertheless I swallowed it and I added a mobile pack theme to my blog. Then I erased this from my mind. Last year, while reading a blog post on my phone I noticed that the blog looked almost the same as the desktop version and it was a WordPress blog. So, you can understand why I felt like yelling “Eureka!” as loud as possible.

DIY is something I like a lot but not when it comes to building software. I’ve done my share of libraries, frameworks, and code generators so I don’t feel that every now and then that I should re-invent the wheel just to prove that I exist.

This is why I was so happy to have a bunch of themes to choose from. Twenty Eleven, Responsive, and Blaskan made it on my short list. In the end I decided to go with Twenty Eleven.

Are we there yet? Not yet my son!

Once I was happy with my choice (the theme to go with) I started to tweak my blog a little bit more. Some of the changes were design related, others content related.

From a design point of view I wanted to change the font size. I felt that the default size, even on a desktop was a bit too small. As someone who has to wear glasses and uses  Cmd + “+” quite frequently to bump up the font size in the browser or mail client I thought that it would be something nice to have. So in the stylesheet I changed the font size from 100% to 105%. Why 105%? Well I tested various values on a bunch of devices and desktops and 105% worked the best.

Bumping up the text size for paragraphs and friends left me with the text size of the headers a bit to small. This was a bit strange because I was expecting to find another percentage based value. Instead it was hardcoded to 26 pixels. After some trial and error I ended up with 170% as the best value.

The final touch was to change to the maximum width of the site. The default option was 1000 pixels which I think is too small for today’s computers. I changed this to 1120 pixels and I was done.

That was the design. What about the content? From a content point of view I’ve done two things. First, I added some more widgets on the sidebar. By default the theme has two widgets: archives and site login. I wanted to have categories, blog roll, upcoming events, and about me.

The second thing I wanted to change was to take out some of the content in order to speed up loading and rendering. My eyes were firmly set on the social sharing features. I had a bunch of plugins for sharing the posts on Twitter, Facebook, and Google Plus. These plugins load a bunch of resources (images, CSS, scripts), which adds time to both loading and rendering. Especially on slower mobile connections this was painfully slow.

Now, making your blog content easier to share is a good thing isn’t it? It looks like online marketing 101. Well, I don’t think that this is always true. If your blog is a technical one and you write good content then you should trust that your users are perfectly capable of copying and pasting the blog post URL into a Twitter message window or Facebook page.

Conclusions

In conclusion, don’t be as lazy as I was in regard to making your blog mobile friendly in a responsive design way. Especially if you use the WordPress platform, things are not that complicated.

And while doing this take a look at your current content and decide if you really need all those little plugins that are adding weight and rendering time to your page.

One thought on “Making my blog mobile friendly

  1. It might be readable on mobile devices, but now for me it’s quite hard to read on a 1366×768 monitor. The fonts are too big and the header takes all the screen after loading. For me bootstrap standard theme seems more readable on both mobile and pc.

Leave a Reply

Your email address will not be published. Required fields are marked *