Hands On Technology Transfer Computer Training
Hands-On Technology Transfer presents

Developing Mobile Websites with Responsive Web Design and jQuery Mobile (Canada) On-Site Training

This on-site training class is also available as Public Schedule Seminar.

This hands-on 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 grids to build mobile-compatible web sites.

Course Description/Agenda

This hands-on 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. Coverage includes working with mobile-related JavaScript APIs such as Screen Orientation, Battery Status and Vibration. Additional APIs such as Fullscreen, Web Storage, Geolocation and History are also discussed.

The 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 to reinforce learning and develop real competency.

Course Prerequisites: Prior knowledge of HTML, CSS, JavaScript and jQuery equivalent to attending the Web Site Development With HTML/JavaScript and Developing Rich Internet Applications Using HTML5, CSS3 and jQuery courses.

What You Will Learn

  • Creating a Responsive Website
  • Using CSS3 Media Queries
  • Optimizing Images and Media
  • Working with the Viewport
  • Incorporating JavaScript APIs
  • Configuring and Downloading the jQuery Mobile Framework
  • Using jQuery Mobile Widgets
  • Formatting Mobile Pages with ThemeRoller
  • Reacting to Mobile Specific Events
  • Integration with Web Services

Workshop Agenda

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
Using JavaScript APIs
  • Screen Orientation
  • Fullscreen
  • Page Visibility
  • Vibration
  • Battery Status
  • Geolocation
  • Web Storage
  • History
Overview of jQuery Mobile
  • What is jQuery Mobile?
  • Configuring and Downloading the Mobile Library
  • jQuery Mobile File Structure
  • Working with Data Attributes
  • Creating a Simple jQuery Mobile Page
  • Using Transitions
  • Navigating Between Pages
    • Ajax-Driven Page Navigation
Working with ThemeRoller for jQuery Mobile
  • Downloading a Theme Swatch
  • Creating a Custom Theme Swatch
  • Theme File Structure
  • Adding Themes
  • Defining Custom Backgrounds and Fonts
Displaying Content
  • Creating Dialogs and PopUps
  • Defining Collapsible Content Blocks
  • Creating Menus
  • Defining Page Content
  • Displaying Tabular Data
  • Displaying XML Content
  • Displaying JSON Content
  • Working with Multimedia
  • Using jQuery Mobile Grids
  • Types of Toolbars
    • Headers
    • Footers
  • Creating Fixed Headers and Footers
  • Hiding Toolbars with Fullscreen Mode
  • Adding Buttons and Images
  • Creating Customized Back Buttons
  • Defining Multi-Column Layouts
  • Creating Persistent Navbars
Working with List Views
  • Creating Lists with List Views
  • 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
  • Updating List Content
Working with Forms
  • jQuery Mobile Form Requirements
  • Styling Field Containers
  • Working with Input Types
    • Text
    • Search
    • Radio Buttons
    • Checkboxes
  • Working with Select Menus
    • Allowing Multiple Selections
    • Auto-Initializing a Select Menu
  • Using a Slider for Numeric Input
  • Selecting a Range of Values with Rangeslider
  • Creating a Toggle Switch
  • Creating Accessible Forms
Working with Buttons
  • Types of Buttons
    • Navigation
    • Inline
    • Grouped
  • Formatting Buttons
    • Adding Shadows
    • Adding Icons
Responding to Events
  • Registering Event Handlers
  • Using jQuery Events
  • Using jQuery Mobile Events
    • Touch
    • Orientation (Portrait/Landscape)
    • Scroll
    • Page
    • Virtual Mouse Events
Configuring Default Settings Using the $.mobile Object
  • Configurable Options
    • Enabling Ajax
    • Applying CSS Classes
    • Setting Transitions
  • Calling jQuery Mobile Methods
    • Storing and Removing Arbitrary Data
    • Working with URLs
    • Performing a Silent Scroll
    • Loading and Changing Page Content Dynamically
Web Services Integration
  • Working with RSS Feeds
  • Google Maps Integration
  • Server-Side Data Access


More Seminar Information

Hands-On Technology Transfer
Hands On Technology Transfer Computer Training

Delivery Method

On-Site Training On-Site Training

Also Available As

Seminar Seminar

Add to favorites Add to favorites
Email Email this page

On-Site Training
Information Request Form

Please complete the form for more information and/or a quote for this on-site class.




City and State


Number of students:
(at least 10 for consideration)

When do you want to hold the

How long would you like for the

Additional comments to trainer:

We value your privacy!