Developing Mobile Websites with Responsive Web Design and jQuery Mobile

Duration: 5 Days (Face-to-Face or Remote-Live), or 35 hours of coursework with personal facilitation over a four week span (On-Demand)

US Price: $2495 (Face-to-Face or Remote-Live), or $1495 (On-Demand)

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

Registration: Click here to view upcoming schedules and register for face-to-face sessions, click here to register for live remote attendance sessions, or click here to register for on-demand training with a start date that is convenient for you.

View the course schedule

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.

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.

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

Related Training

Course
Website Development with HTML5, CSS and Bootstrap
JavaScript Programming
jQuery Programming
Developing Web Applications Using Angular
Node.js Application Development
PHP Programming
Perl Scripting