2. Description
This module is an introduction to the questions
of designing not just for mobile devices, but for
all platforms.
We'll begin to explore some of the myriad
technologies that can help your site look its
best across devices, as well as some new
HTML5 and CSS3 features.
about.me/babon
3. Objectives
● Understand what responsive design means,
and how it applies to mobile
● Be able to confidently design a mobile site
without scripting
● Master media queries and fluid layout
techniques
● Understand the concept of graceful
degradation
● Understand the needs of mobile users
about.me/babon
4. Exercises and Deliverables
● Design for the Small Screen
● Design for the Small Screen +
● Design for the Small Screen ++
about.me/babon
5. Design for the Small Screen
● Students choose an old project of theirs
● Students design a mobile version of the site
(home page and inner page), constrained to
320px wide. Emphasize choosing what
visual elements to include in the mobile
version, and what to leave behind.
● Students code the two pages, fixed to 320px
about.me/babon
6. Design for the Small Screen +
● Go back, and using these techniques, make
the site usable (but not optimized) for any
size screen beside mobile
about.me/babon
7. Design for the Small Screen ++
● Go back and make the site from before
perform well for any and all possible screen
sizes. Encourage a mix of fluid design and
media queries to provide experiences
optimized for mobile, tablet, desktop and
large screens.
about.me/babon
8. Additional Resources to Cover
● CSS3 Media Queries
● PhoneGap
● HTML5 Boilerplate
● Mobile Boilerplate
● Adobe Edge Inspect
● The Responsinator
● Less ...
○ Less -- the framework
○ Less -- dynamic stylesheet language
about.me/babon
9. Optional Supplemental Readings
● Responsive Web Design with HTML5 and
CSS3 by Ben Frain
● Programming the Mobile Web by
Maximiliano Firtman
● A Book Apart: Mobile First by Luke
Wroblewski
● A Book Apart: Responsive Web Design by
Ethan Marcotte
about.me/babon
