A “responsive” WordPress theme is one that resizes and looks good on different devices. So on your desktop computer, a tablet or smartphone.
While the awesome Headway theme that I use has had a responsive option for a while now, due to the customizations I had made it didn’t work great out of the box. So I spent some time making my site look good on different devices. The screenshots below show how the site changes for different sizes, but if you want to see it in action, simply resize your browser and it will change for you.
There are quite a few things happening here and that the screenshots don’t tell. Blocks are removed, and in the mobile version the logo is significantly decreased in size and the navigation menu is replaced with a dropdown navigation. There is a great free plugin for this called Responsive Select Menu.
This means I no longer need a mobile plugin like Wptouch and means I have complete control over the way it all looks.
I haven’t worked on many mobile versions of sites but the amount of time (and cost) it takes in some themes isn’t worth it and a plugin is your best bet. For themes like Headway, by default you can get a great responsive looking site. After customization it can take a few hours to perfect and look good, but it was definitely worth it.
Let me know if you have any questions or need help making your site mobile friendly.
Can you remember life without a mobile phone? It was different, wasn’t it? Instead of being on call all hours of the day and evening, if we were out and about, we used to have to trudge to a public telephone box to keep in touch, sometimes queuing up in a line, pulling out change, and hoping we wouldn’t run out of coins before we had finished what we needed to say. In a way, I think back to these times with fondness. If you went out fishing, or on holiday with the family, or walking the dog, you knew you were safe from work for a few hours or days, and couldn’t be contacted until you got back home.
Don’t get me wrong, I know mobiles are great devices. What would we do if we didn’t have the capability to refer to a smartphone for help in all sorts of situations? We can go abroad and tap in a translation, removing the need to carry the tourist-shaming phrase book. We can convert money, check the weather, and even order a takeout without actually speaking to anyone. When we’re bored in queues, we can now pull out our phone and play a game, write an article, or take some pictures. In fact, phones are used for all manner of tasks, the least of which is actually dialing a number and connecting with someone.
New Possibilities
We don’t have to like mobiles to appreciate the importance of linking our businesses to them and making sure we have the best possible infrastructure in place to allow customers to access us quickly and easily, no matter where they are. Making your WordPress site more accessible is a critical element in keeping your customers engaged and supportive as you evolve to meet their needs. It brings the following benefits:
Enables your readers to order your products swiftly, wherever they happen to be.
Demonstrates your commitment to staying at the front-end of technological advancements, eliminating the risk of being left behind as new software and hardware becomes available.
Gives you the option of updating your site from anywhere.
Opens up your site to a potential new customer base – smartphone users who don’t surf from PCs or laptops.
Keeps you close to your dashboard, giving you instant access to your site if things go wrong.
Allows you to quickly respond to messages and comments from customers, enhancing your online networking.
Regardless of what you think about the move to smartphones and the impact upon our privacy, you don’t have to be a genius to figure out it’s a great idea to optimize your blog for mobile users. Here’s the lowdown on how to do it . . . .
Manual Configuration
If you want to keep tight control of your site during the optimization process, you can configure your changes manually by setting up a mobile.css stylesheet for WordPress. You can then go on to customize your meta information to decide how your site should be scaled to suit various browsers and smartphone applications. If this sounds complicated, don’t worry – there are easier routes to take that are just as effective.
Automated Optimization
Don’t fancy the manual route? I don’t blame you. It’s actually much easier to optimize your WordPress site for mobile use by installing a plugin.
In my opinion this is currently the best plugin of its kind. A free version is available and it’s quick and easy to use. If you feel like going a bit further, you can purchase the “Pro” version, which adds a number of extra features including advertising, customizable menu options, and themes designed for the iPad. It also gives you access to a comprehensive support service to troubleshoot any issues.
If you want to check out a few more options before making a final decision, take a look at this one. Again, a free and paid version are available, so consider all the functionality for both options before you make your choice.
Another great plugin, this has a huge number of different themes to choose from, and a really good selection of different options to let you customize your site.
Also worth you consideration, this one is really simple to configure, manage, and use.
Testing Your Site
You don’t need a fancy mobile phone to test whether your modifications work properly, so don’t feel the need to rush out and spend several hundred dollars if you’re still not a convert to the smartphone revolution. You can test your site easily with the Firefox browser by downloading a free add-on called “User Agent Switcher”. Once you have it installed you can switch between different options for site access, to check out how your site will look when accessed using different applications, including the iPhone.
WordPress, once again, demonstrates its incredible flexibility by making it ridiculously easy (and free) to optimize your site for mobile phone users. No excuses . . . block out an hour in your schedule and you’ll probably only need about half of it to place your site on the cutting edge of Internet technology.
