Call us at 1-800-413-0939
Hands On Technology Transfer
gsa

RWD/jQuery Mobile Training

Attend face-to-face, remote-live, on-demand or on site at your facility.

On-Demand Training with Personal Facilitation

PDF Download Download Catalog

Top

Developing Mobile Websites with Responsive Web Design and jQuery Mobile

Delivery Options: Attend face-to-face in the classroom, remote-live or via on-demand training.

Pricing

Face-to-face or remote-live: $2495

On-demand: $1495

Discounts: We offer multiple discount options. Click here for more information.

Duration

Face-to-face or remote-live: 5 Days

On-demand: Approximately 35 hours of coursework with personal facilitation, to be completed in a four week span.

Registration

Face-to-face: Click here to view our schedules and register for in-person sessions.

Remote-live: Click here to register for live remote class sessions within a date range of your choosing.

On-demand: Click here to register for on-demand training with personal facilitation, on a start date of your choosing.

View Schedule View Reviews

Students Will Learn

  • Designing and building a responsive Website
  • Setting the viewport of a Website
  • Writing CSS3 media queries
  • Scaling images and media
  • Creating responsive navigation and layouts
  • Using both CSS and jQuery to create tables that are responsive
  • Creating a jQuery Mobile page using the single page and multi page templates
  • Configuring fixed and full-screen toolbars
  • Configuring a custom theme using Themeroller for jQuery Mobile
  • Configuring jQuery Mobile using the mobileinit event and the $.mobile object
  • Using layout grids to format page content
  • Using the Panel widget to display a panel on a page
  • Creating collapsible content blocks using the Collapsible and Collapsibleset widgets
  • Building reflow and column-toggle tables using the Table widget
  • Building a responsive form using jQuery Mobile widgets
  • Providing filter capability to a page using the Filterable widget
  • Integrating jQuery Mobile with Web Services

Course Description

This hands-on jQuery Mobile training course conveys the fundamental skills necessary to design and build responsive web sites for mobile devices such as phones and tablets. Attendees will use responsive web design (RWD) techniques such as CSS3 media queries and flexible layouts to build mobile-compatible web sites. Students will learn how to test mobile websites using emulators and simulators.

The responsive web design training course also provides an extensive introduction into using the jQuery Mobile Framework for building mobile-specific web sites. Students will learn how to use jQuery Mobile widgets to create forms, lists, toolbars and collapsible blocks. Students will also learn how to integrate SOA with a mobile web site including working with RSS feeds, Google Maps integration and implementing server-side data access.

Attendees will use ThemeRoller for jQuery Mobile to download existing or custom theme swatches to format the appearance of a web site. Additional topics include responding to user events, configuring jQuery Mobile defaults and using page transitions. Comprehensive hands on exercises are integrated throughout this jQuery Mobile course to reinforce learning and develop real competency.

Course Prerequisites

Prior knowledge of HTML, CSS, JavaScript and jQuery equivalent to attending the Website Development with HTML5, CSS and Bootstrap, JavaScript Programming and jQuery Programming courses.

Course Overview

Overview of Responsive Web Design
  • What is the Mobile Web?
  • Defining Responsive Design
  • Responsive Web Design (RWD) Principles
  • Responsive Layout vs. Adaptive Layout
  • Designing for Mobile First
  • Progressive Enhancement
 Viewport and Media Queries
  • Working with Viewports
    • viewport Meta Tag
    • @viewport Rule
  • CSS3 Media Queries
    • Media Types
    • Logical Operators
    • Media Features
      • Browser Height and Height
      • Device Height and Height
      • Orientation
      • Resolution
  • Determining Breakpoints
  • Installing and Using Viewport Testing Tools
Creating Responsive Layouts
  • Fluid Grid Layouts
    • Calculating Fluid Grid Layouts
    • Predefined Grid Systems
  • Creating Flexible Images and Video
  • Optimizing Images for Retina Displays
  • Responsive Typography
    • Using Ems, Percentages and Rems
    • Viewport Units
  • Responsive Navigation Patterns
  • Designing Responsive Tables
  • Creating a Responsive HTML5 Page
 Overview of jQuery Mobile
  • What is jQuery Mobile?
  • Configuring and Downloading the Mobile Library
  • jQuery Mobile File Structure
  • Working with HTML5 data- Attributes
  • jQuery Mobile Page Structure
