WDEV118Developing for Mobile Devices about.me/babon
DescriptionThis module is an introduction to the questionsof designing not just for mobile devices, but forall platforms.Well begin to explore some of the myriadtechnologies that can help your site look itsbest across devices, as well as some newHTML5 and CSS3 features. about.me/babon
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
Exercises and Deliverables● Design for the Small Screen● Design for the Small Screen +● Design for the Small Screen ++ about.me/babon
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
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
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
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
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
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.