Set font size: Aa | Aa | Aa

Web resources · Browsers · Editors · XHTML · CSS · Wireframing · Typography
· Colors · Design · Graphics · Accessibility · Miscellaneous · Bibliography

Web resources

• Textbook companion website
• NVCC/Loudoun Library
• World Wide Web Consortium — more than you ever wanted to know about HTML! (Includes the official language specifications.)
• HTML Validator — you are required to use this for all your class projects!
• CSS Validator — you are required to use this for all your class projects!
• HTML Validator — you are required to use this for all your class projects!
• Site-wide markup validation — validate multiple pages at once
• REL Link Checker Lite — avoid link rot with this free download
• Xenu's Link Sleuth — yet another free tool to avoid link rot
• webmonkey — "the web developer's resource"
• Web Style Guide
• How to Read W3C Specs
• W3Schools — A collection of free HTML, CSS, JavaScript, DHTML, XML, XHTML, WAP, ASP, SQL tutorials with lots of working examples and source code
• W3Fools — a contrarian view on why you might not want to use the previous link!
• HTML Dog — HTML and CSS tutorials and references
• BrainJar.com — Experiments in web programming: tutorials and programming examples
• Cheat sheets — Summaries of CSS, JavaScript, etc.
• Google webmaster guidelines
• Smashing Magazine — lots of good stuff about design, development, and more

Top of page

Browsers

One goal of this course is to ensure compatibility of web pages across multiple browsers, not just Internet Explorer. Here are a few of the more common ones, along with some helpful developer tools:

• Amaya — combined browser and editor
• Opera — less bloated, faster, great features (also available as Opera Mini for mobile devices)
  • Opera developer tools — tools for debugging CSS and JavaScript
• Mozilla Firefox — open-source, kin to Netscape, extensible features
  • The Always Up-to-Date Power User's Guide to Firefox
  • Web Developer extension — for Firefox, adds a toolbar that is very useful when developing web pages
  • Firebug — for Firefox, an extension which provides tools for debugging web pages
  • MeasureIt — a Firefox extension, provides a ruler to get the pixel width and height of any elements on a webpage
  • Pimp Your Firefox: 12 Essential Extensions for Web Developers & Designers
  • Build Better Pages With Firebug
  • Firebug Guide for Web Designers
• Google Chrome — the rising star
  • The Always Up-to-Date Power User's Guide to Chrome
  • The Top 15 Google Products for People Who Build Websites
