Developing Mobile Websites
CLASS DATE(s):
Request a Class

COURSE LENGTH: 5 Days

COURSE COST: $2495.00

COURSE TIMES: 9:00am - 4:30pm

Printable version of this course
print

COURSE OVERVIEW

In this 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 AND PREREQUISITES

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 Bootstrap framework to abstract low-level responsive coding and to create grid-based layouts.

  

Course is subject to minimum enrollment. Courseware cost is not included in Course. For more details, please contact email: learn@vtec.org or call: 207.775.0244.

COURSE TOPICS:


Designing for Mobile
Responsive Design: Good for All Devices
Why It's Worth It
Building Responsive Sites
Flexible Grid
Flexible Images
Media Queries
Frameworks
Further Reading

Flexible Grids
The Flexible Grid: A More Responsive Layout Strategy
The Case for Flexible
Case Study: The Jazz Calendar Site
A First Complete Jazz Calendar Draft
Making the Inflexible Flexible
A Better Jazz Calendar

Flexible Images and Other Media
Improving the Jazz Calendar Site
Flexible Background Images

The Viewport & Media Queries
The Viewport
Targeting Widths and Devices with CSS3 Media Queries
Linearizing the Layout
Using max-device-width

HTML5: Mobile Specific Forms
A Jazz Calendar Registration Form
Local Storage
Local Storage Example

GeoLocation API
The GeoLocation API
How It Works
Browser & Device Support
JavaScript Implementation
A Simple Example
Google Maps
Jazz Calendar: Finding Nearby Gigs

Home Screen Icons
Home Screen Icons
iPhone/iPad
A Home Screen Icon for the Jazz Calendar Site: iOS
Apple-Specific Meta Tags
Android-Specific JSON Manifest
A Home Screen Icon for the Jazz Calendar Site: Android
Exercise 12: Adding Home Screen Icons to the Pickup Soccer Site

Accelerometer
Using the Accelerometer

Video
Optimizing the Video Experience for Mobile
Optimizing for Mobile
Embedding from YouTube or Vimeo
Hosting Your Own Videos
Video Formats
Controlling the Video through JavaScript
Converting Video Formats
Further Reading

jQuery Mobile
Mobile Focus
Supported Platforms
The Basics
The Page Model
UI Elements
A First Example
Drag-and-Drop Code Builder
Gestures
Swiping to Change Pages
Using data Attributes
Handling Orientation Change
What about Desktops?

Mobile Menus
Mobile Menus
A First Example
Slicknav: A Mobile Menu jQuery Plugin

The Bootstrap Framework
Bootstrap: A Responsive Framework
Downloading Bootstrap
Bootstrap's Grid
Bootstrap Components
A First Example
A Bootstrap Layout for Jazz Calendar