NM 320
INTERMEDIATE INTERACTIVE DESIGN
instructor: curt cloninger
email: curt at lab404 dot com
office: Zeis 214. Tuesday 12:30-2. Wednesday 11:30-12:30.
location: university of north carolina asheville
* indicates an offline media object

class-specific | resources | student sites



intro
syllabus
rough project calendar
attendance and grading policies

major assignments
Art Movement Site (HTML5/CSS3)
Fictional Character/Location Site (Responsive Design)

required texts
HTML5 for Web Designers (keith)
CSS3 for Web Designers (cederholm) [example code]
Responsive Web Design (marcotte)
lynda.com video tutorials (via Ramsey Library)

optional texts http://fortuito.us/diveintohtml5/
Dive Into HTML5 (pilgrim)
Adaptive Web Design (gustafson)
Bulletproof Ajax [via Ramsey Library site] (keith)



Web Site Usability Basics (Cloninger)
Ladislav Sutnar: Web Design Before the Internet (Heller)

Art Movement Site
pre-design deliverables: creative brief
a list of 20th Century art movements
The Russian Avant-Garde Book [strong example]
Multimedia: From Wagner to VR [weaker example]

HTML/CSS/JAVASCRIPT
HTML5 Please
when can i use
prefix free
HTML tags
CSS reference table
CSS3 transitions specs
javascript image rollover code [view source]
javascript pop-up window code generator
CSS positioning 101 (stokes)
CSS Floats 101 (stokes)
CSS Browser reset code (meyer)
dragable elements script
CSS drop down menu code [view source]
lightbox 2
web putty
edge tools & services
Sass / LESS

Web Video
Video on the Web (pilgrim)
firefogg [for converting to ogv]

Web Typography
browser safe font list
CSS Font Stack
google web fonts
fontifier
font squirrel
Web Typography for the Lonely
interview with Jonathan Hoefler

Responsive Design
Responsive Web Design (marcotte)
robot or not [responsive site example] (marcotte)
Fluid Grids (marcotte)
Fluid Images (marcotte)
Creating a Mobile-First Responsive Web Design (frost)
reset CSS (meyer)
TUTORIALS:
basic css (pixel-based) template
basic css (em-based) template
2-column centered html template (jello layout)
2-column centered html template (jello/liquid layout - %-width sizing)
fully responsive (but not yet mobile-first)

Web Grid Systems
The Grid System: online grid system resources
designing with grid-based approach
960 grid system
gridding the 960 (moll)
Setting Type on the Web to a Baseline Grid (miner)
CSS Grid Positioning Module
Yahoo! UI Library: Grids CSS
CSS Grid Builder
baseline grid framework
grids are good [pdf] (vinh)



Elizabeth Bates: playdamage project * art movement site * character/location responsive site
Phillip Chester: playdamage project * art movement site * character/location responsive site
Kimber Fowler: playdamage project * art movement site * character/location responsive site
Barbara Gray: playdamage project * art movement site * character/location responsive site
David Hart: playdamage project * art movement site * character/location responsive site
Tyler Parker: playdamage project * art movement site * character/location responsive site
Casey Puccio: playdamage project * art movement site * character/location responsive site
Chloe Satter: playdamage project * art movement site * character/location responsive site
Chantae Shor: playdamage project * art movement site * character/location responsive site
Catherine Smith: playdamage project * art movement site * character/location responsive site
Shelby Vecchio: playdamage project * art movement site * character/location responsive site
Megan Wood: playdamage project * art movement site * character/location responsive site