Choose your language:

Hong Kong
New Zealand
United Kingdom
United States

Mobile Web Development

Course Code



2 Days

Required: Previous work with front-end technologies, CSS, HTML, and JavaScript basics

This course provides exposure to front-end architectures, advanced CSS, advanced JavaScript language features, and exposure to the latest design and development techniques for mobile application development. This course focuses almost entirely on web development, not native application development. It provides exposure to techniques used in modern JavaScript application development. This course focuses heavily on using responsive design techniques, such as responsive JavaScript libraries the use of media queries, the use of the jQuery JavaScript library and jQuery Mobile, as well as the Sencha Touch library.

Along the way, participants will build applications that support multiple mobile devices as well as multiple device display sizes while at the same time learning some of the more valuable and usable HTML5 APIs such as local storage. An additional day may be added to properly cover the provided appendices if more time is needed covering front-end engineering basics.

Primary audience: Front-end developers and developers interested in developing cross-browser, cross-platform web applications
Day 1
The Mobile Experience
The Mobile Environment
Responsive Design
Client or Server?
Adaption Strategies
Current State of Mobile Browsers
Media Queries
The webkit Engine
Page Flow and Zoom within Mobile Browsers
Navigating Content
Web Standards
Layered Architectures
Semantic HTML
Progressive Enhancement
HTML5 in the Mobile Browser
Mobile Web vs. Native App
Developing for Multiple Display Sizes
Touch Frameworks
Sencha Touch 2
jQuery Mobile
Titanium Mobile SDK
Touch Design Patterns

HTML5 and CSS3 Overview
The New Doctype and Standards Mode
The HTML Root Element and Changes within the <head>
New Link Relations
The New Semantic Structural Elements
New Markup Elements
The New Form Controls
Form Validation, Regexes, and More
CSS3 Selectors
New Color Support
Rounded Corners
Borders and Shadows (Box, Text)
Performance Enhancements

Day 2
Responsive Design & Localization

Responsive Design Considerations
Responsive Design Challenges
Creating Responsive Solutions
Media Queries
Responsive JavaScript Frameworks
HTML5 and Internationalization Features
Passive Localization

Using Mobile App Dev Frameworks
Emphasis on either Appendix A or B

HTML5 JavaScript APIs
Selecting Nodes
Local Storage
Web Workers
Client-Server Techniques (Long Polling, Event Streaming)
Web Sockets
Server-Sent Events
Cross-Origin Resource Sharing (CORS)

Appendix A – jQuery and jQuery Mobile
jQuery Core
Using jQuery and Selectors
DOM Manipulation with jQuery
Event Bubbling/Delegation
Rebinding Events
Keyboard & Mouse Events
Animation Effects
Incorporating jQuery UI Elements
Ajax and jQuery
jQuery Best Practices
Testing with QUnit
What is jQuery Mobile?
Establishing your Environment
jQuery Mobile vs. jQueryUI
Creating jQuery Mobile Apps
jQuery Mobile UI Widgets
Touch API

Apendix B – Sencha Touch API
What is Sencha Touch?
Establishing your Environment
Device Detection?
Handling Touch Events
Working with Forms
Containers & Layouts
TabPanels, Lists
Using JSON and Ajax
Working with DataStores
Managing Views, Using XTemplates
Sencha Touch Themes

Appendix C – CSS Primer
Using CSS3 Selectors
Using Chrome for CSS Design
Text Properties
Background Properties
Creating and Styling Lists
CSS Box Model, Positioning, Visual Formatting
The CSS Box Model
Setting Borders and Margins
Special Styles and Colors
Shorthand Notations
Collapsing Margins
Box Paddings
IE vs. W3C Box Model Differences
Block vs. Inline Styles
Absolute Positioning
Relative Positioning
Floating Elements
Laying out Pages
Clearing Elements
Improving Design

Appendix D – Unobtrusive JavaScript
DOM Scripting
Writing Unobtrusive Code
Events and Cross-Browser Issues
Handling Events
Understanding inline vs. DOM 0 Handlers vs. DOM 2 Listeners
The "this" Object in DOM 0, DOM 2, and MSIE
The Event Object
Event Bubbling and Capturing
Stopping Event Propagation
Event Delegation
Preventing the Default Action
Common Mouse and Keyboard Events
Custom Events Using YUI
Deferring Page Execution
Working with Timers and Intervals
Smoothing UIs using Timers
Send Us a Message
Choose one