Creating Mobile Friendly WordPress Sites for Yourself and Clients

Creating Mobile Friendly WordPress Sites for Yourself and Clients

If you have an existing WordPress site that doesn’t look quite as you intended when viewed on mobile devices, such as smartphones and tablets, then this guide will give you some options on how you can remedy this problem.

Also, if you are a web designer who has been tasked with building a mobile friendly version of a website, some of the tools here should be of use to you as well as help you find more clients who require this service.

Complete Redesign with a Responsive Theme

Responsive web design is perhaps the key trend of this year and with the rise of iPhones, iPads and other mobile devices it’s not hard to see why. The goal of a responsive design is to ensure that a site provides an optimal viewing experience across a wide range of devices and screens of all different sizes.

A website with a responsive design won’t display a different site or use an alternative theme to users depending on their device, but it will resize and reformat the site using a responsive, liquid layout. Images as well as other page elements will be resized and repositioned using this design approach.

While converting an existing WordPress theme into a responsive design can be done in theory, it is often a big task as many of the features of a true responsive theme are more than just addons but are core components of the code.

For that reason, installing a responsive theme is often the best approach to take in terms of potential time savings and the quality of the end product. Switching to a new theme is also an excellent opportunity to update and revamp the appearance of a WordPress site while making use of the brilliant new functionality that is now commonly found in modern website themes.

Examples of Responsive Themes for WordPress

Here are some examples of good responsive WordPress themes. By clicking on the images you should be able to preview the themes and get a live demo in order to get an idea of how they respond to different sized windows and screens:

responsive-theme-01

responsive-theme-02

responsive-theme-03

Install a Mobile Friendly Plugin

If a site redesign with a new theme is just not practical at the current time, or is outside the scope of the client requirements, there are still other options available. One way to ensure that a WordPress site is still usable and accessible on a mobile device or tablet is install a plugin.

WPTouch

This free plugin has been downloaded over 4 million times and is a simple way to render a mobile solution for your WordPress site. The free version works with devices like the Apple iPhone and iPod Touch as well as Android phones and BlackBerry devices.

wptouch-01

With WPTouch you have access to many settings concerning how your sites will look when the mobile version is displayed. These include homepage redirection which allows you to choose what content is displayed on the homepage to mobile users visiting your site. You can also allow zooming in on content or not and enable or disable commenting amongst the many options.

wptouch-icons

With WPTouch you can also upload icons to be used for mobile devices or use the included ones. You can also set which, if any, advertising service you would like to display to mobile users including Google AdSense or your own custom code.

The Pro version of WPTouch comes with a number of improvements including different themes to allow you to offer more of a personalised service when working with clients.

As well as the free version, there is also a premium version of WPTouch with additional features.

Other Mobile Plugins for WordPress

While WPTouch is very easy to setup, it does use the same theme for all sites that make use of this plugin. If you want to retain some of the individuality of your site, while still ensuring it is usable on a mobile device, some of these plugins might be of interest:

Build a Separate Mobile Friendly Site

Duda Mobile is a premium service (with a limited free version) that allows you to build a mobile version of a website right in your web browser by working through a few simple steps. This app is ideal for web designers who are offering a service that involves creating a mobile friendly version of an existing website that needs more advanced features than the above WordPress plugins can deliver. It also works on most other sites, not just those built on WordPress, so is a versatile tool to have in your arsenal.

dudamobile

With the premium version you can add mobile device relevant icons and functionality to the sites you build including a click to call button, a mobile map button, a link to a restaurant menu and quick access to the display of business hours. These are all important functions that will be of particular interest to users viewing your site while on the go and looking to get in touch or find your location on a map.

dudamobile-02

Once you’re done, you can preview the mobile version of the site on a number of devices including the iPhone, Android, Windows Phone and Blackberry from within the Duda Mobile dashboard.

dudamobile-03

The premium version of Duda Mobile creates a subdomain for the mobile site you’ve just created which looks something like this m.wpsquared.com whereas the free version will be located at dudamobile.com/wpsqaured

This tool is great for those wishing to create a mobile version of their site which still looks like their site, using the same colours and branding but works great on a range of devices. The ease of which sites can be created is surprising and the whole process can be completed in a matter of minutes which will appeal to busy web designers.

To give this service a free try visit the Duda Mobile website.

Alternatives to Duda Mobile include:

Show Clients How Their Site Looks on Mobile Devices

If you want to persuade potential clients that their site is due a redesign or at the very least the creation of a mobile friendly version, then a plugin like MobiLead Magnet might be just the tool to use.

Get MobiLead Magnet

MobiLead Magnet Review

The MobiLead Magnet plugin for WordPress builds targeted landing pages that show and compare how non-responsive or non-mobile compatible sites are displayed on small screen portable devices. The landing page also displays a responsive site alongside the non-mobile friendly client site, showing how their site could function if it was if optimised for mobile devices. As a picture can convey 1,000 words, allowing a potential client to see how their website is rendered on a mobile device can be enough to persuade most people to commission a new site.

Creating a landing page with this plugin is very simple and a custom built webpage can be setup in no time at all. Multiple templates for the landing pages can be created allowing you to target different landing pages to specific types of client.

Create a landing page

If you have a list of prospective clients that you would like to create landing pages for, you can bulk upload their details in a CSV file and then import it into the plugin. This can save a lot of time and allow you to prospect a number of leads very quickly, each with their own targeted landing page displaying their site on a mobile device.

Using this plugin, it is also possible to email each client directly from within WordPress using the email address that was imported as part of the client details in the CSV file. You can create multiple email templates to ensure that the messages are sufficiently targeted.

mobileadmagnet-compare

While this plugin is a bit rough around the edges, it does appear to be unique it what it offers. If you are looking for creative ways to find new web design clients then this is one easy way to show a prospective client that their site isn’t functioning as they might think while also showing them an example of how it could work on a mobile device.

To find out more and get MobiLead Magnet visit the website for the plugin.

Conclusion

As you can see there are a number of ways to create a WordPress that site that can be viewed and used on a mobile device. While installing a free plugin such as WPTouch is the quickest and cheapest approach, remedying this problem could be a great opportunity to re-evaluate the appearance of your site and invest in a modern responsive WordPress theme.

For those that create mobile websites for a living some of the commercial tools such as Duda Mobile offer a great opportunity for providing a service that is very cost effective while consuming very little time. Combing one of these tools with a plugin like the MobiLead Magnet can increase your chances of appealing to your prospective customers and increase your client-base in a very time and effort efficient manner.