Developing Mobile Websites
Overview
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 HTML4, basic CSS and JavaScript. It would be beneficial with HTML5,
CSS3 and JavaScript.
Course duration
2 Days
Course 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
- The Case for Flexible
- 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
- Flexible Images and Other Media
- Improving the Jazz Calendar Site
- Flexible Background Images
4. Media Queries
- Media Queries
- Targeting Widths and Devices with CSS3 Media Queries
- Linearizing the Layout
- Using max-device-width
5. The Viewport6. HTML5: Mobile Specific
- New HTML5 Features
- Forms
- Chapter section
- Chapter section
7. GeoLocation API
- How it Works
- Browser and Device Support
- JavaScript Implementation
- A Simple Example
- Google Maps
- Jazz Calendar: Finding Nearby Gigs
8. Consolidating the Web with Native Extensions
- Consolidating the Web with Native Extensions
- Integrating with the Home Screen
- Other Devices
- A Homescreen Icon for the Jazz Calendar Site
- Hiding Browser UI
- Using the Accelerometer
- Accessing Camera, Contacts, Calendar, and More - But Not Yet
- PhoneGap
9. 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
10. jQuery Mobile
- jQuery Mobile
- Mobile Focus
- Supported Platforms
- The Basics
- A First Example
- Drag-and-Drop Code Builder
- Gestures
- Swiping to Change Pages
- Using data Attributes
- Handling Orientation Change
- What About Desktops?
11. Framework: Foundation
- Foundation: A Responsive Grid Framework
- At First Look at Foundation
- A Foundation Layout for Jazz Calendar
