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.
- 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
- 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
- A Jazz Calendar Registration Form
- Local Storage
- GeoLocation API
- How it Works
- Browser and Device Support
- Google Maps
- Jazz Calendar: Finding Nearby Gigs
- Home Screen Icons
- A Home Screen icon for the Jazz Calendar Site: iOS
- Apple-Specific JSON Manifest
- A Home Screen Icon for the Jazz Calendar Site: Android
- Using the Accelerometer
- Optimizing the Video Experience for Mobile
- Embedding from YouTube or Vimeo
- Hosting Your Own Videos
- Video Formats
- Converting Video Formats
- Further Reading
- jQuery Mobile
- Mobile Focus
- Supported Platforms
- The Basics
- The Page Model
- UI Elements
- Drag-and-Drop Code Builder
- 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