In this guide we will talk about how make your site mobile with the WPTouch Mobile Plugin.
Have you ever tried to visit your site from a tablet or smartphone?
Try to open your web pages from the first smartphone you find and check how they are displayed.
It is essential that websites are perfectly responsive, that is, they are best visible even from mobile devices.
The number of people browsing the web from smartphones, tablets, iPads and other devices is constantly growing.
Just as the number of purchases made online from mobile devices is also increasing.
Whatever your industry – and the type of customer you are targeting – it is a problem that you can no longer ignore.
WordPress offers you many themes and plugins to make your site responsive. Start working on it today.
What is WP Touch Mobile Plugin
Specifically, I want to introduce you WPTouch Mobile.
This plugin serves, in a nutshell, a generate a mobile version of your site (with its own theme) which is shown to users when, in fact, they search for your URL from a portable device.
When you visit the site from a normal PC, the desktop theme appears instead, with all its features and configurations.
There is therefore an important difference between using a responsive theme and a plugin like WPTouch Mobile: while in the first case the contents are “simply” repositioned and resized within the theme so that they fit on small screens, In the second, the site is shown using a different template, specific for mobile devices.
In the next section we will elaborate on why this is important.
Why use WP Touch Mobile
In recent years, WordPress sites have undoubtedly become aesthetically very beautiful, packed with features, effects and images.
Very often, these effects are however obtained using javascript codes, css and images that tend to slow down the loading of the site, especially when the user tries to open pages from a mobile device that uses an internet connection that is not particularly stable.
It is essential that i websites load in seconds, especially on smartphones.
For this reason, WPTouch Mobile themes have been developed to be as fast as possible, eliminating everything unnecessary on mobile.
Furthermore, as we will see in the section relating to the configuration of the plugin, WPTouch Mobile (PRO version) allows you to choose which plugins to keep active or not on the site when it is viewed from a smartphone.
Plugins can have a major impact on your site’s performance.
In this regard, I recommend that you read the guide we have published on Query Monitor.
WP Touch Mobile and e-commerce sites
It has been tested that a faster site has more conversions – that is, more sales.
For this reason, especially if you run an eCommerce site it is important that you make sure that there are no delays in loading pages, or, even worse, in the purchase process.
Fortunately, WPTouch Mobile recently launched a theme designed specifically for WordPress sites that use the WooCommerce plugin , to make the user experience (the experience on the site of your users) simple and fast.
Even from mobile your products will always look their best.
How to set up WP Touch Mobile
Now that you know what WPTouch Mobile is for, let’s see how to set it up.
The first positive thing to note is that the plugin has also been translated into Italian, both as regards the pages viewed by users and the administration panel within the WordPress dashboard.
When you install WPTouch Mobile, you will find a new section in your WordPress Dashboard – called WPTouch.
Let’s start configuring the plugin.
Main settings
Here you will find the most general configurations: you can set the name of your site, the language to use and (this is an interesting option) even a page to use as a homepage for those who visit your site from a mobile device.
If you subscribe to a PRO plan, you will also be able to download and restore backup files.
But be careful: this is not a backup of the site but only of the WPTouch Mobile settings.
If you want to create site-wide backups take a look at how to backup a WordPress website with Duplicator.
Different looks with integrated themes
Once you have configured the more general options, you can start working on the look of the site.
WPTouch Mobile developers have created various themes.
However, only one of these is available for the free version (specifically, the one already selected when you activate the plugin, called Bauhaus ).
This free theme is still very modern and effective (in the following paragraphs we will see how you can customize it with the available options).
Important note!
If you want to manage an e-commerce site, the theme for you is MobileStore(compatible with WooCommerce and, unfortunately, only available for those who subscribe to a premium plan).
Extensions
In addition to the themes, the developers of WPTouch Mobile have also worked on extensions, always integrated only in the pro version of the plugin.
The available extensions are for:
- create and publish specific content for mobile devices( Mobile Content )
- enable font families,including those Google Fonts ( Advance Type )
- enable an optimized caching system for WPTouch Mobile( Infinity Cache )
- optimize images for devices of various sizes( Responsive Images )
- manage multiple advertising spaces and do A / B testingto identify the most effective campaigns ( Multi-Ads ).
Theme settings
In this section you will find all the options to customize the theme you have chosen.
Again, not all options are available to those using the free version of the plugin.
In the “Brand” tab, however, you can do the following:
- choose a color scheme for your theme, so that it is aligned with what you use for the site visible from PC.
- obviously upload your logo and also choose a font combination that is close enough to your main theme.
- Insert some social links (except LinkedIn, Pinterest, YouTube and Vimeo).
Web-App mode
This is a very cool feature.
If you sign up for a premium account, you can create a real application for your website, with a few clicks.
Users will be able to add the shortcut to the app directly on their smartphone desktop.
In this section, you can then upload icons for the shortcut and also a custom image for the startup screen.
Finally, by clicking on the “Advertising” tab, you will access all the options relating to the display of advertising banners on your site. As we have already mentioned, this feature is only included in the premium plans.
At any time, you can preview your site in mobile version by clicking the “Theme Preview” button at the bottom of the page.
Menu
This is another important section to set up for the mobile version of your site.
Often, browsing within the sites is quite difficult when using a mobile device.
How many times has it happened to you to expand a menu that had a lot of items and, using your phone, accidentally click on a link instead of another?
This happens because the space available on the smartphone screen is obviously very limited.
It is therefore advisable to create a menu for the mobile version of your site with as few items as possible.
Remember that using WordPress you can create as many menus as you want.
By navigating to Menu> Appearance, create a menu for the mobile version of your site.
Then, assign it in WPTouch> Menu> Theme Menu> Header Menu.
If you wish, you can also use icons for menu items (You can find them by clicking on the “Upload Icons and Sets” tab.)
WPTouch Mobile Pro
As you have surely already guessed from the previous paragraphs, the free version of WPTouch Mobile is quite limited.
Many of the most interesting features (for example, the ability to choose from the many available themes, WooCommerce support, custom fonts, advertising management, caching functionality and many customization options) are only available for those who subscribe to one of the premium plans.
There are 4 available:
- Go Pro ($ 69)
- Business / Mobile Store ($ 179)
- Developer ($ 249)
- Enterprise ($ 349)
The main difference between one plan and another is the number of sites on which WPTouch Mobile can be used, multi-site support and access to dedicated technical support
There Go Pro version offers three themes: “Bauhaus, Simple and Prose” and four extensions.
This package meets the needs of a small site for small businesses, blogs, sites with a lot of text content such as those of writers etc.
The extensions offered are: “Basic Ads, Mobile Content, Related Posts and jQuery Enhanced”.
Basic Ads provides you with advertising support through Google Adsense.
Mobile Content allows you to view content dedicated to mobile visitors.
Related Posts provides reading tips to extend visit times on your site.
jQuery Enhanced improves the loading times of your site on mobile devices (such as tablets, smartphones, laptops etc.)
If you have an e-commerce site, the package for you is the “Business / Mobilestore, the price starts to be important (179 $) but you will have access to the” MobileStore “theme, a theme designed for Woocommerce plugins and with full support for mobile devices.
This theme offers a grid or list view for products, various search filters, recently viewed products and lots of features on par with or near major e-commerce sites.
Also noteworthy is the purchase process, with a simple design and various options for payment methods.
First, I therefore advise you to monitor with Google Analytics what percentage of your audience visits the site from mobile devices.
In this way, you will actually have concrete data in hand to evaluate before subscribing to a WPTouch Mobile plugin plan.
Overall, however, if you use WordPress to manage a “simple” blog, the free version will probably be more than enough to get you started.
Beware of shortcodes
The shortcode they are a very important aspect to pay attention to when working with WPTouch Mobile Plugin.
More and more themes (the standard ones for desktop) have a lot of built-in features that are enabled by inserting shortcodes directly on the page.
For example: buttons, contact forms, sliders, call-to-action, widgets and more.
As we have already seen, WPTouch Mobile actually serves to activate a different theme on your site when users visit the pages from a mobile device.
Here comes the problem: when a new theme is activated on your site, even if temporarily, the proprietary shortcodes of the template you have inserted on the pages will obviously no longer be recognized.
Tags will then be displayed within the content.
This is no small problem.
Fortunately, recently, the developers of WPTouch Mobile Plugin have been working on a solution to temporarily disable and remove shortcodes.
This feature is also only available for pro versions of the plugin.
Alternatively, you can keep this issue in mind and perhaps limit the use of your theme’s proprietary shortcodes, unless they are absolutely essential.
Also, if you know that there is a page that would have several problems to be displayed on mobile, consider the possibility of excluding it using the appropriate feature that you find in WPTouch> Main Settings> Compatibility> Filter URL.
So, that specific URL will continue to display with your theme, if available, with a responsive layout.
WPTouch Mobile Plugin and Cache
One of the most common problems of those who use WPTouch Mobile Plugin is that even on the PC the mobile version of some pages, if not the whole site, is occasionally visible.
In most cases, this happens because another plugin installed on the site (for example, W3 Total Cache or Super Cache) created a static copy of the WPTouch version of the pages in question.
To solve this problem usually is just clear the plugin cache.
Conclusion
I hope you enjoyed this guide: having a site perfectly visible on any screen size is really important and WPTouch Mobile Plugin is a great tool to try.
First, I invite you to test how your site looks on smartphones, tablets and whatever device you can find.
Let me know if your site is visible, if you have already tried WPTouch Mobile or a similar plugin, or if you have relied on the responsive layout of the template you are using.
As always, for any questions, ideas or suggestions, leave your comment below.