• Safari — Apple's browser for Macintosh, Windows, and iPhone
• SeaMonkey — Mozilla's integrated Internet application suite, including Web-browser, advanced e-mail and newsgroup client, IRC chat client, and HTML editing
• Internet Explorer Developer Toolbar — tool for developing/debugging web pages (for IE7 and earlier)
• Maxthon — claims to be super fast
• Iron — browser optimized for privacy and security
• Lynx — a text-only browser
• Lynx — version for Windows (doesn't seem to work under Windows 7)
• Netscape — old versions (but it's a dead product, so why bother?)

Information about browsers

• When can I use... — compatibility tables for support of HTML5, CSS3, SVG, and more in desktop and mobile browsers
• HTML5 Test — see how your browser, and others, copes with the latest and greatest
• Review Of Cross-Browser Testing Tools — information about several free and commercial tools and services
• Browser timeline
• Browser info
• Browser News
• 15 Google Chrome Extensions for People Who Build Websites
• Google Chrome Extensions for Web Design Students
• The Google Chrome comic book — interesting for the technical details
• Never Mind the Bullets — Microsoft comic book demonstrating HTML5 features
• Smartphone Browser Landscape
• Mobile HTML 5 — HTML5 compatibility on mobile and tablet browsers
• Top 10 specialty Web browsers you may have missed
• Reliable Cross-Browser Testing, Part 1: Internet Explorer

Top of page

Editors

Here are some free text editors which are HTML-aware, with lots of additional features to help you as you create and edit your code. These are much more useful than Microsoft's Notepad. Many of them are also available in "portable" versions, which means you can run them from a USB flash drive without needing to install them under Windows.

• PSPad — my current favorite
• Notepad++ — for Windows, download the .EXE version. Also available in a portable version.
• Komodo Edit — another versatile, open-source editor, with extensive language support. (Lots of great features, but with more of a learning curve.)
• Arachnophilia — this is Java-based, so will run on most platforms
• jEdit — this is Java-based, so will run on most platforms
• Webocton - Scriptly — includes features for PHP scripting.
• NoteTab Light
• Crimson Editor
• Eclipse IDE -- this is a full-blown Interactive Development Environment — lots of useful features, but more involved to set up and learn
• Vim — if you like the Unix/Linux vi editor, here's a version for Windows with a GUI. (It's a bit arcane, but allows you to accomplish a lot with minimal keystrokes.)

For Mac users, the choices are more limited, and I have no personal experience. But here are some possibilities to check out.

• MacOS includes a program called TextEdit. It appears to be roughly comparable to Windows Notepad in its lack of functionality.
• Arachnophilia and jEdit, listed above, are written in Java, and should therefore run under Mac OS
• Alpha — a shareware program
• Aptana Studio — a free multi-language IDE
• BBEdit — well-known but expensive
• TextWrangler — a free programmer's editor from the purveyors of BBEdit
• Komodo Edit — a free open-source editor (also available for Windows)
• Smultron — a free open-source editor
• Tincta — another free editor
• Fraise — a free open-source editor

Top of page

HTML & XHTML

• HTML Goodies — "the ultimate HTML resource"
• Deprecated elements
• "About" newsletter — a free weekly email newsletter about Web Design / HTML
• Quirks mode
• XHTML templates — saves typing the prolog
• Character entities
• Entitifier — on-line tool to convert characters that should be coded as entities
• "The Only HTML5 Resources You Need for Getting Up to Speed" — get ready for the next great thing!

Top of page

Cascading Style Sheets

• ProCSSor — on-line CSS prettifier
• The Noodle Incident — various CSS references
• CSS Edge — pushing the edge
• Cutting Edge CSS
• Real-world Style — CSS layouts, tips, tricks, and techniques
• CSS Vault
• CSS Zen Garden
• Stylegala
• CSS Beauty
• Apptools example solutions
• Snippets — simple CSS snippets for creating grid & column based layouts

Top of page

Wireframe Resources

All of the web-based services listed here either are totally free or else offer a free level of service (for which you may have to hunt around on their site to find it). But a wireframe is just a diagram, and you can use any graphics package (although something like Visio or OmniGraffle is better than someting like PowerPoint) or even old-fashioned paper and pencil.

• Ultimate Guide to Website Wireframing
• Gliffy.com
• iPlotz.com
• HotGloo.com
• JumpChart.com
• MockFlow.com
• Creately.com
• Cacoo.com
• LovelyCharts.com
• Use Firefox to Create Simple Mockups — good tutorial
• Free Printable Sketching and Wireframing Templates

Top of page

Typography

• TypeTester — Compare fonts and font settings
• U&lc Magazine
• Will-Harris House & Studio: Graphic Design and Typography
• Microsoft Typography
• The Terminal — The P22 Journal of Typography
• Creativepro.com — design advice and free newsletter
• Typographic Sins
• FontShop education resources — lots of tips and tutorials

Top of page

Colors

• Glyph Colour Explorer
• The Browser-Safe Color Palette
• More on the Safe Palette
• ColorPic — a free tool for dealing with color definitions (including grabbing any color on your screen)
• Color Cop — another free tool for grabbing colors on your screen
• Colors MiniLab — another free tool for grabbing colors on your screen
• Clear Ink's Palette Man — create a color palette (color scheme)
• Color Scheme Designer
• Colors Palette Generator
• Kuler — ready-made color schemes
• Colors on the Web — color theory for web designers
• Color Theory for Designers, Part 1: The Meaning of Color
• Color Theory For Designers, Part 2: Understanding Concepts And Terminology
• Color Theory for Designer, Part 3: Creating Your Own Color Palettes

Top of page

General Design Issues

• A List Apart — explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.
• Jakob Nielsen's website — sign up for "Alertbox", his free column on web usability
• Web Pages That Suck — learn usability and good Web design by looking at bad design
• Worst of the Web — more examples of bad design
• Dangerous Words — a short guide to language that should be avoided
• NVCC web design tips
• National Cancer Institute's Research-based Web Design & Usability Guidelines — more than you ever thought there was to know...
• Web Editor's Toolkit
• The Web Wizard — tutorials and free newsletter
• SitePoint — articles and free newsletters
• Good Documents — tips on effective writing for the Web
• Writing Style for Print vs. Web
• Web Design from Scratch — tutorials, how-to guides, examples
• Introduction to Good Usability

Top of page

Graphics — Tools & Pix

• GIF vs. JPEG
• Windows XP Power Toys — includes a free tool for resizing image files
• Easy Thumbnails — another free tool for resizing image files
• JR Screen Ruler — a handy tool to measure the size in pixels of anything on your screen
• Free Ruler — another free screen ruler, this one for MacOS
• Screen Calipers — another handy tool to measure the size in pixels of anything on your screen
• PMeter — another handy tool for measuring pixels and picking colors
• The GIMP — a free open-source image manipulation program
• Grokking the GIMP — a users guide you can buy or read on-line for free
• Inkscape — a free open-source vector graphics editor for working with files in SVG format
• Paint.net — another free open-source program for image manipulation and photo editing
• Pixlr — free on-line image editor
• IrfanView — a free image viewer with extensive image manipulation capabilities
• Sock.xchng — free stock photos (registration required)
• FreeFoto.com — free stock photos
• FreePhotos.com — free stock photos (registration required)
• EveryStockPhoto.com — free stock photos (registration required)
• PhotoXpress.com — free stock photos (registration required)
• SquidFingers — free backgrounds
• Mayang's Textures — free backgrounds
• MaxPower — links to sites with free icons
• FamFamFam — free icons
• Sweetie — free icons
• FavIcon from Pics — web tool for creating favicons from regular images
• Favicon Generator — another free web tool for creating favicons from regular images

Top of page

Accessibility

• Web Accessibility in Mind — a good starting point for accessibility issues
• W3C Content Accessibility Guidelines
• Colour Contrast Analyser (downloadable)
• Color Contrast Calculator (web-browser based)
• GrayBit — render a web page in grayscale to view perceived contrast
• CheckMyColours — check color combinations for sufficient contrast
• Web Accessibility Toolbar
• WebAIM Tools
• Functional Accessibility Evaluator
• Low Vision Simulator
• VisCheck color-blindness simulator
• We are colorblind.com — Patterns for the Color Blind
• "Beyond ALT Text" — Making the Web Easy to Use for Users With Disabilities (huge report)
• Microsoft Web Accessibility Handbook
• Color Selector — includes various tools for checking contrast, color combinations, etc.

Top of page

Miscellaneous Tools & Notes

• 80 Apps and Resources for Cloud-Based Web Dev — handy for doing development on somebody else's computer or a device like a Chromebook
• The Internet Society, Washington Chapter — get involved in building a better Internet (membership is free)
• Meebo — run Instant Messaging from your web browser (handy if you want to IM me from the campus computer lab)
• Toucan — sync, backup, and secure your files (especially useful for a USB flash drive)
• FileZilla — a (free) open-source FTP client and server for Windows and other systems. (Note that for this class, you want the client.)
• Audacity — a free open-source sound editor
• Web Page Analyzer — free website performance tool and web page speed analysis
• BrowserSizer — free tool to easily simulate browsing at different screen resolutions
• Google Browser Size — another free tool to show how much of a web page is visible at different screen resolutions
• VisiBone — various on-line references and tools for color and HTML
• 10 Big Myths about copyright explained
• Tips for an Effective "Contact Us" Page
• 10 things customers want on a small-business Web site
• Things You Should Do Immediately After Launching a Website
• Volunteer Work in Web Design
• 60 Questions to Consider When Designing a Website
• 10 Excellent Tools for Testing Your Site on Mobile Devices
• 20 Free Online Tools for Website Speed Testing

Top of page

Bibliography

This is not intended to be an exhaustive list, but includes some of the books I have found useful. Highlighted books are especially worthwhile. Note that electronic versions of many technical books can be viewed while on-line via the "Safari" database on the NVCC library web site.

• Blogging: Genius Strategies for Instant Web Content, Biz Stone. New Riders Publishing, 2002, ISBN 1-73571-299-9.
• Build Your Web Site the Right Way Using HTML & CSS, Ian Lloyd. SitePoint, 2006, ISBN 0-9752402-9-3.
• CSS Pocket Reference, 3rd edition, Eric A. Meyer. O'Reilly Media, 2007, ISBN 0-596-51505-7.
• CSS: The Definitive Guide, Third Edition, Eric A. Meyer. O'Reilly Media Inc., 2006, ISBN 0-60033-097-5.
• CSS: The Missing Manual, David Sawyer McFarland. Pogue Press/O'Reilly, 2006, ISBN 0-596-52687-3.
• Deliver First Class Web Sites: 101 Essential Checklists, Shirley Kaiser. SitePoint, 2006, ISBN 0-9758419-0-4.
• Designing Web Usability: The Practice of Simplicity, Jakob Nielsen. New Riders Publishing, 2000, ISBN 1-56205-810-X.
• Designing with Web Standards, 3rd edition, Jeffrey Zelman and Ethan Marcotte. New Riders Publishing, 2010, ISBN 0-321-61695-2.
• Don't Make Me Think: A Common Sense Approach to Web Usability, Steve Krug. New Riders Publishing, 2000, ISBN 0-7897-2310-7
• Firefox Secrets, Cheah Chu Yeow. SitePoint Books, 2005, ISBN 0-9752402-4-2. (Chapter 7 has good coverage of tools for web developers.)
• HTML & CSS: The Complete Reference, 5th edition, Thomas A. Powell. McGraw-Hill/Osborne, 2010, ISBN 0-07-149629-7. (includes coverage of XHTML, HTML5, CSS3)
• HTML & XHTML Pocket Reference, 4th edition, Jennifer Niederst Robbins. O'Reilly & Associates, 2010, ISBN 0-596-80586-9.
• HTML5 for Web Designers, Jeremy Keith. A Book Apart, 2010, ISBN 978-0-9844425-0-8.
• Web Standards Solutions: The Markup and Style Handbook, Dan Cederholm. Friends of Ed, 2004, ISBN 1-59059-381-2.
• Web Style Guide, Patrick J. Lynch and Sarah Horton. Yale University Press, 1999, ISBN 0-300-07675-4.
• Writing for the Web, Crawford Kilian. Self-Counsel Press, 1999, ISBN 1-55180-207-4.

Web resources · Browsers · Editors · XHTML · CSS · Wireframing · Typography
· Colors · Design · Graphics · Accessibility · Miscellaneous · Bibliography

Top of page

Last revision, 1 January 2012.
© 2002-2012 Tom Gutnick. All rights reserved.