Your SlideShare is downloading. ×
0
WDEV118 Overview
WDEV118 Overview
WDEV118 Overview
WDEV118 Overview
WDEV118 Overview
WDEV118 Overview
WDEV118 Overview
WDEV118 Overview
WDEV118 Overview
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WDEV118 Overview

161

Published on

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

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. WDEV118Developing for Mobile Devices about.me/babon
  • 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. 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

×