Video Description
One website for all devices is the mantra of modern 21st century web development. In this video, web design guru Scott Davis offers a concise and practical look at the tools and design approach you need to ensure that your mobile website will look great on any device.
- Review three basic approaches to mobile app development: HTML 5, Native, and Hybrid
- Learn why responsive mobile sites display correctly on any device
- Discover proven techniques that solve the mobile-website-multiple-viewport problem
- Learn how declarative media queries in CSS3 simplify mobile orientation styling
- Discover Twitter Bootstrap, an easy method for creating mobile-friendly websites
- Learn HTML5 tricks for popping up a virtual keyboard, tapping a link to dial a phone, and more
- Make your mobile HTML5 app look like a native iOS or Android app in airplane mode
- Learn local storage techniques that make your mobile app run best when it goes offline
- Explore best practices for application caching in mobile apps
Scott Davis is the founder of ThirstyHead.com, a training and consulting company that that specializes in HTML5, mobile development, SmartTV development, NoSQL, Groovy, and Grails.
Table of Contents
-
Introduction
- Welcome to the Course 00:01:27
- The Pre-iPhone Bad Old Days 00:07:31
- Agenda 00:05:57
-
A Tale of 3 Cities
- A Tale of 3 Cities 00:09:06
- Native or HTML5? 00:20:48
- The Pros and Cons of Native Mobile Development 00:18:48
- Hybrid Solutions 00:06:32
-
Viewport and Orientation
- Screen != Window != Viewport 00:06:15
- Screen Size != Screen Resolution 00:08:47
- Viewport Meta Options 00:05:09
- Media Queries and Orientation 00:07:33
-
Responsive Web Design
- What is RWD? 00:03:06
- Examples in the Wild 00:05:52
- Fixed vs. Relative 00:16:50
- Twitter Bootstrap 00:05:42
- HTML5 Input Types and Virtual Keyboards 00:16:38
-
Forms and Stupid Link Tricks
- Input Element Modifiers 00:04:49
- Stupid Link Tricks 00:06:08
-
Airplane-Mode Web Development
- iOS Mobile Web Apps 00:12:31
- Android Mobile Web Apps 00:04:32
-
Local Storage
- Going Offline 00:07:58
- Local and Session Storage 00:12:11
- Web SQL 00:05:20
- IndexedDB 00:11:44
-
Application Cache
- Far-Future Expires Headers 00:17:55
- AppCache 00:13:20
- Service Workers, Course Closing 00:05:54