Course Objectives
The current mobile market – mobile devices and mobile browsers
Techniques for creating flexible, responsive web sites using media queries
Best practice design for mobile devices
How to use tools & resources for testing
The current mobile market – mobile devices and mobile browsers
Techniques for creating flexible, responsive web sites using media queries
Best practice design for mobile devices
How to use tools & resources for testing
Introduction
· Mobile market overview: devices, operating systems and browsers
· One web vs. mobile web
· Mobile First
· Progressive enhancement
Getting started
· How mobile devices display web pages
· Screen resolution: CSS pixels vs. device pixels
· The viewport tag
· The Safari auto-zoom bug
· webkit-text-size-adjust
Responsive web design
· Flexible grids
· Flexible fonts
· Flexible images & background images
· Common screen sizes – resolution breakpoints
· Media queries
Content delivery – know your audience
· What content do people need?
· How people browse – mobile mindsets
· Browser dimensions, bandwidth & context
Design tips and best practice
· Displaying & hiding content
· Simplifying navigation
· Linearizing layouts
· White space
· Font sizes, faces & spacing
· Text readability
· Minimising input from user
· Making calls from links
· Linking the full version of a site
Testing
· Validation and markup
· In-browser testing
· Creating a suite of representative devices
· Online & offline emulators
· Testing services