Developing Mobile Websites

Delivery Options

• Live Online Training - Public Class (2 days): $850.00 (Register)

» Register Now

» Free Demo

» Watch Presentation

» More Info

» Contact Education Consultant

• Customized Onsite Training (2 days): Request a Proposal
• Looking for a self-paced course? Starts at $99.90

Show More Classes

Class Description

Class Overview

Class Goals

• Learn how one website can respond to the specific needs of the environment on which it is being viewed, presenting a layout that is equally - and differently - appropriate for mobile, table, and desktop devices.
• Learn to leverage the capabilities of HTML5 to present mobile-friendly sites, and understand the varying levels of support for some features among different devices.
• Understand how to use CSS Media Queries to display content modified to fit the client device.
• Understand the GeoLocation API and use it to integrate the user's location into websites.
• Integrate video and other media appropriately for mobile devices.
• Learn how to use the jQuery Mobile framework to add support for touch and other gestures.
• Learn how to use the Foundation framework to abstract low-level responsive coding and to create grid-based layouts.

Class Outline

1. Designing for Mobile
   1. Responsive Design: Good for All Devices
      1. Why It's Worth It?
      2. Building Responsive Sites
2. Flexible Grids
   1. The Flexible Grid: A More Responsive Layout Strategy
      1. The Case for Flexible
      2. Case Study: The Jazz Calendar Site
      3. A First Complete Jazz Calendar Draft
      4. Making The Inflexible Flexible
      5. A Better Jazz Calendar
3. Flexible Images and Other Media
   1. Flexible Images and Other Media
   2. Improving the Jazz Calendar Site
   3. Flexible Background Images
4. Media Queries
   1. Media Queries
   2. Targeting Widths and Devices with CSS3 Media Queries
   3. Linearizing the Layout
   4. Using max-device-width
5. The Viewport
   1. The Viewport
6. HTML5: Mobile Specific
   1. New HTML5 Features
      1. Forms
      2. A Jazz Calendar Registration Form
      3. Local Storage
      4. Local Storage Example
7. GeoLocation API
   1. The GeoLocation API
      1. How it Works
      2. Browser and Device Support
      3. JavaScript Implementation
      4. A Simple Example
      5. Google Maps
      6. Jazz Calendar: Finding Nearby Gigs
8. Consolidating the Web with Native Extensions
   1. Consolidating the Web with Native Extensions
      1. Integrating with the Home Screen
      2. Other Devices
      3. A Homescreen Icon for the Jazz Calendar Site
      4. Hiding Browser UI
      5. Using the Accelerometer
      6. Accessing Camera, Contacts, Calendar, and More - But Not Yet
      7. PhoneGap
9. Video
   1. Optimizing the Video Experience for Mobile
      1. Optimizing for Mobile
      2. Embedding from YouTube or Vimeo
      3. Hosting Your Own Videos
      4. Video Formats
      5. Controlling the Video through JavaScript
      6. Converting Video Formats
      7. Further Reading
10. jQuery Mobile
    1. jQuery Mobile
       1. Mobile Focus
       2. Supported Platforms
       3. The Basics
       4. A First Example
       5. Drag-and-Drop Code Builder
       6. Gestures
       7. Swiping to Change Pages
       8. Using data Attributes
       9. Handling Orientation Change
       10. What About Desktops?
11. Framework: Foundation
    1. Foundation: A Responsive Grid Framework
       1. A First Look at Foundation
       2. A Foundation Layout for Jazz Calendar

Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following areas is required:

• HTML 4
• Basic CSS
• Basic JavaScript

Experience in the following areas would be beneficial:

• HTML5
• CSS3
• jQuery and other more advanced JavaScript topics

Courses that can help you meet these prerequisites:

• Introduction to HTML
• Introduction to CSS Training
• Introduction to JavaScript Training
• jQuery Fundamentals Training

Technical Requirements

Our computer technical requirements and setup process is easy, with support just a click away.

• Instructor-led Online course technical requirements and setup instructions.
• WebEx system requirements for Instructor-led Online delivery option.
• Onsite course technical requirements and setup instructions.
• Self-paced course technical requirements and setup instructions.

Potential Follow-on Classes

• jQuery Mobile