How To Make A WordPress Website Mobile Friendly

With an increasing number of people browsing the web on mobile devices, now would be a good time to make sure that your website is mobile friendly. Gotta keep pace with the changing times and trends, right?

Fortunately it’s not all that hard to get your site to show up nice and proper on mobile devices. All  thanks to plugins.

Now, there are several plugins that you can choose from. WPTouch is hugely popular option; it’s been downloaded more than 5 million times. Then, there’s WP Mobile Edition. And a whole bunch of other plugins as well (just do a search!). But the one that I would like to talk about in-depth in this article is the Jetpack plugin.

Whats unique about Jetpack (created by Automattic, the good peeps who created WordPress!) is that unlike most plugins that focus on a single functionality, Jetpack packs in a whole spectrum of features. Using Jetpack you can easily install contact forms, comment forms, get stats for your site, connect your site to various social media platforms and so on.

The cool thing about the plugin is that you can enable/disable any functionality that you like. The plugin isn’t without its drawbacks though. Personally, I find it easier to use stand alone plugins and use Jetpack for just a handful of features such as Publicize and yes, to “mobile-ready” some of my sites with just a click. Below I take you step-by-step from installing the Jetpack plugin to enabling the “Mobile Theme” functionality.

A Caveat

Before I begin, I just want to apprise you of a few shortcomings with plugins such as WPTouch and even Jetpack. First off, you won’t have too much flexibility as to how your site renders on mobile devices. Another common problem is that the sidebar tends to vanish all together in the mobile version ( there is a way out for Jetpack though..if you aren’t afraid of code that is! Go here and here). But on the brighter side, plugins are a quick and super easy solution to get your sites all set for mobile devices.

Tip: You could consider a premium plugin such as Graphene Mobile Neo that provides more flexibility than free plugins.

The other option to consider is to move to a new theme all together, one that is responsive out of the box. That’s to say, the theme will have mobile responsiveness as an inbuilt feature. The Lifestyle Pro theme from Studiopress is one such example and is in fact the theme that I am using for this site. But it is a premium theme and it is not an easy theme to customize especially if you are a beginner.

So moving on to Jetpack and its installation.

Step 1: Install the Jetpack Plugin

The Jetpack plugin actually comes pre-installed with WordPress most of the times. So there’s a good chance you already have it. To check, from your dashboard go  to Plugins>Installed Plugins and see if Jetpack is listed as one of the installed plugin. If yes, make sure the plugin is activated and go to Step 2. Else, head to Plugins>Add New and search for “Jetpack”. From the results look for Jetpack (you won’t have to look to far, it should be right at the top) and make sure the plugin creator is Automattic. Install and activate the plugin.

Step 2: Connect to WordPress.com

Once you activate Jetpack, you will find a message such as the one below in the dashboard:

install-jetpack-plugin

This is one reason why many are averse to Jetpack. In order to run the plugin, you need to create a WordPress.com account and then connect it to the plugin. But it’s not such a biggie, it will take all of 2 minutes. Simply click on the “Connect To WordPress” message and on the next screen create a WordPress.com account by clicking on the “Need an account” link and follow the prompts to authorize the connection.

 

Step 3: Enable the “Mobile Ready” feature

Next, you should see a message such as the one below:

plugin-settings

Now, it’s time to go to the settings page. To do that, go to Plugins>Installed Plugins, look for Jetpack and click on “Settings”. The “Settings” screen is where you will find all the features that Jetpack has to offer. You can view all the features, the ones that are active and inactive features by clicking on the “All”, “Active” or “Inactive” buttons respectively. For now, click on “Active” and then bulk select all the features and deactivate them.

select-jetpack-features

Then go to the list of inactivate plugins, look for the “Mobile Theme” feature, hover over it and activate it.

And ta da! Your website is not mobile ready.

You will find that the website shows up with just a single column on a mobile device which makes for improved legibility. All the sidebar widgets will be pushed down below the posts (if it shows up at all and that’s theme dependent). Along the top of the site, above the header you will find a Search bar and a very convenient fly-out menu.

Step 4: Configure The Mobile Theme

There aren’t too many configuration options. In fact, there’s just one! While on the “Settings”, look for “Mobile Theme” (which would have now moved to the “Active” category”) and mouse over it to click on the “Configure” link. You can choose whether to display full length posts or just excerpts. And that’s about all you can choose to change.

So there you have it, enjoy your mobile-ready website!

Leave a Reply

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