How to Make your Blog Mobile-Friendly

For the past several weeks, I have been working on a new template that will hopefully make my site load faster. As a result, I have also been searching for ways to make my site more user-friendly and the one thing that never even entered my mind before today was: mobile users. With this thought in the back of my mind, I tried to find a place where I could test my site and see what it would look like on a mobile phone. Well, what I found was not very good and to sum up my viewing experience...yuck!

If you want to see what your site looks like, just follow this handy link to this mobile test emulator and have some fun. (NOTE: I have just been informed that this emulator does not work for some sites, so I apologize for this inconvenience).

So, what can I do to make it more attractive? Again, a little more searching and I found a very easy way to do just that. Not only does it make viewing and navigation easier, but it loads wicked-fast. Here's what happens: You create a new link on your site that tells the user to "click to see mobile feed" and when they do, they are taken to mobile-friendly RSS feed of your site, which will list your posts in reverse chronological order. The visitor can then click the desired link and a mobile-friendly page of that post will be displayed.

This is done through Google Reader, so all you need to do is copy the link below, paste your RSS feed address where indicated (the [ ] are deleted), and post this link on your site (preferably as close to the top of the page as possible).

http://www.google.com/reader/m/view/feed/[your_feed_address_here]

What I did was put my feed address into the URL and then opened a new tab to see what would happen and this is what came up:





I have already included this on my current template and my new one. However, I have also taken this one step further. I went into the html and added the link there as well. If you open your source page and page down until you get to the BODY tag, you will then start looking for something that says: "skip links for text browsers". You will notice some links that when clicked, will take you to that portion of the site. Now, all you need to do is put your new "mobile feed" link at the top of the list and you are good to go. I have included an example of what I'm trying so miserably to explain:

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<p><a href='http://www.google.com/reader/m/view/feed/
http://feeds2.feedburner.com/everyday_living'>
skip to Mobile Feed</a></p>
<p><a href='#main'>skip to main</a></p>
<p><a href='#sidebar1'>skip to left sidebar</a></p>
<p><a href='#sidebar2'>skip to right sidebar</a></p> 
</span>

The portion in bold is the new link to the mobile feed and to make it even easier to read, I have included the <p> </p>. This ensures that the skip links are not all mushed together.





Oh, and for you Wordpress users, there's a plugin available (well, there's a shock) called WordPress Mobile Edition (it is the third plugin listed) which will automatically detect if your visitor is using a mobile phone browser and it then renders a mobile friendly version of the blog to the visitor.¹

I found this useful information at labnol.org¹