Overview of the jQuery Mobile CSS Framework
  • Explanation of Themes and Swatches
    • Applying the "a" and "b" Swatches
  • Using the data-theme Attribute
  • Overview of jQuery Mobile Intrinsic Classes
  • Using ThemeRoller for jQuery Mobile
    • Exploring the ThemeRoller UI
    • Upgrading Existing Themes
    • Defining Custom Swatches
    • Downloading and Applying a Custom Theme
 Creating jQuery Mobile Pages
  • Overview of the Page and Pagecontainer Widgets
  • Using Single-Page vs. Multi-Page Templates
  • Prefetching Pages
  • Caching Pages in the DOM
  • Configuring the Loader Widget
  • Navigating Between Pages
    • Using Page Transitions
    • Ajax-Driven Page Navigation
    • Hash-based Navigation
  • Displaying Pages as Dialogs
Adding Content to a Page
  • Adding Specialized Hyperlinks
    • Maps
    • Email
    • Phone
  • Integrating with Web Services
  • Making Ajax Requests
  • Displaying XML Content
  • Displaying JSON Content
  • Working with Multimedia
  • Organizing Content with Grids
  • Creating Responsive Grids
 Using jQuery Mobile Widgets
  • Examining the Widget Factory
    • Instantiating a Widget
    • Calling Widget Methods
    • Setting Widget Options
    • Registering Widget Events
  • Configuring Widget Options using JavaScript
  • Using the data-role Attribute to Create a Widget
Adding Toolbars to a Page
  • Adding Headers and Footers
  • Positioning Toolbars
    • Inline
    • Fixed
    • Fullscreen
  • Auto-Generated and Customized Back Buttons
  • Adding Content to Toolbars
  • Using the Navbar Widget
  • Persisting Toolbars Across Pages
 Working with List Views
  • Creating Lists with List Views
    • Read-only
    • Interactive
  • Creating Numbered Lists
  • Creating Inset and Non-Inset Lists
  • Formatting List Content
    • Adding Images to Lists
    • Creating Split Buttons
    • Creating Count Bubbles
  • Working with Nested Lists
  • Defining a Filterable List
Working with Forms
  • jQuery Mobile Form Requirements
  • Form Auto-Enhancements
    • Textinput Widget
    • Checkboxradio Widget
    • Selectmenu Widget
    • Slider Widget
    • Rangeslider Widget
  • Creating Accessible Forms
  • Defining Field Containers
  • Grouping Controls with the Controlgroup Widget
  • Adding Input Fields
    • Single-line and Multi-line Text Fields
    • Email, Telephone and Search Fields
    • Checkboxes and Radio Buttons
  • Working with Select Menus
    • Native Select Menu
    • Custom Select Menu
      • Allowing Multiple Selections
      • Disabling Menu Options
      • Adding Placeholders
  • Using a Slider for Numeric Input
    • Controlling a Slider's Appearance
    • Using Slider Events
  • Selecting a Range of Values with Rangeslider
  • Creating a "Flip" Switch
 Working with Buttons
  • Creating Buttons
    • Using the <a> Tag
    • Using the <input> Tag
    • Using the <button> Tag
  • Defining Inline Buttons
  • Creating Button Groups
  • Configuring Buttons with Attributes and CSS Classes
  • Formatting Buttons
    • Native Buttons
    • Inline Buttons
    • Adding/Removing Rounded Corners
    • Theming Buttons
    • Adding/Removing Drop Shadows
    • Minifying Buttons
    • Adding Icons
