Cookies setting
1

Touch The Web: Introduction

With mobile devices flooding the market, web design tries to follow the trends and adapt to the new technologies. Most of the time the wrong way. I am talking about mobile versions of websites that deprive the user of the full content of the page or pointless standalone apps. The right way would be using responsive web design methods just to adapt the size of the page to the media that it’s running on. I’ll talk about this in detail soon in a article about Sussy responsive grids for Compass. This is going to be a 3 part series of articles, on how to take advantage of touch technologies on web sites. I’ll focus on the results of my experience with this technology and what to use and how.

If you google “touch screen”, “touch screen events” or something similar it will give you all the information on how the touch screen works and what are the usual touch screen events. As usual I don’t want to write something that has been done over and over before, so for easyer understanding of this article, get the basic knowledge of touchscreen technologies from there if you don't already have it. Of all the plugins/frameworks or whatever they want to call themselves, there are really ultimately 4 choices:

 

Some JS API like jQuery Mobile have some support for touch and touch gestures, but basically they give you generic tools for quickly building mobile websites. Other that the the design being generalized (which is not all bad) they lack support for multitouch gestures. A more lightweight and single touch only oriented solution is pep.js. The documentation speaks for itself and implementing the basic functionalities takes almost no code $('#element').pep();. Other than the do it all yourself method hammer.js is the ultimate choice. I’ll talk in depth about both in part 2 and 3 of the series.

08 May 2013 at 15:35


CraziestOzzy
23 May 2013 at 06:05

Looking forward to part 2 and 3.
Stumbled here courtesy of a few Booleans referencing “hammer.js”. I “discovered” that script only today, so still unsure of it’s reliable use…especially on Android devices.
That script and “pep.js” holds much promise and is not bloated.
I have been long searching for a simple WORKING solution to an even more simple website I am designing, that is BOTH friendly to swipe gestures and “mouse clicks”.
Regarding touch gestures, it’s got me stuffed why there is still no standard that hardware and software developers adhere to.
It’s also got me stuffed why “position:fixed” is still a horse to implement :/ ..but that’s another story.

Anyways, thanks for your input and look forward to what you have to say.
Cheers from Australia :D



(required)

(required)