WDEV118Developing for Mobile Devices                        about.me/babon
DescriptionThis module is an introduction to the questionsof designing not just for mobile devices, but forall platforms.W...
Objectives● Understand what responsive design means,  and how it applies to mobile● Be able to confidently design a mobile...
Exercises and Deliverables● Design for the Small Screen● Design for the Small Screen +● Design for the Small Screen ++    ...
Design for the Small Screen● Students choose an old project of theirs● Students design a mobile version of the site  (home...
Design for the Small Screen +● Go back, and using these techniques, make  the site usable (but not optimized) for any  siz...
Design for the Small Screen ++● Go back and make the site from before  perform well for any and all possible screen  sizes...
Additional Resources to Cover●   CSS3 Media Queries●   PhoneGap●   HTML5 Boilerplate●   Mobile Boilerplate●   Adobe Edge I...
Optional Supplemental Readings● Responsive Web Design with HTML5 and  CSS3 by Ben Frain● Programming the Mobile Web by  Ma...
Upcoming SlideShare
Loading in...5
×

WDEV118 Overview

173

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
173
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WDEV118 Overview

  1. 1. WDEV118Developing for Mobile Devices about.me/babon
  2. 2. 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
  3. 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. 4. Exercises and Deliverables● Design for the Small Screen● Design for the Small Screen +● Design for the Small Screen ++ about.me/babon
  5. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×