Mobile & Responsive Web Design (MRWD) – Outline

Detailed Course Outline

Exploring Web Development in the Mobile World

  • Reviewing the architectural tiers of web applications
  • Complying with W3C guidelines and best practices
  • Examining key mobile web platforms
  • Targeting devices with feature detection
  • Configuring development and debugging environments

Analysing Requirements for Mobile Website Design

Prioritising mobile design requirements

  • Investigating mobile design goals
  • Delivering user-context appropriate content

Applying architectural principles and constraints

  • Prioritising features with user requirements
  • Designing for the mobile interface
  • Implementation strategies for new and existing content

Defining Elements of Responsive Web Design (RWD)

Creating proportion with CSS

  • Establishing flexible typesetting and forming flexible grids
  • Incorporating fluid margins and padding

Developing responsive images

  • Building flexible images and media
  • Managing complex images
  • Applying and establishing media types and media queries

Managing the viewport

  • Evaluating the viewport concept
  • Measuring the viewport
  • Optimising site layout with media queries

Employing jQuery Mobile for Forms and Events

Integrating the popular jQuery mobile library

  • Exploring jQuery mobile fundamentals
  • Creating jQuery mobile templates and applying themes
  • Enhancing jQuery mobile with AJAX navigation
  • Exploiting native functionality with jQuery mobile

Exploring HTML5 form elements

  • Examining form element types for mobile
  • Optimising touch interaction with forms
  • Generating advanced forms with HTML5 and jQuery mobile

Handling browser and mobile events

  • Interactive modes and events
  • Handling events in the mobile environment
  • Developing jQuery mobile event handling

Implementing Mobile Frameworks

Presenting PhoneGap concepts

  • Creating cross-platform hybrid mobile apps
  • Accessing native device capabilities from JavaScript

Viewing device information with PhoneGap

  • Leveraging native device API with PhoneGap
  • Contacts
  • Map
  • Phone
  • Building hybrid applications with PhoneGap

Leveraging geolocation

  • Querying for the device location with GPS
  • Integrating with the native map application

Managing local storage

  • Persisting data onto the device
  • Managing locally stored data

Working offline

  • Enabling disconnected web applications
  • Synchronising offline data to enterprise databases

Considering Performance and Optimisation

Enhancing site functionality

  • Discussing website performance and optimisation
  • Reviewing best practices and good design

Employing performance tools

  • Optimising applications with YSlow
  • Analysing YSlow rules and rulesets
  • Implementing best practice rules to optimise mobile applications
  • Compressing and optimising CSS and JavaScript