Design for Mobile Devices (fall 2011)

Course materials

Handouts + files

Student weblogs

Assignments + notes

19 December	Shown in class:
	Reading due this class:

12 December	Shown in class:	Example design documentation from AIGA Design for Democracy (see §5)
	Reading due this class:	Roger Black: The Holy Grail, Part I and Part 2

5 December	Shown in class:	jQuery Mobile example (ZIP)
	Reading due this class:	Ethan Marcotte – 20 favorite responsive sites iOS UI Patterns (app) Media Queries (web)

28 November	Shown in class:
	Reading due this class:	Finish Mobile First Beginner's Guide to Responsive Web Design

21 November	Shown in class:
	Reading due this class:	Mobile First, ch. 5–7 (for 21 Nov.)

14 November	Shown in class:	On-Off Switches
	Reading due this class:	Mobile First, ch. 5–7 (for 21 Nov.)

7 November	Shown in class:
	Reading due this class:	Mobile First, ch. 2–4 (these are short chapters)

31 October	Shown in class:
	Reading due this class:

24 October	Shown in class:
	Reading due this class:	Mitch GoldsteinThe wrong conversations with form Designing Media ch. 4 (for Oct. 31) Paper prototyping

17 October	Shown in class:
	Reading due this class:	Bill Moggridge, Designing Interactions, Ch. 8: Multisensory and Multimedia (for Oct. 17) FastCo Design: What Made Steve Jobs So Great? Art of the Title: time-based design; watch three sequences

10 October	Shown in class:
	Reading due this class:	Bill Moggridge, Designing Interactions, Ch. 8: Multisensory and Multimedia (for Oct. 17) Kojo Nnamdi Show, 7 Sept. 2011, Technology and Print Accessibility (radio show w. transcript)

3 October	In class:	movie clip
	Reading due this class:	Design Decisions for Digital Publishing Overview of Adobe DPS Workflow Creating documents DPS documentation – please read the "Create Interactivity" section

26 September

Shown in class:

images for demo (ZIP)

Reading due this class:

19 September	Shown in class:
	Reading due this class:	Designing Media ch. 1 Designers vs Codingby Frank Chimero

12 September

Resources

Mobile UI/site examples

Mobile test environments

Apple iOS Simulator (part of Xcode, $10)
Android Emulator (free, can be too slow)
Opera Mini in-browser simulator

Mobile prototyping + documentation

Adobe DPS

Adobe DPS tools

Example DPS magazines

Wired
Martha Stewart Living
BMW Magazine (free)
Interview

Example custom app magazines

The New York Times (no longer free)
The Washington Post (no longer free)
Flipboard
NPR (free)
Guardian Eyewitness (free photo app)
The Daily

HTML/CSS resources

General HTML/CSS references

HTML tags at HTML Dog

HTML5 Draft Specification
SitePoint CSS Reference and HTML Reference
CSS 2.1 Specification – older CSS version, with relatively easy-to-read documentation
CSS3 Draft Specification – newest CSS version but the documentation is harder to use
HTML entities (special characters)
Can I Use (browser compatibility tables)

Responsive web

Beginner's Guide to Responsive Web Design
Responsive Web Design, by Ethan Marcotte
W3C Media Queries documentation

HTML/CSS Development software

CSSEdit – CSS editor for Mac (free trial)
PixelStick – screen ruler for Mac (free)

Debugging + validation

W3C X/HTML Validator
W3C CSS Validator
Enabling the Safari Web Inspector
Web Developer Toolbar for Firefox and Chrome
Firebug for Firefox
Fangs screen reader emulator for Firefox

Webfonts

"Where Web Typography Goes Next"

JavaScript

Web Accessibility: