Angular
Swipe Gesture
Gravatar is a globally recognized avatar based on your email address. Swipe Gesture
  Harvey Mushman
  All
  Feb 20, 2018 @ 07:07am

Not that I'm trying to recreate Tinder but I am thinking of adding Swipe Gestures (Left and Right) to a notification routine I'm developing. The notes will be presented in a long list, one screen size per message on a mobile device. On a desktop machine I really like this message board layout with a scroll list of messages on the left and each message on the right.

Each message will have a read and unread state that will be controlled by the user settings. The default will be to only show unread messages.

The idea of swipe gestures, left to mark read and right to skip to the next one seems like one possible way to handle the basic mobile interface.

AngularJS Material Swipe Demo

I guess the simpler solution is to create a long scroll list of the messages and include a button or some sort of control to mark a message read. This concept would also work on the desktop very easily.

Any thoughts? ...mobile first?

Gravatar is a globally recognized avatar based on your email address. re: Swipe Gesture
  Rick Strahl
  Harvey Mushman
  Feb 20, 2018 @ 11:13am

I would think long and hard about using swipe gestured in the browser because swiping already has meaning on a Web page (forward and backwards). Unless it's really obvious what the swipe gestures are (ie. a carousel or a slide panel) slide operations are usually not the best of ideas.

If you do want to use swipes etc. there are a number of libraries that facilitate that process across browsers. The behavior varies a bit so a library. The one I see most frequently used (I haven't used it since it's been a while since I needed it) is hammer.js. I've used others, but hammer is what gets pulled into various other common libraries these days.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Swipe Gesture
  Harvey Mushman
  Rick Strahl
  Feb 20, 2018 @ 10:31pm

OK, I'm convinced, flexbox and buttons!

Thanks

© 1996-2024