A better approach to mobile using swipe

This is the first time I am writing something on swipe actions. I know it is a developed technology but is it really? Well, being developed is not enough unless developers put this on use.

Mobile is right now provides 90% views for Facebook, do you know why? Because not only their app but their web is a touch friendly site. Google earns his most revenue from Adsense and right now Adsense is a mobile friendly platform for Publishers. So what it is that really pushing the web forward, it is putting native stuff into web and swiping feels more native, or isn't it?
Before we start, the jQuery plugin we are going to use is TouchSwipe, developed by Matt Bryson.

Touch Swipe

Instead of how to use lets see when to use swipe.

See the Pen A swipe demo by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

jQuery Mobile for Swipe

There is no way to detect a swipe with native Javascript but jQuery mobile. I found an article here, on detecting swipe with Javascript but I think its really not good idea to use it.

jQuery Mobile's swipe API is great.

Triggered when a horizontal drag of 30px or more (and less than 30px vertically) occurs within 1 second duration.

I don't want to stretch this up. Have a look at API and DEMO here.

Day to day uses

Here are some of the common uses for swipe

An alternate to Blog Pager

Blog pagers are those links which navigate the user to previous article or upcoming one, it could be in social media sites for navigating to older post however loading more with sync loading is more in use. No matter where the pager is located but if a user wanted to get to the newer post, I guess swipe comes to rescue first.

What I see in most smart phone users is the scrolling of pages on home screen or app drawer. This is the first action after unlocking the phone and might be the most frequently used after the touch. So what think is developing that psychology in website would help to create a friendly site.

Its totally up to you how you want to handle stuff on swipe, either it would redirect the page or load the content from server and update the DOM. The best example is the Blogger default themes, which are quite simple and non attractive but they have swipe navigation for posts.

Image galleries

I guess this is the most obvious use of swipe, however very few mobile sites follow it however those buttons on screen takes a lot space instead hide those buttons if user doesn't touch for a short interval and add swipe option for them.

Today jQuery sliders even support these swipe actions and some of them are listed below:

• Owl
• BxSlider
• Swiper

Content rotation

A few days back I shared about accessibly rotate content. The sites with lot of content at a single page display their contents in different tabs or sub pages to make sure a good loading time. Swipe is a good solution for instant content rotation.