5h 47m – Beginner
This course surveys the core principles and techniques essential to building web sites for mobile devices. Author Joe Marini introduces the mobile context, sheds light on its unique coding requirements, and discusses interface design techniques that enhance existing sites for mobile viewing. The course shows how to approach designing for mobile form factors such as smaller screens and finger-based interaction, along with how to incorporate CSS3 and HTML5 capabilities, such as geolocation, local storage, and media queries.
Topics include:
Implementing well-defined web standards
Working with Modernizr and Mobile Boilerplate
Building a first mobile web page
Understanding content adaptation strategies
Designing forms for mobile
Detecting client capabilities with script
Using server-side detection with PHP and ASP.NET
Working with mobile browser capabilities
Viewing and testing the mobile site on device emulators
Introduction – 2m 48s
Welcome – 1m 2s
Using the exercise files – 1m 46s
1. Understanding the Mobile Web – 29m 25s
Understanding the mobile context – 8m 5s
A survey of mobile sites – 11m 44s
Targeting mobile browsers – 4m 31s
Previewing a complete mobile site -5m 5s
2. Mobile Web Development Guidelines – 27m 20s
Designing for one web – 3m 43s
Using well-defined web standards – 3m 45s
Designing mobile-friendly pages – 3m 40s
Being crisp, clean, and succinct – 5m 45s
Minimizing input where possible – 6m 47s
Focusing on the core scenarios – 3m 40s
3. Setting Up a Development Environment – 1h 13m
Installing the tools – 3m 52s
Setting up a local web server – 9m 13s
Installing device emulators – 17m 5s
Using device emulators – 13m 9s
Downloading Modernizr and Mobile Boilerplate – 6m 22s
Building a first mobile web page – 5m 43s
Developing mobile pages with desktop browsers – 8m 6s
Exploring useful mobile web development resources – 10m 23s
4. Adapting Desktop Sites for Mobile Devices – 53m 26s
Reviewing mobile markup languages – 5m 10s
Understanding content adaptation approaches – 10m 32s
Controlling the viewport layout – 12m 50s
Designing forms – 13m 30s
Using CSS media queries – 11m 24s
5. Creating Mobile-Optimized Pages – 1h 11m
Detecting client capabilities with script – 10m 8s
Caching information with local storage – 9m 16s
Determining position with geolocation – 12m 52s
Minimizing HTTP requests with data URLs – 7m 39s
Understanding user agent detection – 9m 8s
Using server-side detection with PHP – 6m 52s
Using server-side detection with ASP.NET – 4m 54s
Using HTML5 Boilerplate for mobile – 11m 6s
6. Understanding Mobile Browser Capabilities – 39m 22s
Measuring performance – 7m 41s
Creating full-screen web apps – 6m 30s
Customizing the user interface – 5m 14s
Detecting orientation changes – 3m 58s
Detecting device movement – 5m 21s
Using touch events – 10m 38s
7. Putting It All into Practice – 47m 14s
Taking a look at the finished site – 7m 40s
Examining the header and background image style on the Home page – 10m 10s
Examining the hover effect and layout styles on the Tours page – 6m 42s
Examining mobile forms on the Contact page – 9m 45s
Viewing and testing the mobile site on emulators – 8m 11s
Viewing the site on devices – 4m 46s
Conclusion – 2m 34s
Goodbye – 2m 34s