Seminar Developing Mobile Websites with Responsive Web Design and jQuery Mobile (Canada) Seminar

Presented by Hands-On Technology Transfer

Hands On Technology Transfer Computer Training

Bring this seminar on-site to your facility for groups of 10 or more.

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


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
Toolbars
  • 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

Summary

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.

Delivery Method

Seminar Seminar

Also Available As

On-Site Training On-Site Training

Who Should Attend

Mobile Website Developers

 
Search similar training
Email this page
Print this document
 

Dates and Locations

Quebec City, QC
4/27/2020 - 5/1/2020
Tuition: $2275

Montreal, QC
4/27/2020 - 5/1/2020
Tuition: $2275

Toronto, ON
4/27/2020 - 5/1/2020
Tuition: $2275

Ottawa, ON
4/27/2020 - 5/1/2020
Tuition: $2275

Mississauga, ON
4/27/2020 - 5/1/2020
Tuition: $2275

see all dates/locations

 

Frequently Asked
Questions

Payment Options
Bill Me/Invoice
Credit Card

Register
Online
Fax Form

Availability
Select a date from the list at the bottom of the page for specific information about that class.

Other Information
Seminar

All Date/Location Information

Alberta (Find training in Alberta)
5/11/2020-5/15/2020 in Calgary, AB         Find a seminar in Calgary AB
5/11/2020-5/15/2020 in Edmonton, AB         Find a seminar in Edmonton AB

British Columbia (Find training in British Columbia)
5/11/2020-5/15/2020 in Vancouver, BC         Find a seminar in Vancouver BC

Manitoba (Find training in Manitoba)
5/11/2020-5/15/2020 in Winnipeg, MB         Find a seminar in Winnipeg MB

Ontario (Find training in Ontario)
4/27/2020-5/1/2020 in Kingston, ON         Find a seminar in Kingston ON
4/27/2020-5/1/2020 in Mississauga, ON         Find a seminar in Mississauga ON
4/27/2020-5/1/2020 in Ottawa, ON         Find a seminar in Ottawa ON
4/27/2020-5/1/2020 in Toronto, ON         Find a seminar in Toronto ON

Quebec (Find training in Quebec)
4/27/2020-5/1/2020 in Montreal, QC         Find a seminar in Montreal QC
4/27/2020-5/1/2020 in Quebec City, QC         Find a seminar in Quebec City QC

Saskatchewan (Find training in Saskatchewan)
5/11/2020-5/15/2020 in Regina, SK         Find a seminar in Regina SK