Developing Mobile Websites

Public Training Price : $1295 per student
Private Training Price : Request a quote
Print this outline
Enroll in this Public Class

 

 

 

Developing Mobile Websites Training Class Summary

In this 2-day Developing Mobile Websites class, you will learn to use HTML5, CSS, JavaScript, and other tools to create websites that are responsive: sites that adapt their layout to the client device being used, whether it be a smartphone, tablet computer, or desktop computer/laptop. You will learn to use CSS media queries, mobile-friendly HTML5 features, JavaScript enhancements, and various frameworks to build websites that look as good on an iPhone or Android as they do on a desktop or laptop computer.

Audience: Decision makers in digital marketing, sales, Web and IT management.

Prerequisites: Experience in HTML 4, basic CSS and basic JavaScript. It would be beneficial to know HTML5, CSS3 and jQuery and other more advanced JavaScript topics.

Class Length: 2 days

Developing Mobile Websites Training Class Objectives
  • 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.
Developing Mobile Websites Training Class Detailed Outline
  1. Designing for Mobile
    • Responsive Design: Good for All Devices
    • Why It's Worth It?
    • Building Responsive Sites
  2. Flexible Grids
    • The Flexible Grid: A More Responsive Layout Strategy
    • Case Study: The Jazz Calendar Site
    • A First Complete Jazz Calendar Draft
    • Making the Inflexible Flexible
    • A Better Jazz Calendar
  3. Flexible Images and other Media
    • Improving the Jazz Calendar Site
    • Exercises
    • Flexible Background Images
  4. The Viewport & Media Queries
    • The Viewport
    • Targeting Widths and Devices with CSS3 Media Queries
    • Linearizing the Layout
    • Using max-device-width
  5. HTML5: Mobile Specific
    • Forms
    • A Jazz Calendar Registration Form
    • Local Storage
  6. GeoLocation API
    • How it Works
    • Browser and Device Support
    • JavaScript Implementation
    • Google Maps
    • Jazz Calendar: Finding Nearby Gigs
  7. Home Screen Icons
    • iPhone/iPad
    • A Home Screen icon for the Jazz Calendar Site: iOS
    • Apple-Specific JSON Manifest
    • A Home Screen Icon for the Jazz Calendar Site: Android
  8. Accelerometer
    • Using the Accelerometer
  9. Video
    • Optimizing the Video Experience for Mobile
    • Embedding from YouTube or Vimeo
    • Hosting Your Own Videos
    • Video Formats
    • Controlling the Video through JavaScript
    • Converting Video Formats
    • Further Reading
  10. jQuery Mobile
    • Mobile Focus
    • Supported Platforms
    • The Basics
    • The Page Model
    • UI Elements
    • Drag-and-Drop Code Builder
    • Gestures
    • Swiping to Change Pages
    • Using data Attributes
    • Handling Orientation Change
    • What About Desktops?
  11. Mobile Menus
    • Mobile Menus
    • Slicknav: A Mobile Menu jQuery Plugin
  12. The Bootstrap Framework
    • Bootstrap: A Responsive Framework
    • Downloading Bootstrap
    • Bootstrap’s Grid
    • Bootstrap Components
    • A Bootstrap Layout for Jazz Calendar