jQuery Mobile

1-day jQuery Course in HTML5/CSS3 Mobile Web Design — JQUERY-03

jQuery Mobile Web Design TrainingCourse Overview

jQuery Mobile course, teaches you how to progressively enhance and gracefully degrade website site designs for mobile devices. Unlike many similar training courses, this one uses jQuery to:

So it is as concerned with the question of when and why to use jQuery Mobile, as it is with the mechanics of how to use it. For example, when JQuery Mobile duplicates native HTML5 and CSS3 features, we will point that out, and explain how to use it as a supplement, rather than as a complete alternative, to them.

As a result, this course is as well-suited to designers working in 'conservative' development environments as it is to those working at the bleeding edge.

Like all of our web design training, this jQuery Mobile course supports (W3C) web standards, cross-browser compatibility, and accessibility.

jQuery Mobile Web Design TrainingCourse Contents

Introduction — getting started with jQuery Mobile

  • What is jQuery Mobile?
    • Framework for cross-platform, mobile, web apps
    • Built on jQuery
    • Using standard HTML, CSS and JS
  • jQuery Mobile features
    • Supports all popular mobile platforms
    • Page templates
    • Rich set of UI widgets — e.g. form controls, list views
    • Scalable and responsive web design
    • Progressive enhancement
      • Graded browser support
    • Built-in WAI-ARIA accessibility
    • CSS3-style effects — e.g. transitions
  • Anatomy of a jQuery Mobile app
  • Build a simple jQuery Mobile app
    • Multiple pages in a single HTML5 file
    • Simple templating
    • Simpe navigation
  • Understanding jQuery Mobile pages
    • Linking — internal vs. external pages
    • Using AJAX vs. turning it off
    • Using HTML5 data attributes
    • Transitions between pages — using CSS3
    • Opening pages as dialogue boxes

Buttons, toolbars and form controls

  • Creating and positioning headers and footers
  • Creating and positioning navbars
  • Creating and using buttons
  • Understanding mobile forms
  • Basic inputs — text and search
  • Creating and using radio buttons and checkboxes
  • Creating and styling select boxes

Lists and content formattng

  • Simple list views
    • data-role=listview, tap-ability
    • dividers, count bubbles, icons
  • Advanced list views
    • Filters, placeholder filters, nesting, split buttons
  • Content formatting tools
    • 2 to 5 column layout grids
    • Collapsible blocks
    • Accordion controls — collapsible sets
    • Themes and swatches — incl. theme mixing

Events and the JQuery Mobile API

  • Events
    • Touch events — tap, taphold, swipe, swipeleft, swiperight
    • Scroll events — scrollstart, scrollstop
    • Orientation events — orietationchange
    • Page events — init, load, unload, change, transition
  • The jQuery Mobile API
    • Configuring jQuery Mobile via mobileinit
    • activePageClass, ajaxEnabled, defaultPageTransition, etc.
    • Utility methods/properties — changePage(), activePage, etc.

jQuery Mobile Web Design TrainingFurther Details

Target Audience

  • Experienced web designers
  • Experienced web developers
  • Mobile designers and developers

Training Pre-requisites

The following 2-day web design courses — or equivalent knowledge and experience:

Knowledge of CSS3 and HTML5 help, but is not required.

Training Style

This jQuery training course, is instructor-led, with hands-on, practical, exercises.