Linkbin

Accesibility Links from Zach:

What:
http://alistapart.com/articles/wiwa

Why:
http://joeclark.org/book/sashay/serialization/Chapter02.html
http://www.dralegal.org/cases/private_business/nfb_v_target.php
http://alistapart.com/articles/thisishowthewebgetsregulated

How:
http://www.w3.org/TR/WCAG10/full-checklist.html
http://www.w3.org/TR/WCAG20/

Tools:
http://colorfilter.wickline.org/?a=1;r=;l=9;j=1;u=www.clarkson.edu/index.html;t=p

Further Reading:
http://alistapart.com/topics/userscience/accessibility/
http://diveintoaccessibility.org/
http://www.lizardkingdom.org/archives/2006/07/everyone_should.html

Highslide (another lightbox): http://highslide.com/

Lightbox JS 2: http://people.clarkson.edu/~johndan//testing/lightbox2/

Listmatic's compendium of methods for working with lists (in particular, different methods of CSS list-based navbars): http://css.maxdesign.com.au/listamatic/ (includes browser compatibility chart)

Homer Simpson in CSS, with animation: http://nedbatchelder.com/blog/200805/css_homer_animated.html

Creative Commons photos at Flickr: http://flickr.com/creativecommons/

Wikimedia Commons: http://commons.wikimedia.org/wiki/Main_Page: Images in public domain or free for educational use (graphics, pictures, audio, video).

Some additional stock photo sites (from Dan Mandle). Usage terms vary, so be sure to check:

• stock.xchng: http://www.sxc.hu/
• morguefile: http://www.morguefile.com/
• freefoto: http://www.freefoto.com/index.jsp
• everystockphoto: http://everystockphoto.com/index.php
• stockvault: http://www.stockvault.net/

And a GNU GPL (open source)-licensed set of icons, Crystal Clear: http://commons.wikimedia.org/wiki/Crystal_Clear

Creative Commons: http://creativecommons.org/: Tools for applying copyright licenses to your own work so you can share it with others (many variations: attribution, no commercial use, etc.)

.htaccess instructions: http://tools.dynamicdrive.com/password/

Concept Videos: 2008: Aurora (video by Adapative Path). 1997: Apple's Knowledge Navigator.

