Why Bloggers Should Care About Mobile Design




Smartphones are becoming more popular every year. When I was in college earning my multimedia degree a few years ago, we learned nothing about how they would change the way we surf the Internet today. Mobile design is still new territory, and by talking with other bloggers, most of them don’t realize how important it is for websites to be mobile friendly. I can’t blame them though – unless you actually use a smartphone, it’s hard to understand what’s going on.

So what can you, the average blogger, do to make sure your site is mobile friendly? You know nothing about code! you say. You don’t have a phone! you say. Fortunately, if you use Blogger or WordPress, there is help for you and doesn’t require much on your part. No coding knowledge needed.




My phone’s main screen

What is a smartphone? It is a phone that is a phone and computer in one. I have email, Facebook, Twitter, and the web in general in my hand. It’s much easier to check my phone than load up my laptop plus I’m not home most of the time anyway. You’ve probably heard of the most common ones – iPhone, Android, Blackberry. iPads and tablets are considered smart devices, very similar to smartphones except with a bigger screen. Most of the concepts I’m going to talk about are applied to all smart devices, but there will be more of an emphasis on the iPhone.

I have never touched a smartphone until my current job. We want to offer our training materials online, and a lot of our customers have smart devices. I had the fortunate opportunity to play with both an Android and iPhone shortly before my phone contract was up. I fell in love with the iPhone way more than the Android.

Why is designing for mobile devices important? According to Digital Buzz Blog and Microsoft Tag, out of the world’s 4 billion mobile phones, 1.08 billion are smartphones. That’s 27% of phones. In the world. They are predicting that by 2014, mobile internet will take over desktop internet usage. Right now, one half of all local searches are done on a mobile device. The article linked above has more very interesting statistics about how society uses mobile devices. I recommend taking some time to read it (after you finish reading my post, of course).

How do you design for mobile devices? For starters, they have smaller screens than a computer. Phones do have the capability to zoom, but not all sites zoom nicely. Keep this in mind when you have those scrolling, flying in-your-face follow me bars. They still follow you on your smartphone, but your screensize is much smaller, and all they do is get in your way, like these examples:




Also, turn off your captcha. Not only is it annoying on a computer, it’s worse on the phone. Especially when you have no clue what this is supposed to mean:



Phones are also limited in what files they can play. iPhones cannot play Flash files. You know those cute little splash screens? Can’t play them. That cool menu function designed in Flash? Can’t play it. There’s a very popular gas station around here that I go to often. The store locator on their site? It uses Flash, which means I can’t load it. I tweeted them about it, but they just dismissed me. You’d think a gas station, a place that everyone uses, would care a little more since you’re looking for one while on the road, not while you’re at home on a computer. I even asked them to make an app, but they dismissed that idea too. The Android is more forgivable and can play Flash files. Blackberries in general are just fickle.

Converting your blog: Now that you understand why mobile design is important, let’s talk about how to convert your blog. If you use Blogger or WordPress, you’re in luck! If you don’t, you’ll have to do some research. You can start by contacting your host or designer. If they can’t answer your questions or don’t offer what you need, find a new host/designer. Smartphones are becoming too popular for you to ignore.

Blogger users: If you use Blogger, they are nice enough to include an option for a mobile template. The option is located in the template menu (pictured below). This should work for almost all standard templates. All customized templates may be subject to not working, but when I used my customized template, it worked.




WordPress.com users: If you use WordPress.com (not self-hosted), the mobile option is easy to find. Go to Appearance – Mobile and make sure the option is enabled.



WordPress.org users: If you use have a self-hosted WordPress account (in other words, WordPress.org – not.com), you can install a plug-in. Personally, I use WPTouch. They make your blog compatible for almost all mobile devices. Feel free to look around at other plug-ins, but this one works well for me. Sure, the look is boring, but the pages load quickly and there isn’t much clutter. If your icon is a calendar instead of a photo, make sure you go edit that post and select a featured image (go to your post – right column, at the bottom it says set featured image). WPTouch has a list of settings you can adjust to suit your style.


