Centriq Training Print Logo


September 21 09:39 PM

Training Class:

  • Ways to Train:
  • Live Classroom
    Class is delivered at a Centriq location with a live instructor actually in the classroom.
  • Live Virtual Class
    Class is delivered live online via Centriq's Virtual Remote technology. Student may attend class from home or office or other location with internet access.
  • HD Class
    Class is delivered via award winning HD-ILT at Centriq's facility. Students view the live instructor utilizing a 60'' HD monitor.
  • Ways to Buy:
  • Retail
    Class can be purchased directly via check, credit card, or PO.
  • CV Centriq Vouchers
    Class is available for students using Centriq Vouchers.
  • CP Centriq Choice Pass Eligible
    Class is available to students utilizing Centriq Choice Pass program.
Start Date End Date Duration Days Start Time End Time Time Zone Location Ways to Train Ways to Buy Price
Request a Date

Mobile web app development presents challenges for adapting content to a variable screen size and a unreliable internet connection. This course extends the web developer's awareness and knowledge to the current issues and solutions of Mobile First, Responsive Design and mobile frameworks available for managing a mobile presence. A framework presented to solve small screen and low bandwidth problems is the popular jQuery Mobile framework coded without native programming in Java or Objective-C. This allows teams to use the skills they currently have to deliver a mobile site with a maximum amount of reused code. The biggest benefit of using a free mobile library like this is in having the testing already completed for making the features cross-browser compatible.


The student will be a web site designer / programmer who would like to either design a mobile web site from scratch or make a current site mobile friendly. Some JavaScript / jQuery skill is needed.


The WD-510 Mobile Web App Design course is highly recommended as a way to understand the direction taken for mobile development and to prepare the student for their own mobile site. The student should be familiar with HTML5 design and layout using CSS3. (WD-505 and WD-510 recommended). Some JavaScript / jQuery coding will be used as well as some PHP. Students are welcome to use .NET style sites also. Students should bring as many smart phone or tablet devices (and chargers) as possible to work with.

Course Completion

The student will be familiar with the current issues and available solutions for mobile sites today. The jQuery Mobile library and its features are presented to create a mobile web site with special navigation and components. Also, the student will learn Adobe Shadow for mobile testing.

View the Training Course Outline


  • The browser app
  • Browsers - Webkit based
  • Browsers
  • Design principles
  • Mobile Web best practices
  • W3C current state and roadmap
  • MobiWebApp
  • Web performance best practices
  • Mobile Web best practices
  • Future Friendly
  • Thoughtworks

Browser screens

  • The browser screen
  • Viewports
  • Viewport behavior
  • Scrolling
  • Browser screen - events
  • Browser screen - quirks
  • Icons

Media queries

  • Intro
  • Media queries
  • Queries for features
  • Features
  • Feature operators
  • Browser support
  • More than media queries
  • Device categorization
  • CSS organization
  • Meta viewport
  • Testing

Fluid layouts

  • Intro
  • Fluid units
  • Fluid fonts
  • Fluid best practices
  • Fluid grids
  • Fluid images
  • Fluid image replacement
  • Fluid image - server side
  • Fluid video
  • Fluid advertisements
  • Flexbox
  • Fluid CSS tips
  • Flexible web design

Agent detection

  • Agent detection - server side
  • Agent detection - client side
  • Agent detection issues
  • Agent detection - Google
  • Agent detection - plugins
  • Server side options
  • User overrides

Responsive design

  • Mobile First
  • Breakpoints
  • Responsive images
  • Responsive image techniques
  • W3C responsive images
  • Responsive navigation
  • Responsive data tables
  • User options
  • Fixing layouts
  • Responsive frameworks
  • Responsive frameworks - iPad
  • Responsive design - JavaScript
  • Responsive design plugins
  • Web site breakpoint testing


  • Intro
  • Web app usage
  • Google maps

Local storage

  • Intro
  • Offline web storage
  • Offline web storage performance
  • Structured database models
  • IndexedDB

Touch events

  • Touch
  • Using touch events
  • Touch targets
  • Gestures
  • Click delays
  • :active state
  • Disable zooming and scrolling
  • a scrollTo trick
  • Don't render on touch
  • Touch components
  • Multi-touch and the mouse
  • Increasing the link touch area


  • Navigation
  • Tailor made elements
  • Menus
  • Responsive orientation

Device access

  • Camera iOS
  • Camera Android
  • Accelerometer / Gyroscope
  • Magnetometer

Programming & Testing

  • Bandwidth detection
  • Game development
  • Game development tools
  • Test screen size
  • Automated test tools
  • Test tools - Microsoft
  • Optimizing - Blaze
  • Emulators
  • Adobe Shadow


  • JavaScript
  • Publishing
  • Front end builders
  • Native development
  • Hybrid development
  • PhoneGap

jQuery Mobile

  • Overview
  • Versions
  • How it works
  • Template
  • Add data-roles
  • View current source
  • New page and links
  • Custom selector :jqmData( )

jQuery Mobile application structure & navigation

  • Pages - internal or subpages
  • Pages - internal
  • Pages - external
  • Prefetching
  • Page initialization
  • Page transition events
  • Binding page transition events
  • Binding methods
  • Dialogs
  • Navigation and history
  • changePage( )
  • Transitions
  • Animations in jQuery Mobile
  • Google Analytics

jQuery Mobile page elements

  • Plug-ins and widgets
  • List views - Basic
  • List views - nested lists
  • List views - split buttons
  • List views - images
  • List views - count bubbles
  • List views - updates
  • Toolbars - navigation bar
  • Buttons
  • Grouped buttons
  • Buttons with icons

jQuery Mobile form elements

  • Form elements
  • Field containers
  • Checkboxes and radio buttons
  • Methods
  • Flip toggle
  • Input fields and textareas
  • Select menus
  • Sliders
  • Layout grids - ui-grid

jQuery Mobile theming

  • Intro
  • Themes and swatches
  • Applying swatches
  • Theme overrides

jQuery Mobile API

  • jQuery Mobile Methods
  • Touch events
  • Initialization events
  • Page hide and show events
  • Scroll events
  • Orientation
  • Responsive Layout API
  • Configuring
  • Changing an option via mobileinit

jQuery Mobile resources and updates

  • Updates - Collapsible blocks
  • Updates - Collapsible accordions
  • Plugins - date / time
  • Code examples
  • Web sites
  • Videos


  • Plug-ins
  • Web sites
  • Books
  • Conferences

Enroll Now!