Users are increasingly getting accustomed to navigate a website with taps and swipes. But when you'll jump out of an app and access browser via a tablet probably you'll start swiping to navigate around some site – only to find that it doesn't work. This is particularly the case with tablets that can be used to access standard sites, while you can access mobile-friendly sites via Smartphones.
Let's have a look at some of the gestures that you need to implement in your site for mobile users:
- Swipe Left – to navigate to the next post
- Swipe Right – to navigate to the previous post
- Double Tap – to move to the page of your choice (by default the page is your website home page)
The ability to swipe largely depends on on the “prev” and “next” tags that are added to the WordPress header file. So, if your theme is not displaying these tags then most likely your theme doesn't contains the wp_head function or is not calling the function. Also, the output of the “prev” and “next” links may be disabled.
Wondering about the solution?Well, the solution to your problem lies in a plugin, so let’s first understand about the plugin that helps to add gesture support to your site and how it can be used.
Setting up a Plugin to Add GesturesThe plugin here we're talking about is Wp-Gestures. Installing the plugin help users to enable a feature in their WordPress site that allows using mouse gestures to move to the next post or the previous one or return back to the home page, as shown in the following screen shot.
Let's begin with the process of installation.
Step 1 – Plugin InstallationYou can install the Wp-Gestures plugin from GitHub, and then upload it to your WordPress site. Next, open your WP dashboard go to Plugins>>Add New, and activate the plugin.
Step 2 – Changing The SettingsYou might want to make some changes or updates to the plugin settings. For this purpose, go to Settings>>Gestures and you’ll find 2 settings as shown in the image below:
The second option enables to add the page that will be displayed when the user double-tap on the device screen.
You can change the options as per your requirements and click on “Save Changes”.
Step 3 – Don't Forget to Test!Now that you've installed the gesture plugin and updated its stetting, go to your website and test whether the gestures are working or not. The test can be performed in 3 ways as listed below:
Simulator: You can view your website in a mobile simulator such as iOS Simulator, and imitate the taps and swipes just like you do on desktops.
Handheld devices: Certainly the most viable way to test whether the gestures are working or not requires testing on a handheld device. You can access the site via your handheld device, and then perform the gestures by simply tapping and swiping the screen as normal.
Check out the Desktop: When viewing a site via desktop, try to swipe the screen by pressing the mouse button and then drag the cursor to left or right; or just make a double click.
No matter, which device you're using for testing, make sure that you're able to swipe the screen left and right that navigates you in-between the posts, while a double-tap will take you the page (that you specified in Step2).
ConclusionMore and more people today are making use of mobile devices, such as the Smartphones and tablets, to view websites. While accessing a site via mobile devices, users develop a habit to swipe and tap the device screen.
Although, Smartphones provide access to mobile-friendly sites, tablets display standard sites. Thus, it becomes necessary to make tablet-friendly sites that support gestures. You can build a WP site with gestures by using a plugin and can even test whether it works or not, as discussed above in this post.
About Me:- Ben Wilson is a consistence and enthusiastic writer cum developer. His core hand is Wordpress conversion services including PSD to Wordpress conversion, HTML to Worpress conversion and many more. Presently he is working with one of biggest Wordpress service company – WordPrax Ltd. known for providing high quality works to their clients.
By Toon Creffield →