NM 320
INTERMEDIATE INTERACTIVE DESIGN
instructor: curt cloninger
email: curt at lab404 dot com
office: Zeis 214. Wednesday 10-12. Friday 1-3.
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)
Travel 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
Dive Into HTML5 (pilgrim)
Adaptive Web Design (gustafson)

handy reference
html tag reference
css reference
browser safe fonts
box model specifications

software/tools
lorem ipsum dummy text
prefix free
firefogg [for converting to ogv]
TinyPNG
text wrangler
sublime text
firebug (in-browser html/css editor)
free ruler



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]

HTML5/CSS3/JAVASCRIPT
HTML5 readiness
HTML5 Please
when can i use
prefix free
HTML tags
CSS reference table
CSS3 transitions specs
javascript image rollover code [view source]
create a javascript pop-up window
create and center a pop-up window
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
modernizr
Sass / LESS
p5.js

Web Video
web video compression settings
Video on the Web (pilgrim)
firefogg [for converting to ogv]
ffmpeg2theora
Miro Video Converter

Web Typography
browser safe font list
CSS Font Stack
google web fonts
fontifier
font squirrel
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
CSS Grid Layout
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: CSS Grids
baseline grid framework



David Ammon: playdamage project * art movement site * travel responsive site
Sophie Berry: playdamage project * art movement site * travel responsive site
Danielle Boyer: playdamage project * art movement site * travel responsive site
Miles Brown: playdamage project * art movement site * travel responsive site
Dalton Carter: playdamage project * art movement site * travel responsive site
Angel Domingo: playdamage project * art movement site * travel responsive site
Ryan Evans: playdamage project * art movement site * travel responsive site
Kira Karwacki: playdamage project * art movement site * travel responsive site
Alex Klawitter: playdamage project * art movement site * travel responsive site
Laura Moore: playdamage project * art movement site * travel responsive site
Liz Robinson: playdamage project * art movement site * travel responsive site
Sean Singer: playdamage project * art movement site * travel responsive site
Bryan Smith: playdamage project * art movement site * travel responsive site
Stefan Walz: playdamage project * art movement site * travel responsive site
Breanna Wright: playdamage project * art movement site * travel responsive site