• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WDEV118 Overview

WDEV118 Overview






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    WDEV118 Overview WDEV118 Overview Presentation Transcript

    • 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