NM 320
instructor: curt cloninger
email: curt at lab404 dot com
office: Zeis 214. Monday + Wednesday 2-3:30, or by appointment.
location: university of north carolina asheville
* indicates an offline media object

class-specific | resources | non-linear experiences | student sites

rough project calendar
attendance and grading policies

major assignments
Non-Linear Site (HTML5/CSS3)
Responsive Site [OR option #2] (Responsive Design)

required texts
HTML5 for Web Designers (keith)
CSS3 for Web Designers (cederholm) [example code]
Responsive Web Design (marcotte)

optional texts
lynda.com video tutorials (via Ramsey Library)
Dive Into HTML5 (pilgrim)
Adaptive Web Design (gustafson)
JavaScript & JQuery (duckett)

handy reference
html tag reference
css reference
browser safe fonts
box model specifications
CSS3 transitions: property types and properties
sprite image rollover code sample

lorem ipsum dummy text
prefix free
CSS Browser reset code (meyer)
firefogg [for converting to ogv]
the responsive calculator (robson)
free ruler
text wrangler * brackets * sublime text * atom (text editors)
codePen * firebug (in-browser editors)
(addon bar + firesizer = firefox window resizer) * chrome window resizer * safari window resizer
cmap flowchart software

Web Site Usability Basics (cloninger)
web design is dead (nouvel)

HTML5 readiness
HTML5 Please
when can i use
prefix free
HTML tags
CSS reference table
CSS3 transitions: property types and properties
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
Sass / LESS
jScroll (infinite scrolling)
codrops playground (experimental code)

Web Video
Media formats for HTML audio and video
web video compression settings
Video on the Web (pilgrim)
firefogg [for converting to ogv]
Miro Video Converter

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

Responsive Design
Responsive Web Design (marcotte)
robot or not * The Xanadu Hijack [responsive site examples]
Fluid Grids (marcotte)
Fluid Images (marcotte)
Creating a Mobile-First Responsive Web Design (frost)
frameworks (marcotte)
Responsive Design Fundamentals (williamson)
The Picture Element Comes of Age (zeldman)
Responsive Images in Practice (portis)
responsive widths * viewport sizes
Responsive Menu in Pure CSS
about reset CSS (meyer)
full reset css template
basic css (pixel-based) template
basic css (em-based) template
xanadu hijack css (em-based)
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

linear plot pyramid* (freytag)
3 non-linear "plot" structures* (meadows)
agency* (murray)
interaction and narrative lecture: interactive, storytelling, cross channel, user experience* (arnall)

michel gondry videos
come into my world
sugar water
the denial twist

hypertext literature
hypertext gardens* (bernstein)
victory garden [abridged] (moulthrop)
hyper hypertext* (saul)
grammatron (amerika)
hypertextual consciousness 1.0* (amerika)
clicking for godot* (rosenberg)
A Dark Journey Into A Killer's 'Personal Effects'* (hutchins/weisman)
surreal quizzes
Jane Dark's Emotion Criteria Exam (marcus)
NODATA (donwood/radiohead)
The Will Power Clinic (szyhalski)
starfish exams (stanton)
The 4th Replacement Search (elk)

hypermedia literature
my boyfriend came back from the war (lialina)
the hard way (ritchie)
graphik dynamo (armstrong/tippett)
the lair of the marrow monkey (loyer)
world of awe: traveler's journey (kanarek)
filmtext (amerika)
what we will (perring/waite/cayley/cape)
otnemem (webflow solutions/musth design)
requiem for a dream (hi-res)
how i was played by online caroline* (walker)
memex engine (lafia et al.)
guest house | rental house | terminal house (GUMP)
interactive short films

expressive characters/environments
Arcangel Constantini [automatic drawings]
the shy picture (reeders/macleod)
reverse flash back (jimpunk)

fugal narrative
a round in part: tracing the countours of fugal narrative (curator: cloninger)
geeks inadvertently making net art* (cloninger)