Advanced Web Design: AD650
TECHNICAL SUPPORT :
This section contains the following additional support materials and links.
- General Information
- Web Standards and Accessibility
- Web Design Process
- Information and Interaction Design
- Structure -- XHTML (eXtensible HyperText Markup Language)
- Visual Design
- Presentation -- CSS (Cascading Style Sheets)
- Advanced Scripting
- Testing and Validation
- Business of Web Design
- Recommended Reference Books
General Information:
About the Web:
- The Living Internet
- History of the Internet, As we remember it..
- Way Back Machine: Look at websites from way back in history
- The Future of the Internet-- a Recent Survey
- What is Web 2.0?
- What is RSS, Atom, etc?
- How the Web Works
- Web Design Vocabulary (Page, Interface and Site Design)
- The Glossary of Geek (Internet Terms)
Lists of Links:
- Holy CSS Zeldman!
- Extensive Web Design References (University of Minnesota Duluth)
- External Links from HtmlDog
- bobbyvandersluis.com
Setting up / Server Access:
Web Standards and Accessibility
Web Standards Reference
- http://www.mezzoblue.com/zengarden/resources/ (this links to everything)
- http://www.zeldman.com/
- http://www.alistapart.com/
- bad tags / outdated standards
- Building site with Web Standards
- Basic Web Standards Workshop
- About Web Standards from the Web Standards Group and webstandards.org
Doctype Definitions:
- Understanding Doctypes
- DTD XTML Strict: default.html
- Other doctypes: HTML 4.01 and XHTML 1.0 and 1.1 Templates
Accessibility
- diveintoaccessibility.org
- Web Accessibility Initiative (WAI)
- http://www.gawds.org/
- http://www.accessify.com/default.asp
- Accessible Forms Part 1 | Part 2
- Why is Accessibility important?
- 10 Reasons Clients Don't Care About Accessibility
- 7 Accessibility mistakes
- Web Usability
- Choosing an Accessible CMS
back to top ^
Web Design Process
Readings on Web Design, Usability and Functionality
- Defining your DESIGN METHOD for building a web site.
- The balance between FORM and FUNCTION
- The Designer is Dead, Long Live the Designer
- The Design Spectrum
- The Sphere (or Circle or Arc) of Design
- Web Design Process
back to top ^
Information and Interaction Design
- IA Tutorial
- Information Architecture wiki
- Interaction Patterns
- Information Architecture Institute
- Boxes and Arrows
back to top ^
Structure -- XHTML
Tutorials and Reference
Code and Character References:
- HTML Tag Reference
- HTML Source's: Special Character Reference
- ISO HTML Special Character Reference
- Unicode HTML Special Character Reference
HTML Tutorials and Reference.
- Basic Rules and Syntax of HTML
- What is XHTML?
- STRUCTURE vs. PRESENTATION
- Understanding the Document Tree
- Semantic Markup
- htmldog HTML Tutorial
- sitepoint
- yourhtmlsource.com
- goer.org HTML Tutorial
- W3C HTML Reference
- Blooberry HTML Reference
- Rutger's HTML Tutorial
- w3cschools Tutorial
- Standards Compliant TABLES: Beginner, Intermediate, Advanced
- Accessible Table Resources
- Table gallery examples
- CSS Tables
- Table Tutorial
- Table tree with HTML and CSS
- Accessible HTML Forms
- Accessible Form Resources
- Form gallery examples
- More Form Examples
Placeholder copy for websites
back to top ^
Visual Design
Design Help and Inspiration:
- CSS Beauty
- Style Gala
- Well-designed CSS sites-- AndyBudd
- A list of simple, well-designed sites
- cssvault
- Web Standards Awards
- mezzoblue related
- Zen Garden
- Design Meltdown
- CSS Reboot
- Yale Web Style Manual
- Design and Seeing
Creating a Mockup
Creating Images for the Web:
- Slicing and Optimizing
- webmonkey
- htmlsource
- Adobe: Optimizing Images
- Adobe: Slicing Images
- Gradient background tiles | with Shadows
- Pixel background tiles
Color Scheme Helpers
- ColorMatch
- Painter's Picker
- Colorschemer
- Adam Polselli's "Get The Look" page
- ColorMatch Remix
- Spin the Color Wheel
- Color blender great for finding a quick color scheme
- Color Scheme Generator
- Color Match
- Colour Schemes
- Color Schemer Online
- Color Advice
Color
- CSS Colors understanding color on the web
- Color Theory for the color blind and designing for those with different ways of seeing
- Color Deficiency Simulators and Related Color Testing Tools
- Color and Contrast
- HYPE's Color Specifier
- Table of Non-dithering colors (by value)
- RGB to HEX converter
- Visbone Colorlab
- WebRef Color (good reference)
- Color Wheel
- Color Theory for the Non-Designer
- Other Links
Typography on the WEB
Typography and Fonts (free for academic and personal use ONLY!!)
- Good Things Type
- Typography Help
- core.nu
- fontdiner.com
- fontor.com
- typedifferent.com
- phantompower.de
- iai-jp.net
- fontomas.com
- nicksfonts.com
- fontalicious.com
- cycle.free.fr/bonne/fonts.html
- fontshop.com
- fountain.nu
- designershigh.com
- typelife.com
Free Stock Photos
- Free Photos
- MORE Free photos (www.freephoto.com)
- Background Patterns
Multimedia
- Flash Tutorials:
- Simple Banner
- Preloader
- Creating a simple Flash banner animation
- Principles of Animation
- Animation Basics in Flash
- http://www.tutorialoutpost.com/flash-animation/
- http://www.webwasp.co.uk/
- http://www.flashkit.com/tutorials/Animation/
- Flash Banner Tutorial
- Flash Banner Tutorial from Adobe
- http://www.kirupa.com/
- Flash Learning Guide
- Entheos Tutorials
- About.com Tutorials
- How to create a preloader
- Flash overview from BU
- Intro to Flash UC Riverside
- WebWasp Tutorials
- Webmonkey Tutorials
- Simple Banner
- Preloader
- Actionscript Elements
- Actionscript Learning Guide | Tutorials
- Publishing
your movie
- Remember that publishing HTML from Flash creates non-standard code. There are standards compliant ways to add Flash to your XHTML.
back to top ^
Presentation -- CSS
CSS Basics
- CSS overview | CSS Introduction
- Selectorial (read and understand before you begin!)
- The Box Model Demo
- http://intensivstation.ch/css/en/8.php
- Simple Tutorials and CSS Definitions
- Good CSS definitions and explanations
- CSS from the ground up
- htmldog CSS Tutorial
- CSS 101
- Follow these guidelines to save you from a stressful night
- And these....
CSS Tutorials and Reference.
- CSS Property Reference
- Westciv Style Master Tutorial
- maxdesign
- cssvault.com
- Separating Content from Presentation
- Reference List
- Listutorial
- Real World Style
- Mimicking Magazine layouts with CSS
- How to structure your style sheet
- The CSS crib sheet
- Headings as Images - the Lindsay method
- Replace text headings with images
- Image-Rollovers using CSS
- 10 CSS tricks you may not know
- Dropdown menus
- CSS Tables
- CSS tabbed menus
Browser bugs: how to fix them or accept them
- Box Model Hack
- http://glish.com/css/hacks.asp
- http://digital-web.com/articles/keep_css_simple/
- http://centricle.com/ref/css/filters/
- http://www.quirksmode.org/index.html?/css/csshacks.html
- http://www.quirksmode.org/
- http://www.positioniseverything.net/explorer.html
- http://www.macedition.com/cb/ie5macbugs/index.html
- http://www.positioniseverything.net/ie-primer.html
- http://www.dezwozhere.com/links.html
CSS Layout and Positioning
- CSS Layout Tutorial
- Colored Boxes Tutorial
- Sample Page Layouts
- Glish: useful cross-browser CSS layout techniques
- Little Boxes
- Relatively Absolute: Layouts with CSS
- CSS Positioning links
- The Box Model - Positioning
- brainjar.com
- Floatutorial
- Floating Layouts
- Contained Floats
- How to Float your Thumbnails
- Floating Thumbnails for an Image Gallery
- Sliding Doors Technique
- Rounded Corners
- Site in an Hour
back to top ^
Advanced Scripting
Form Mail Scripts
JavaScript / DHTML / DOM
- Unobtrusive (good) javascript samples:
- Javascript and DOM Scripting Best Practice links:
- Image Gallery with Javascript:A List Apart | Adactio
- Multi-level menus
- Another dropdown menu option
- Javascript Skin -- evolt.org
- Javascript 101
- Dropdown Menu tutorials: Vertical dropdowns | Horizontal dropdowns | Dropdown generator | js css hybrid
- Dropdown menu tutorial using the original
Suckerfish Dropdowns
- Use this page to complete the tutorial
- Use this javascript file to link to the page.
- Additional Javascript References:
back to top ^
Testing and Validation
- Great Validation Widget
- All the Browsers
- W3C Validation Service
- CSS Validation Service
- Andy Budd's bookmarklets
- Centricle: Favelets
back to top ^
Business of Web Design:
- Client Surveys: Happy Cog Studio | Clear Left | Redesign Survey
- How to Create a Standardized Web Site Development Workflow
- Planning the project
- Web Development Work Flow | Planning the Project (PDF) | Work Flow (PDF)
- Web Development Life Cycle
- Web Development Process | Create Interactive
- Case Studies
- Planning, running a web design business
- Madfish Method
- Budgets and Contracts
- Samples
- Web Design Contracts: Why Bother (article)
- Bulletproof Web Design Contracts (article)
- Service Agreements Simplified (article)
- Graphic Artists Guilde Basic Letter of Agreement (article)
- Pricing your services
- How to set Fees
- Freelancers.com Pricing Guidelines
- What are companies looking for in a WEB DESIGNER?
- Contract Employee's Handbook
- Graphic Artists Guild Handbook: Pricing & Ethical Guidelines
- Creating Styleguides
- Creating and Maintaining a Web Style Guide (article)
- Develop a Style Guide for Your Site (article)
- Creating a Style Guide for Your Site (article - post)
- Style Guidance (article)
- Template Web Style Guides:
- CSS Mastery: Sample Style Guide
- silveroragne labs: Example Style Guide
- Sample (site): Open Office Style Guide
- Sample (site): University of Florida Style Guide / Templates
- Sample (site): Monash University Web Style Guide
- Sample (site): University of Guelph Style Guide
- Sample (site): University of Pennsylvania Style Guide
- Sample (PDF): Juniper Networks Corporate Branding Style Guide
- Sample (PDF): Co-Branding Style Guide
- Sample (PDF): WebEx Brand Style Guide
- Sample (PDF): CHIP and Medicaid Web Style Guide
- Sample (PDF): RCA Brand Style Guide
- Sample (site): NY Public Library Web Style Guide
- Sample (site): kevo.com Style Guide
- Sample (site): Noodle Incident Typography Template
- Sample (site): A Listapart Style Guide (for writers)
- Sample (site): mozilla.org Documentation Style Guide (for writers)
- del.icio.us Style Guide Links
Recommended Books:
- The
Zen of CSS Design
by Dave Shea, Molly E. Holzschlag, Peachpit Press (February 17, 2005)
ISBN: 0321303474 - CSS
Mastery
by Andy Budd, Simon Collison, Cameron Moll, friends of ED (February 13, 2006)
ISBN: 1590596145 - DOM
Scripting
by Jeremy Keith, friends of ED (September 20, 2005)
ISBN: 1590595335 - Build
Your Own Web Site the Right Way Using HTML & CSS
Ian Lloyd, SitePoint (May 2, 2006)
ISBN: 0975240293 - Bulletproof
Web Design: Improving flexibility and protecting
against worst-case scenarios with XHTML and CSS
Dan Cederholm, New Riders Press (2005)
ISBN: 0321346939 - Web
Designer's Reference: An Integrated Approach to Web
Design with XHTML and CSS
Craig Grannell, Friends of ED, (2005)
ISBN: 1-59059-430-4 - Stylin' with CSS : A Designer's Guide
Charles Wyke-Smith, New Riders Press (April 26, 2005)
ISBN: 0321305256 - Eric Meyer on Css: Mastering the Language of Web Design
Eric A. Meyer , New Riders Pub, (2002)
ISBN: 073571245X - Cascading Style Sheets: Separating Content from Presentation,
Second Edition, Briggs, Champeon, Costello, Patterson, Friends
of ED, (2004)
ISBN: 159059231X - Bulletproof Web Design: Improving flexibility and protecting
against worst-case scenarios with XHTML and CSS
Dan Cederholm, New Riders Press (2005)
ISBN: 0321346939 - Web Standards Solutions: The Markup and Style Handbook
(Pioneering Series), Dan Cederholm, Friends of ED, (2004)
ISBN: 1590593812 - Designing with Web Standards, Jeffrey Zeldman, New
Riders (2003)
ISBN: 0-7357-1201-8
Author URL: www.zeldman.com - Web Style Guide, Lynch and Horton, Yale University
Press (2001, 2nd edition)
ISBN:0-300-08898-1
Complete book accessible online: www.webstyleguide.com