03 April 2010

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:


image of my mobile rss feed


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.


image of my mobile rss feed on mobile device


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

I found this useful information at labnol.org1

10 comments:

  1. This is great advice since cellphones and other mobile devices like the ipad seem to be increasingly taking over our lives!

    ReplyDelete
  2. Michelle: Thank you. I can't believe I never thought about this before. Oh well, the windmills of my mind are a little rusty, lately :)

    ReplyDelete
  3. great info here. you are very good at coming up with this stuff. I tried the link you gave, I put in my blog address and it said it couldn't load it.

    ReplyDelete
  4. Good info although I don't understand any of it. I've never used a mobile reader so don't know what all that means but I suppose I should learn. *add to my after tax season to-do list*

    ReplyDelete
  5. Ann: Sorry about that. I went back and tried it with several other addresses and it wouldn't load for them either. I'll make a note of that in my article.
    Thanks for letting me know.

    BeadedTail: I never use one either, but I know there are a lot of people out there that do, so I've been trying to find a way for them to see my site easier.

    ReplyDelete
  6. Mobile Friendly...egads...I know how to answer a call, make a call, send and receive a text on my cell phone. It has a camera - I have NO idea how that works! Voice mail? Ummm, didn't set it up. Oh, and we don't get cell service out here in the back end of nowhere. I feel so out of the loop!

    Hope you had a happy Easter!

    ReplyDelete
  7. Split Rock Ranch: I'm in the same boat. We had to get rid of our main phone, so I'm stuck learning how to use my wife's cell. We have a VERY basic plan, so no internet on it. This is just something that popped into my head a few days ago and if I have anyone coming to my site via a mobile device, I wanted to make it a little easier for them.

    ReplyDelete
  8. Wow! This is awesome information. I've bookmarked this post so I can come back and do the same thing for my blog.

    Thanks!

    - Margaret

    ReplyDelete
  9. Nanny Goats In Panties: Thank you very much. I'm glad you'll be able to use this information.

    ReplyDelete
  10. If you're a WordPress user you can download our FREE mobile compatible WordPress theme Möbius. We also offer you our service MobilizeToday.com to make your website mobile friendly without any links on its front page. We apply proper CSS depending on the device screen size and its capabilities. As a result you are getting optimized views in desktop and mobile browsers.

    ReplyDelete

Printfriendly

Related Posts Plugin for WordPress, Blogger...

Google Analytics