User Interface Design using jQuery Mobile CIS 136 Building Mobile Apps 1

Navigation Patterns Primary and Secondary 2

Navigation 3  App ratings  4-5 star reviews  Great app  Works well and looks good  1-2 start reviews  Offer truer picture  Most common complaints  Crashing  Lack of features (syncing, filtering, linking)  Confusing interface design  Poor navigation  Can’t go back and find things  Design patterns can fix the last two  Good navigation is invisible

Primary Navigation 4  Persistent  Navigating from one primary category to another  List Menu or Tab Menu  Transient  Revealed through tap or gesture  Due to sizes of smartphone screens  Create side-drawer navigation pattern  If menu needs to be present, use Persistent

Primary Navigation 5  Springboard  Landing screen with options that act as launch points

Primary Navigation 6  Cards  Stack, shuffle, discard, flip

Primary Navigation 7  Cards  Stack, shuffle, discard, flip

Primary Navigation 8  List Menu  Show topics hierarchically  One choice per screen until the destination is reached

Primary Navigation 9  Dashboard  Snapshot of most relevant info  Similar to Springboard and List Menu

Primary Navigation 10  Gallery  Displays live content arranged in a grid or carousel

Primary Navigation 11  Tab  Similar to Springboard and List Menu  Content opens on own tab

Themes Web view appearance 12

Themes 13  jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors.  Provides a consistent and touch-friendly look and feel for your widgets across platforms. It is built around the following essential concepts: 1. Swatch - one of several color schemes provided by your theme  uses single-letter designations  the default jQuery Mobile theme provides two swatches  "a" swatch is a neutral, gray swatch  "b" swatch has a darker color scheme designed to contrast with the "a" swatch. 2. Active State  The theme defines an "active" state  Gives immediate feedback upon a user action if there should be a brief processing delay  most mobile devices implement a 300ms delay between the time when the user lifts her finger from the touchscreen and the triggering of the "click" event  JQM adds the "active" state to a button whenever the device is poised to emit a "click" event so the user receives immediate feedback that the application is committed to processing the "click" in the next 300ms.

Themes (cont.) Theme inheritance  You do not need to specify a swatch for everything  A swatch defined on the outermost container will be inherited by all the tags in the container  Can override swatch for portions of a container by specifying a theme swatch for one of its subcontainers  Can also build your own custom themes  Can also download and use 3 rd party themes  Note: Different releases of jQuery have different themes  is a very popular release

How to implement a theme 15  jQuery Mobile (v 1.4) provides two different style themes, "a" and "b" - each with different colors for buttons, bars, content blocks, and so on.  To customize the look of your application, use the data- theme attribute, and assign the attribute with a letter: 

data-theme = “a” 16  Black text on a light gray background for page content  Black text on a gray background for headers and footers  Black text on a light gray background for buttons  White text on a blue background for active buttons  Blue text on links  Light gray text (placeholder) or black text (value) on a white background for input fields

data-theme = “b” 17  White text on a dark gray background for page content  White text on a dark gray background for headers and footers  White text on a charcoal background for buttons  White text on a "cyan" blue background for active buttons  "Cyan" blue text on links  Gray text (placeholder) or white text (value) on a black background for input fields

Theming headers, footers, and popups 18  Use data-theme attribute

Theme Classes 19  two theme classes: a (gray) and b (black)  you can also create your own, custom class values  all the way up to the letter "z" ClassDesription ui-page-theme-(a-z)Specifies the color for pages ui-btn- (a-z)Specifies the color for a button ui-body-(a-z)Specifies the color for a content block, popups, lists etc. ui-bar- (a-z)Specifies the color for a bar (footers, headers, and other bars)

Theming buttons 20  Use styles defined in jQuery classes  Black Button

Theme overrides 21  add new styles by using theme classes in local stylesheet  add the class "ui-bar-(a-z)" for toolbars  "ui-body-(a-z)" for the content  ui-page-theme-(a-z)" for the page.ui-bar-f { color: red; background-color: yellow; }.ui-body-f { font-weight: bold; color: white; background-color: purple; }.ui-page-theme-f { font-weight: bold; background-color: green; }

Pop-Up windows Different in JQM

Pop-Ups 23 Learn more at  Popups are similar to dialogs, in that they both overlay a part of a page  useful when you want to display small text, photos, maps or other content  To create a popup:  start with an element and a element. Add the data-rel="popup" attribute to, and the data-role="popup" attribute to. Then specify an id for, and set the href of to match the specified id. The content inside is the actual content that will pop up when a user clicks on the link.  Note: The popup must be within the same page as the link. Show Popup This is a simple popup.

Positioning Pop-Ups 24 Learn more at  By default, popups will appear directly over the clicked element  To control the position of the popup, use the data-position-to attribute on the link that is used to open the popup.  There are three ways of positioning the popup: Window id="demo" Origin

Closing Pop-Ups 25 Learn more at  By default, popups can be closed either by clicking outside the popup box or by pressing the "Esc" key.  If you do not want the popup to be closable by clicking outside the box, you can add the data-dismissible="false" attribute to the popup  You can also add a close button to the popup, placed either right or left. Close Close

Pop-Up Arrows 26 Learn more at  To add an arrow to the popup's border, use the data-arrow attribute, and specify the value "l" (left), "t" (top), "r" (right) or "b" (bottom): Open Popup There is an arrow on my BOTTOM border. There is an arrow on my BOTTOM border

Pop-Up Photos 27 Learn more at  Can display images in pop-ups