[NSFW audio] Draplin vs. USA (a candid look at the state of graphic design in the U.S.). (Tip: Don't play this with the speakers turned up in a campus lab. Major F-bombage.)

Twenty cheatsheets for web designers: http://sixrevisions.com/resources/cheat_sheets_for_web_designers/. At this point in the semester, most of these will seem alien, but check the Dreamweaver link towards the end. You can come back later for the other links, since we'll be dealing with most of these technologies later in the semester.

Dreamweaver CS3 Tips Video (Brian Wood): http://technorati.com/videos/youtube.com%2Fwatch%3Fv%3Du8qx5ak68U4

Top Twelve CSS Frameworks and How to Understand Them: http://www.xplane.com/xblog/2008/04/01/top-12-css-frameworks-and-how-to-understand-them-speckyboy-wordpress-and-design/

Six Most Important CSS Techniques You Need to Know: http://trevordavis.net/blog/tutorial/the-6-most-important-css-techniques-you-need-to-know/

Dive Into Accessibility site (good overview of accessibility issues): http://diveintoaccessibility.org/

Web Accessibility Initiative: http://www.w3.org/WAI/

Firefox Web Developer's Extension (good for accessibility and web design in general): http://chrispederick.com/work/web-developer/

Iron Myers CSS layouts: 750 px wide, 950 px wide, liquid (nice collection--don't click on the banner ads)

Liquid, expandable sections with CSS (i.e., click a tab to drop down a small textbox of info, w/rounded corners): http://woork.blogspot.com/2008/03/liquid-expandable-section-with-rounded.html

Vandelay's Photoshop for Navigation Graphics Tutorials: http://vandelaydesign.com/blog/design/photoshop-navigation-tutorials/

Matthew James Taylor's CSS "Holy Grail" Layouts: http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

Examples of Grid and Column Designs: http://www.webdesignerwall.com/trends/grid-and-column-designs/

CSS Zen Garden: http://www.csszengarden.com/

CSS for elastic layouts using ems: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Dummy Text Generator (lorem ipsum and more): http://www.blindtextgenerator.com/

List of commercial, shareware, and freeware dedicated CSS Editors from css-discuss: http://css-discuss.incutio.com/?page=CssEditors

Screencheck (quick monitor calibration): http://photographerusa.com/screencheck/

Some Blueprint .6 plugins: http://www.ajaxbestiary.com/2007/11/09/a-closer-look-at-the-blueprint-6-plugins/

Discussion of Blueprint and/vs semantic naming (w/links to some additional Blueprint resources): http://www.christianmontoya.com/2007/11/10/semantify-and-css-tools-based-on-blueprint/

Top 100 List of Web Developers Cheat Sheets: http://www.virtualhosting.com/blog/2008/the-cheat-sheet-cheat-sheet-top-100-lists-of-web-development-cheat-sheets/

A basic Dreamweaver Tutorial [.doc]: http://www.johndan.com/other/dw.doc

The basic design theory/gestalt theory handout from day 1 of class [pdf]: http://www.johndan.com/learn/web-tips.pdf

CSS Contents and Browser Compatibility: http://www.quirksmode.org/css/contents.html

Another Blueprint supported site: CodeOfficer.com: http://www.codeofficer.com/

Fancy Links plugin for Blueprint CSS (png icons for links):http://ikhono.net/2008/1/4/fancy-links-plugin-for-blueprintcss

CSS Sandbox: http://aurelio.net/css-sandbox/

DesignVitality's collection of Photoshop Button Tutorials: http://www.designvitality.com/blog/2007/10/photoshop-button-tutorials/

Greg Smith's research on the changing layout of newstext, news photography, and advertising in the LA Times (both print and web): http://serialconsign.com/node/126

15 Excellent Examples of Web Typography: http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/

sIFR 2.0 (Scalable Inman Flash Replacement, a method for rich typography without sacrificing accessibility; uses HTML, JavaScript, Flash/ActionScript): http://www.mikeindustries.com/sifr

VisiBone (color palettes, etc.): http://www.visibone.com/

Color Wheel Pro (some color theory basics): http://www.color-wheel-pro.com/color-theory-basics.html

Blueprint CSS Framework Page at Google Code: http://code.google.com/p/blueprintcss/

Articles and Tutorials on Blueprint: http://code.google.com/p/blueprintcss/wiki/Links

CSS Mixin PHP Script (for Blueprint and other CSS frameworks): http://habilis.net/cssmixin/

Greeked Text Generator: http://lipsum.com/

Techsmith's Morae (usability lab software): http://techsmith.com/morae.asp

Heatmap research on F-patterns in users browsing and searching web pages: http://psychology.wichita.edu/surl/usabilitynews/91/eyegaze.html

Herik Olsen's Rapid Prototyping Tools for Visio: http://www.guuui.com/issues/02_07.php

Nick Finck's Wireframe Stencils for Visio: http://www.nickfinck.com/stencils.html

Usability/UX Articles and Resources: http://meiert.com/en/blog/20070330/25-excellent-usability-ux-articles-and-resources/

Reticulator, for Generating CSS Modular Grids: http://meiert.com/en/blog/20070330/25-excellent-usability-ux-articles-and-resources/

CSS Creator, for Generating CSS Surface-Level Code: http://csscreator.com/?q=version1/index.php

CSS Menu Maker: http://www.cssmenumaker.com/

Typetester, for Comparing Different Fonts on Screen: http://typetester.maratz.com/

Yahoo UI Library: http://developer.yahoo.com/yui/

NextD Journal (general design, but frequently covers interface): http://www.nextd.org/02/index.html

One example of how to do CSS-only drop-down menus: http://www.cssplay.co.uk/menus/final_drop.html

Visibone Color Charts (including embeddable popup color pickers): http://visibone.com/

Jared Spool's Notes on Questions for Site Design (w/clients): http://alokjain.pbwiki.com/by+Jared+Spool

Putting Context in Context (understanding user's contexts): http://www.uie.com/articles/putting_context_into_context/

Usability.Gov's PDF on questions for website clients/stakeholders: http://www.usability.gov/templates/docs/kickoff.pdf

Sample site done using Blueprint CSS Framework: http://starcraft2.heavengames.com/

Another Blueprint CSS sample site: http://www.hunanlondon.com/ (+ http://stroyaspekt.ru/main)