Developing Mobile Websites with Responsive Web Design and jQuery Mobile 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.

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
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
Also Available As	On-Site Training
Who Should Attend	Mobile Website Developers