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.