Mobile Web App Development

Enhance your mobile web development skills by mastering the jQuery Mobile framework to build responsive and mobile-first sites without the need for native programming, perfect for web developers aiming to optimize their site's mobile presence.

Course Thumbnail

Essential Skills Gained

Checkmark

Understand the challenges and solutions of mobile web development.

Checkmark

Implement mobile-first and responsive design principles.

Checkmark

Utilize the jQuery Mobile framework for cross-browser compatible sites.

Checkmark

Apply best practices for web performance and testing using Adobe Shadow.

Format

  • Instructor-led
  • 4 days with lectures and hands-on labs.

Audience

  • Web designers
  • Web developers
  • Front-end developers
  • JavaScript programmers

Description

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.

Calendar icon

Upcoming Course Dates

No upcoming dates. Please check back later.

Course Outline

Download PDF

Guidelines

  1. The browser app

  2. Browsers - Webkit based

  3. Browsers

  4. Design principles

  5. Mobile Web best practices

  6. W3C current state and roadmap

  7. MobiWebApp

  8. Web performance best practices

  9. Mobile Web best practices

  10. Future Friendly

  11. Thoughtworks

Browser screens

  1. The browser screen

  2. Viewports

  3. Viewport behavior

  4. Scrolling

  5. Browser screen - events

  6. Browser screen - quirks

  7. Icons

Media queries

  1. Intro

  2. Media queries

  3. Queries for features

  4. Features

  5. Feature operators

  6. Browser support

  7. More than media queries

  8. Device categorization

  9. CSS organization

  10. Meta viewport

  11. Testing

Fluid layouts

  1. Intro

  2. Fluid units

  3. Fluid fonts

  4. Fluid best practices

  5. Fluid grids

  6. Fluid images

  7. Fluid image replacement

  8. Fluid image - server side

  9. Fluid video

  10. Fluid advertisements

  11. Flexbox

  12. Fluid CSS tips

  13. Flexible web design

Agent detection

  1. Agent detection - server side

  2. Agent detection - client side

  3. Agent detection issues

  4. Agent detection - Google

  5. Agent detection - plugins

  6. Server side options

  7. WURFL

  8. User overrides

Responsive design

  1. Mobile First

  2. Breakpoints

  3. Responsive images

  4. Responsive image techniques

  5. W3C responsive images

  6. Responsive navigation

  7. Responsive data tables

  8. User options

  9. Fixing layouts

  10. Responsive frameworks

  11. Responsive frameworks - iPad

  12. Responsive design - JavaScript

  13. Responsive design plugins

  14. Web site breakpoint testing

Geolocation

  1. Intro

  2. Web app usage

  3. Google maps

Local storage

  1. Intro

  2. Offline web storage

  3. Offline web storage performance

  4. Structured database models

  5. IndexedDB

Touch events

  1. Touch

  2. Using touch events

  3. Touch targets

  4. Gestures

  5. Click delays

  6. :active state

  7. Disable zooming and scrolling

  8. a scrollTo trick

  9. Don't render on touch

  10. Touch components

  11. Multi-touch and the mouse

  12. Increasing the link touch area

Orientation

  1. Navigation

  2. Tailor made elements

  3. Menus

  4. Responsive orientation

Device access

  1. Camera iOS

  2. Camera Android

  3. Accelerometer / Gyroscope

  4. Magnetometer

Programming & Testing

  1. Bandwidth detection

  2. Game development

  3. Game development tools

  4. Test screen size

  5. Automated test tools

  6. Test tools - Microsoft

  7. Optimizing - Blaze

  8. Emulators

  9. Adobe Shadow

Frameworks

  1. JavaScript

  2. Publishing

  3. Front end builders

  4. Native development

  5. Hybrid development

  6. PhoneGap

jQuery Mobile

  1. Overview

  2. Versions

  3. How it works

  4. Template

  5. Add data-roles

  6. View current source

  7. New page and links

  8. Custom selector :jqmData( )

jQuery Mobile application structure & navigation

  1. Pages - internal or subpages

  2. Pages - internal

  3. Pages - external

  4. Prefetching

  5. Page initialization

  6. Page transition events

  7. Binding page transition events

  8. Binding methods

  9. Dialogs

  10. Navigation and history

  11. changePage( )

  12. Transitions

  13. Animations in jQuery Mobile

  14. Google Analytics

jQuery Mobile page elements

  1. Plug-ins and widgets

  2. List views - Basic

  3. List views - nested lists

  4. List views - split buttons

  5. List views - images

  6. List views - count bubbles

  7. List views - updates

  8. Toolbars - navigation bar

  9. Buttons

  10. Grouped buttons

  11. Buttons with icons

jQuery Mobile form elements

  1. Form elements

  2. Field containers

  3. Checkboxes and radio buttons

  4. Methods

  5. Flip toggle

  6. Input fields and textareas

  7. Select menus

  8. Sliders

  9. Layout grids - ui-grid

jQuery Mobile theming

  1. Intro

  2. Themes and swatches

  3. Applying swatches

  4. Theme overrides

jQuery Mobile API

  1. jQuery Mobile Methods

  2. Touch events

  3. Initialization events

  4. Page hide and show events

  5. Scroll events

  6. Orientation

  7. Responsive Layout API

  8. Configuring

  9. Changing an option via mobileinit

jQuery Mobile resources and updates

  1. Updates - Collapsible blocks

  2. Updates - Collapsible accordions

  3. Plugins - date / time

  4. Code examples

  5. Web sites

  6. Videos

Resources

  1. Plug-ins

  2. Web sites

  3. Books

  4. Conferences

Your Team has Unique Training Needs.

Your team deserves training as unique as they are.

Let us tailor the course to your needs at no extra cost.