Developing Mobile Websites
- 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
-
- Designing for Mobile
- Responsive Design: Good for All Devices
- Why It's Worth It?
- Building Responsive Sites
- 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
- Flexible Images and other Media
- Improving the Jazz Calendar Site
- Exercises
- 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
- GeoLocation API
- How it Works
- Browser and Device Support
- JavaScript Implementation
- Google Maps
- Jazz Calendar: Finding Nearby Gigs
- 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
- Accelerometer
- Using the Accelerometer
- 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
- 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?
- Mobile Menus
- Mobile Menus
- Slicknav: A Mobile Menu jQuery Plugin
- The Bootstrap Framework
- Bootstrap: A Responsive Framework
- Downloading Bootstrap
- Bootstrap’s Grid
- Bootstrap Components
- A Bootstrap Layout for Jazz Calendar
- Designing for Mobile