WPTouch plugin – set your post’s featured image to set the thumbnails. Thanks Kim!

Responsive themes: Someone told me you can make your blog mobile-friendly without losing the look of your layout. They are referred to as responsive themes. I’ll admit I know very little about this topic, so I’m throwing this out there to anyone who wants to do more research.


This site loads fine on the iPhone. You just need to zoom in a bit. Thanks Jen!

If you don’t know what your site looks like and you don’t have a phone, ask around. Ask on Facebook, Twitter, your friends, family, neighbors. Someone, somewhere has a smartphone. I helped a few people and caught two issues. Please don’t ignore this issue. You risk losing (or worse – annoying) your visitors.

I know this information may seem a little overwhelming, but I hope I was able to break it down for the non-techie to understand. Feel free to post any questions or advice in the comment section.

Love what you read? Receive new posts in your inbox!

Did you make my recipe?

That makes my heart happy! Please let me know by sharing a photo on my Facebook page or uploading and tagging me on Twitter or Instagram using #chocolatemoosey.

Comment Policy

Thank you for your comments! I read every single one and respond when possible. Your comment will show up once approved. I have the right the remove any that are spam or are downright spiteful.

Comments

  1. Interesting info about the amount of smart phones out there. There are so many ways to reach others now, it´s sometimes confusing. Nice post!

  2. Great info here – thanks!

  3. That was super helpful! I just enabled the mobile template for my blog :)

  4. Oooo – will check out WP touch. Love the featured images feature. And captchas on mobile drive me batty! There have been so many times I’ve just given up commenting on a blog because of a captcha or just because the comment function just doesn’t play nice with my phone. Blogger seems particularly prone, but it depends on the blog.

  5. It was thanks to you that I enabled WPtouch and made my site mobile friendly! I also then started to look at mobile stats on my analytics, I was shocked to see how many people actually do view my site from their phone. I was really glad I made the switch. Thanks for all the info Carla!

  6. I don’t have a smartphone to check my blog to see how it looks but I will check out the plugin options. I do have a widget that you can subscribe to my updates via your phone, but now that you mention it, I don’t know exactly what their seeing!

  7. Uuseful info. Will ck out WP touch , but I think my design is mobile friendly anyway. Just checked on phone & it seems fine. I have a SP theme and they are all mobile friendly I think. I hate captcha even on the screen, so Have disabled that 7 wish others would too. sometimes I don’t comment on blogs that have captcha coz it drives me nuts :)

  8. Wheeee! I’m responsive! (have no idea what that means, but I think I look purty!)

  9. Really useful stuff, Carla! I was just noticing yesterday that my poor pictures looked smooshed on the mobile version of my site and then got overwhelmed thinking about adjusting it. Now I can fix it easily and make things look normal again. Thanks :)

  10. Carla, THANK YOU for sharing this! I’m frequently browsing blogs on my phone and it really surprising how many blogs do not use a mobile template or include in-your-face-follower widgets that block the screen. And the CAPTCHA is just the worst invention ever when it comes to smart phones :( Ok, I’ll stop griping now and just be happy that you shared this :)

  11. Thanks for the information, Carla! This is really helpful. You’re a star.

  12. Also, if you use “stumble upon” floating tool bar it pretty much makes your site useless on a smartphone. The bar just floats down the page and cannot be turned off like on a computer…uggh so fugly on a smartphone.

    Signing in with discuss can also cause smartphone issues… again uggh
    Good post…

  13. Also, if you use “stumble upon” floating tool bar it pretty much makes your site useless on a smartphone. The bar just floats down the page and cannot be turned off like on a computer…uggh so fugly on a smartphone.

    Signing in with discuss can also cause smartphone issues… again uggh
    Honestly, I prefer accessing sites in the “full” version NOT the mobile version.
    Good post…

  14. Amazing post Carla! I love all the info you presented here and I am so glad I use blogger right now. LOL

  15. Great post! Definitely need to make my blog mobile friendly and am going to check out the plugin you mention here! Thanks!

Speak Your Mind

*