GESTURES

with jQuery mobile

Tap: Select a control or link

Double Tap: Automatically zoom in or out

Flick: Scroll or pan quickly

Drag: Scroll, move the viewport or pan

Pinch Open: Zoom in with more control

Pinch Close: Zoom out with more control

Touch & Hold: Display helper information, magnify content

 

Animations

Gesture controls are often paired with animations to help the user feel like they are truly interacting with the content and provide feedback that a gesture has successfully started or completed

Types of animation 

  • scaling
  • movement along a horizontal/vertical line
  • movement along an arc or circle
  • opacity / fade-in or out
  • squash and or stretch

UI components

  • Swiping: carousels, and swiping to reveals 
  • Tap: accordion to reveal more
  • Pinch open / close: maps

Most popular mobile UI components that use gestures include

Carousels

  • Do use them for image galleries or related content
  • Do "cut off" content on the screen so users understand that there's more to scroll
  • Do keep it simple
  • Do optimize your images/content
  • Do use arrows or another icon to let users know they can scroll left/right
  • Don't use them as "featured" content
  • Don't have them automatically advance
  • Don't hide important information behind a carousel

Swipe to reveal 

  • Do provide "hints" that will walk the user through
  • Do allow users to access actions/content another way
  • Do show part of the previous screen if you want users to swipe to "go back"
  • Do keep it simple
  • Don't provide icons or arrows to help encourage swiping
  • Don't create intricate animations

Accordions

  • Do use a "plus/minus"  or "up/down" arrows to give users an indication that they can expand and collapse content
  • Do use accordions to minimize scrolling
  • Do provide a simple yet delightful animation to reveal content
  • Don't hide too much content behind an accordion. Keep it simple
  • Don't hide important information behind accordions

jQuery demos

Page transitions, accordions

Theming

Theming

There are 3 themes included in the jQuery mobile framework

1. Default theme: A

2. Theme B

3. Theme C

You can change the theme by adding the attribute data-theme="b" to pages, headers and footers.

 

You can also use theme roller to create a custom theme

Themeroller demo

Phone Gap

An introduction

What is Phone Gap?

Developmental framework for building mobile apps

  • Created by Nitobi Software but currently owned by Adobe
  • Allows developers to leverage HTML, CSS and JavaScript to create web apps which can run as native apps
  • Adobe has spun off the basic framework as open souce under the name Apache Cordova

Advantages of  using Phone Gap

  • Supports all major OS platforms under the phone gap build service including: iOS, the iPhone and iPad engine, Android, Amazon Fire, Windows Phone and Windows 8, Blackberry, Firefox OS, Ubuntu, and Tizen
  • Can access native features including an accelerometer for device motion, camera, a compass, geolocation, and file management and storage
  • Build one app and distribute to all platforms

Let's explore Phone Gap

We'll be using Phone Gap Build for this class. build.phonegap.com

Made with Slides.com