Here is smart solution for, how to make wordpress site responsive. I’ve been researching about this topic for a while. As you all know, Google PageSpeed Insights now has a ‘beta’ feature that revolves around ‘mobile user experience’. Also, the mobile web users’ number is increasing very fast. Thus, mobile optimization is unavoidable. Here, I’ve compiled a list of free WordPress mobile plugins and some tips to get you started. But before that, imagine the following scenario.
Imagine you are trying to access a blog using your smartphone. Your aim is to obtain some very useful information from the blog. You see, internet is not just about facebook, pirated movies and porn! Oftentimes, serious folks like me (I assure you I’m) use the internet for obtaining information. All right, so you’re waiting for this blog to open. After waiting for long, when the blog finally loads up, you find that it is poorly rendered!
how to make wordpress site responsive
All this commotion is followed by you cursing that blog, giving the webmaster ‘the bird’ and leaving that blog! What a story! This often results when blogs are poorly optimized for mobile devices. Have you too been ignoring the aspect of mobile optimization? If yes, chances are that many visitors might be cursing your blog and flipping the bird at you (I’m sorry to say that).
I’ve got some facts and figures to show you. These stats will help you better understand the ‘impact’ that ‘smartphone revolution’ has had on internet surfing habits of people. Brace yourself; these stats will blow you away.
50% of mobile web users use mobile as primary means of going online
Over 1.2 Billion people are accessing web using mobile devices
Mobile traffic constitutes 15% of all internet traffic
28.85% of all e-mails are opened on mobile phones and 10.16% on tablets
Well, I stumbled upon these stats thanks to an infographic I found on Digitalbuzzblog. I guess that now you are convinced about the ‘influence’ mobile devices have on web surfing habits of people. If you are still not convinced, I guess you belong to stone age!
Folks, I haven’t included stats showing ‘close relationship’ between mobile devices and social media. You, me and lots of other people rely more on mobile phones for visiting social sites. Come on, accept the fact. Mobile devices are gonna rule the web world in the future.
I agree that you’ve spent countless hours sweating, typing and researching to come up with freaking awesome blog posts. But, in the future, a time will come when lion’s share of your visitors will be using mobile devices to access your blog!
If you don’t make your blog mobile friendly, all the hard-work, you unwillingly put in, will go in vain!
Here, I’ve listed some very practical solutions that’ll make your blog mobile friendly. Let me give you an idea about what lies ahead in this article. The solution consists of using a responsive theme, using some free WordPress mobile plugins, creating a subdomain, using media query etc. If you’ve braved the stats, brace yourself again, here comes the solutions.
Solution #1- Use an awesome Responsive theme
This solution is for the lazy folks out there. Just purchase a responsive theme, install and set it and forget about this whole ‘mobile optimization’ affair!
You barely have to do any manual settings. The theme will take care of all the optimization aspects. It works like this- set it and forget about it! If you wanna tweak and modify your blog’s mobile avatar, such themes allows you to do so!
All you lazy folks out there, I assure you that responsive themes will make your life a lot easier. Go, grab some awesome premium responsive themes from Theme Junkie! They are awesome! Use them and just don’t worry about mobile optimization ever again!
Solution #2- Use any of these free WordPress mobile plugins
If you are the ‘Uncle Scrooge’ type blogger, who don’t want to spend money on responsive themes, these plugins will help you. In fact, you’ll love them. They’ll ensure that your blog is decently optimized for mobile devices. Most of these plugins comes with their own ‘mobile themes’, tailor-made for small screens.
Here’s the list of plugins that I recommend. Choose wisely Mr Scrooge!
#1 WPtouch Mobile Plugin
WPtouch is a plugin that is used and trusted by newbie and professional bloggers alike. So, naturally, it must be pretty ‘solid’ to have been used and downloaded by many folks!
It has a free version and a pro version. So, if you are not willing to spend your hard earned money, the free version will do a decent job.
Upon installing and activating this plugin, it automatically enables an apt, simple mobile layout for your blog. Basically, just like in your wild fantasy, you’ll get the job done without much effort!
If you are the active and hard working type like me (I’m dangerously hard-working, mind you!), you may go to the admin panel of the plugin and tweak the settings and layout a bit! You know, basic customization, colors and all.
This plugin allows visitors the freedom to switch between mobile and regular (desktop) versions of your blog. And if you are willing to spend money, go for WP Touch Pro. To be honest, I haven’t tried the pro version yet.
From whatever info I could gather from WP Touch Pro users, I can safely conclude that it offers amazing customizing options. Also, the support team is caring and quick at solving problems.
#2 JetPack Mobile Theme
To make use of this option, first of all you must have JetPack plugin installed and activated. And let me warn you; this plugin won’t give a ‘stylish’ look to your blog’s mobile version! But still, it ensures that your blog gets rendered on mobile devices fast. If it is improving user experience that matters to you, this tool will satisfy your needs. This theme won’t display ads like the way they are displayed on desktop.
Activating this theme is simple. Head straight to ‘JetPack’ section on your Dashboard. Among the list of tools that it offers, you’ll find ‘Mobile Theme’. Just activate it and you’re done!
Now, regarding the customization part, you don’t have to worry much about it. This is because there are only 2 options to configure! Make sure that you set up the ‘excerpt’ option. It is the only thing you should be concerned about.
#3 WordPress Mobile Pack
According to the creators of this plugin, WP Mobile Pack is a complete toolkit to make your blog mobile friendly. To an extent, they are true!
This plugin comes with a custom mobile theme, which is decent enough. It also has a ‘switcher’ that helps it to recognize the device (desktop or mobile) and render your blog accordingly.
This is a smart plugin that automatically scales down images, divides posts and pages etc to fit it in a small screen appropriately. If you’re an AdSense publisher, this plugin also offers an ad widget to help display ads.
The admin panel feature allows you to access your blog and use basic admin rights to do activities like moderating comments, editing posts etc. Analytics feature helps keep track of visitor count and similar info.
#4 WP Mobile Edition
What I like about this plugin is that it comes loaded with lots of useful features. Like other plugins, this one also ‘detects’ the device that the visitor is using. Upon detecting a mobile device, it switches the theme accordingly.
The default theme that it offers is pretty good. It comprises of all the basic necessities a theme should have. It even has good social sharing options included in it.
Earlier, I talked about ‘loads’ of features. Well, I actually meant it and wasn’t lying. This plugin offers some serious features related to SEO!
It comes with an inbuilt mobile XML Sitemap generator! This little fellow will ensure better visibility for your blog in ‘mobile’ searches made using Google, Bing, Yahoo etc.
Ad publishing isn’t compromised, thanks to an ad widget it offers. You may effortlessly publish ads and expect the mobile theme to render it seamlessly on smaller screens!
This theme too, basically belongs to your fantasy. It helps get lots of job done without much efforts from your side. Check this plugin out at the WordPress.Org repository.
#5 Any mobile theme switcher
All right folks, this plugin is a bit different. This plugin wants you to keep a few mobile themes in your WordPress database. Don’t frown, I know it is a bit daunting task. But still, making use of this plugin will give your blog a ‘special look’!
So, have you downloaded and uploaded a handful of mobile themes? If yes, install this plugin and start assigning themes to various types of browsers!
This plugin allows you to select which theme will be used on a ‘specific’ mobile browser. Take a look at the screenshot to understand it-
I hope that the screenshot made you understand it well. Of course, images convey messages better than text!
So, this plugin gives you the freedom to choose different mobile themes for different mobile browsers like android, Opera Mini, Windows etc. I told you, this plugin will give your blog a special look! See, I wasn’t lying!
#6 Mobile Smart
Sleek, light and easy to use- this is how I’d describe this plugin. It comes with a ‘detection tool’, that identifies the device (mobile or desktop) and delivers your blog accordingly.
If it finds a mobile device, your blog will get delivered on the ‘boilerplate’ theme. I’m afraid, it is not the sexiest theme around in the town. But still, it won’t let your blog down! User experience won’t be compromised, I can assure you that.
A feature of this plugin that I really love is its knack of recognizing the ‘type’ of mobile device. This fellow can effortlessly find out whether a mobile device sports a touch screen, qwerty keypad or the regular alphanumeric keypad. It ensures that the ‘best configured’ version of your blog is delivered to the device!
#7 Duda Mobile site builder
This plugin works like a charm across most of the WordPress themes. All you have to do is make a mobile friendly version of your blog using drag and drop operations! And Duda will deliver your blog based on its ‘device recognition’ prowess. I must admit that it does this ‘recognition’ job well!
Yes, you can get a bit ‘creative’ while using it. Further, it involves no coding. It’s all ‘drag and drop’ stuff. So, you may even ask your granny to make it for you!
Other features includes- excellent mobile SEO, good ad placing options, analytics etc.
Solution #3- Create a ‘m.yoursite.com’ subdomain and deliver something special to mobile visitors
If the above plugins haven’t satisfied you, I’ve got more tricks up my sleeve! You want your blog’s mobile version to be unique and want it to stand out from the crowd? Want a ‘stylish mobile theme’ to be rendered across all mobile devices like smartphones, tablets and various mobile browsers? I suggest you to create a subdomain.
Using the C Panel, it is very easy to create a subdomain. Okay, for your sake, I’ll just run through the process-
Log in to your C Panel
Head to the ‘Subdomain’ part. It is that ‘globe’ and ‘www’ thing right there.
Create an ‘m.yoursite.com subdomain. The document root should be /public_html or same as the directory containing your WordPress installation files.
Time for victory dance! Mission accompli… hey, wait, you’ve created the Subdomain, but still, there are things still to be done..
After creating the subdomain, you need a plugin that’ll redirect mobile web users to it. That’s when ‘Mobile Domain’ comes handy.
After installing the said plugin, activate it. In its settings, you can choose a mobile theme (which I assume you already have saved in your WP database) that’ll be used on the mobile subdomain!
In the settings, all you need to do is enter the subdomain you just created. This is followed by the selection of the mobile theme! That’s it, the plugin will take care of the everything else!
This plugin also comes with a Mobile XML Sitemap creator. You may use Google Webmaster Tools to claim the mobile subdomain and submit Mobile Sitemap.
Creating an m.domain.com thing is highly recommended if your blog is getting lots of mobile web visitors. Besides, it also helps you customize the subdomain without the fear of it influencing the speed and performance of your blog’s main theme. Even caching for the subdomain can be arranged separately, making it an independent entity!
Solution #4- Using the @media query to make mobile version of your blog
This method is for those who have knowledge of CSS coding. If you haven’t heard at all about CSS (Cascading Style Sheets), you better leave this section and head to the end of this post.
Basically, the stylesheet.css of your blog can be tweaked to deliver a customized ‘mobile version’ of your blog to the appropriate devices.
This task can be accomplished using the Media query. You just need to specify the ‘screen size’ of the device and insert your ‘mobile friendly CSS’ in curly braces. Okay, coding done? Insert it in your stylesheet.css. Take a backup folks, I don’t want you to ruin your blog, in case if something goes wrong.
Basically, the media query, to set a definite screen dimension, looks like this-
@media only screen and (max-device-width: 480px){YOUR BLOG’S MOBILE FRIENDLY CSS}
You see how this works, don’t you? We are basically setting a ‘specific screen width’ for a specific device. In the above case, that specific device is an iPhone! The curly braces should contain the customized CSS, which is to be displayed for the iPhone. You may go for specific font size, header size, footer characteristics etc.
After inserting the above code in your blog’s stylesheet.css, this customized css will be served to iPhone users who visit your blog!
This is just a simple example, focusing solely on a very finite set of ‘screen size’. If you wanna go for a ‘complex’ mobile design, it’ll involve you making a separate mobile.css file and linking it to the media query! Further, you may make use of ‘@media (min width: )’ also to your advantage!
Wait, I’m no coding guru, so I suggest that you read this post by the experts, related to CSS 3 and media query. This method is particularly useful, if you wanna give your own ‘touch’ to your blog’s mobile version.