How to Optimize Your Self-Hosted WordPress Blog for Mobile

Posted on April 4, 2013
Photo by Mike Licht via Flickr Creative Commons.

Photo by Mike Licht via Flickr Creative Commons.

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

Where you can find Automattic's Jetpack on your dashboard.

Automattic’s Jetpack can be found on the left sidebar in your dashboard, second from the top.

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.

Click on "Learn More" for a short description of what activating "Mobile Theme" does for you.  To activate it,  click on "Activate."

Click on “Learn More” for a short explanation of what activating “Mobile Theme” does for you.
To activate it, click on “Activate.”

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.

You can configure the mobile theme in Jetpack, but it doesn't give you many options.

You can configure the mobile theme in Jetpack, but it doesn’t give you many options.

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.

The iFabbo Blog using the WPtouch plugin for its mobile theme.

WPtouch with no customizations.

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?

 

chloédigital logo

 

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.

 

 

When she isn’t performing her iFabbo duties, Amy runs Studio 888, her digital media agency offering freelance writing and other services. She also has a personal blog at AmyNievera.com and a shopping/beauty/fashion blog named Pintucked. When she’s not writing, Amy is cuddling her cats to death and consuming all forms of media.

Facebook Twitter LinkedIn Google+ 

One Response to “How to Optimize Your Self-Hosted WordPress Blog for Mobile”

  • xlovehappyx
    Twitter: xlovehappyx

    Thank you so much for this article on optimizing my blog for mobile! I use self-hosted WordPress and noticed that viewing my blog on my phone…isn’t so pretty :) But I will check out Jetpack and the plugin you suggested. I would love to have some customization and be able to incorporate pics and ads in my mobile version.
    xlovehappyx recently posted..FOTD | Coastal Scents 88 Warm PaletteMy Profile

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge

Notify me of followup comments via e-mail. You can also subscribe without commenting.

  • FOLLOW & LIKE!

  • Subscribe via RSS!

    bloglovin Join us on BlogLovin'!

    Never miss another iFabbo post or
    important news update again!


    Subscribe via RSS feed here
    or enter your e-mail address:

    Delivered by
    FeedBurner