Responding to Events
  • Registering Event Handlers
  • Comparison of ready and pagecreate Events
  • Introduction to Page Events
  • The mobileinit Event
  • Registering Events in jQuery Mobile
    • Touch/Swipe
    • Orientation Change
    • Scroll
    • Virtual Mouse Events
    • Widget-specific events
      • Slider Widget
      • Tabs Widget
      • Collapsible Widget
 Integrating JavaScript and jQuery Mobile
  • Configuring Default Settings Using the $.mobile Object
    • Enabling Ajax
    • Setting Default Page Transitions
    • Preventing Transitions
    • Preventing Auto-Enhancement
    • Customizing Error Messages
  • Storing and Removing Arbitrary Data
    • Working with URLs
    • Performing a Silent Scroll
  • Loading and Changing Page Content Dynamically
 Creating Popups
  • The Popup Widget
  • Positioning Popups
  • Dismissing a Popup
  • Adding a Close Button
  • Modal Popups
  • Using Popups for Tooltips
  • Embedding Content in Popups
    • Images
    • Video
    • Iframes
  • Theming Popups
  • Using Popups for Navigation
  • Displaying Popup Transitions
  • Reusing Popups on Multiple Pages
 Adding Panels
  • Using the Panel Widget
  • Setting a Panel's Position
  • Setting the Display Mode
    • Reveal
    • Overlay
    • Push
  • Opening and Closing Panels
  • Creating the Open Button
  • Controlling Close Behavior
  • Adding Fixed Panels
  • Making Panels Responsive
  • Reusing a Panel on Multiple Pages
  • Updating a Panel Dynamically
Displaying Pages as Dialogs
  • Dialog Overview
  • Customizing a Dialog
    • Adding a Close Button
    • Theming
  • Linking to the Dialog
  • Chaining Dialogs Together
  • Displaying Dialog Transitions
 Creating a Tabbed Interface
  • Using the Tabs Widget
  • Creating Content Panels
  • Defining the Tabs
    • Navbar
    • Listview
    • Buttons
  • Configuring the Tabs Widget
    • Customizing Options
    • Handling Tab Events
    • Loading Content with Ajax
Creating Responsive Tables
  • Using the Table Widget
  • Overriding CSS Classes
  • Reflow Table Mode
    • Applying the ui-responsive Class
  • Column-Toggle Table Mode
    • Prioritizing Columns
    • Customizing the Columns button
    • Customizing the Appearance of the Column Picker Popup
 Adding Collapsible Content
  • Using the Collapsible Widget
  • Controlling a Collapsible's Appearance
    • Adding a Theme
    • Using Custom Icons
    • Minified and Inset Collapsibles
  • Opening a Collapsible by Default
  • Nesting Collapsibles
  • Opening/Closing Programmatically
  • Creating Groups of Collapsibles
Making Content Filterable
  • Using the Filterable Widget
  • Defining a Search Field
  • Using "Reveal"
  • Using a Remote Data Source
  • Filtering on Alternative Text
  • Controlling Filterable Items
  • Defining a Custom Filter Function
 Web Services Integration
  • Working with RSS Feeds
  • Google Maps Integration
  • Server-Side Data Access

Course Benefits

  • Course materials include student guide, hands-on lab manual and USB flash drive for examples and lab work
  • Students receive a certificate of completion at the end of class
  • Students can retake any portion of a live class that has been completed, within 12 months at no extra cost
  • There are no registration fees or cancellation fees

Reviews

Thanks to the instructor for leading the best course I have ever attended. Not only did the instructor have a thorough knowledge of the subject, but he also had the unique ability to present in a fashion that was professional and very interesting. The course material was of high quality with a lot of hands on examples.
— A.B., City of Toronto

Course Schedule

Choose a city below to view a schedule and registration options. If you have any questions, please call us at 978-250-4299 between 9:00 am - 5:00 pm EST.

Northeast/New England

Southeast

Midwest

West/Southwest

Address

Hands On Technology Transfer
The Best Way to Transfer Technology Skills

1 Village Square, Suite 8
14 Fletcher Street
Chelmsford, MA 01824

Contact

800-413-0939 | 978-250-4299

Mon - Thur: 9 am - 5 pm EST
Fri: 9 am - 4 pm EST

customer-service@traininghott.com

Useful Links

Copyright© Hands On Technology Transfer