One of the most important things for blogging success is user experience on our websites. Nowadays, we have to worry about multiple screens: computers, laptops, tablets, cellphones, even televisions. Thankfully, we can get away with providing the same experience to computers, laptops and televisions, but tablets and cellphones are different beasts entirely.
How do we make our self-hosted WordPress blog pretty for cellphones?
In the case of self-hosted WordPress blogs, we have three options: 1) use Automattic’s Jetpack, which comes with a default mobile site option; 2) use a plugin from the WordPress Plugin Directory; or, 3) use a responsive theme. Option #1 is a lot simpler than option #2 and 3. But just because it’s the simpler choice, doesn’t mean it’s the better choice for you. While the end result is the same (our blogs look good on small screens), how you get there and the aesthetics are up to you to decide.
Click the images for bigger versions.
Option #1 Use Automattic’s Jetpack, which comes with a default mobile site module.
When you install WordPress, you’ll get the prompt to activate Jetpack. You should activate Automattic’s Jetpack because it does a lot of things for your blog that you formerly had to download separate, individual, plugins for. If you decide you don’t like anything Jetpack offers, you can deactivate and delete the plugin later.
If you already have self-hosted WordPress installed but no Jetpack, you can download it from its site. (Note: I don’t normally recommend directly downloading plugins from its site. You should always download a plugin from the WordPress Plugin Directory to ensure the plugin is safe and not packed with malware. Downloading Jetpack from its site is safe because it’s created by the same people who gifted us with WordPress. Just in case, here’s Jetpack in the Plugin Directory.)
Once Jetpack is activated, scroll past the other modules you can activate until you see the one titled “Mobile Theme.” It should be four rows down, all the way on the right. Click on the button “Learn More” to… um… learn more.
The description of Mobile Theme is straightforward enough. Unfortunately, Automattic doesn’t include a good screenshot of how your blog will finally look in its mobile state. Here’s the iFabbo Blog using Jetpack’s Mobile Theme. Your site will look the same but with your content. Once you activate the module, you’ll get a chance to configure the mobile theme.
Nope, you don’t get many choices. You can choose whether to show excerpts or full posts on your front page and whether to advertise the WordPress mobile apps in your footer. Looking to change the color or banner or something on your mobile site? No luck. On the upside, the Mobile Theme is simple and does what you need it to do.
Wish you could make your mobile site prettier? Or do something different with it? You may be better off with a different plugin.
Option #2 Use a plugin from WordPress.com’s Plugin Directory.
As of March 31, 2013, a search of the phrase “mobile theme” in WordPress’s Plugin Directory pulls up 72 plugins. 72. This is a lot, and you’re not likely to try every single one of them. We’re not going to either.
The “most popular” (according to its plugin page) mobile theme plugin in WordPress’s Plugin Directory is WPtouch. Having used this plugin on my own blogs, I can vouch that WPtouch is an easy plugin to use with a lot more customization opportunities than Jetpack’s Mobile Theme. With WPtouch, you can pick what font and what color your text is, include Google AdSense code, and change the icons the mobile theme uses, amongst many other options.
Forego customizing WPtouch and your blog will look like the picture on the left. It isn’t as minimalist as Jetpack’s mobile theme but does use some graphics for the picture-inclined.
Want more customization or support from the developer? WPtouch is available in a pro version starting at $49USD.
Option #3 Use a responsive theme.
Finally, my favorite option. How your blog looks on different-sized screens is hard coded into responsive themes–and, because they are themes, you can change nearly everything until you’re satisfied.
Search the WordPress Themes Directory and you get 136 responsive themes. When you have more options than you can possibly try without your eyeballs falling out, I like to use Google. Someone, somewhere, did some of the work for you. Using the search term “best free WordPress responsive themes” found a post titled “20 Top Free Responsive Themes.” Or you can see what the most popular responsive themes are on the WordPress Theme Directory. (The most popular responsive theme is currently one called… wait for it… “Responsive.”)
No matter how you go about it, once you find the responsive theme you’re happy with, your blog is ready for any screen available.
Now, you – is your blog optimized for mobile? How did you do it? If you haven’t optimized your blog yet, which option will you go with?
This post has been reviewed by Chloé Watts, our in-house tech guru.
Have a question for Chloé? Use the ask chloédigital contact form.