Tools For Web Designers

Everyone, especially computer people, love lists of resources. I do as well, and I decided it’s time to share many of the resources that have helped me in my career. All of these resources (except for the print books) are either freeware, open source, or the application offers a free version.Firefox

• Firebug  – Essential tool for CSS/JavaScript debugging.
• YSlow – Firebug add-on to help determine performance bottlenecks.
• Web Developer Toolbar – Provides tools to compliment Firebug.
• Fireftp – The best FTP client and in a browser no less!
• Dust-Me Selectors – Scans the page against your current style sheet to determine extraneous styles.
• Server Spy – See the server technology for current page.
• Colorzilla – Awesome color picker.
• HTML Validator – Validate pages and clean them with this tool.
• IE Tab – View pages in IE inside Firefox.
• Selenium IDE – Record and playback end-user testing.
• X-Ray – Bookmarklet to examine elements in DOM.

Web Worker Applications

• Box.net – Backup your files with this tremendous tool.
• Harvest – Time tracking utility.
• Jott – Record messages from your phone and add them to various applications.
• Gliffy – MS Visio replacement for diagramming.
• Yugma – Free video conferencing.
• 101 Essential Freelancing Resources – Need more than we’ve got here?

Print Books

• Designing with Web Standards – A great introduction to web standards design by Jeffrey Zeldman.
• CSS: A Definitive Guide – Eric Meyer’s magnum opus on CSS.
• Don’t Make Me Think! – The acclaimed introduction to usability.
• Codin’ For the Web – Great book to teach application development to designers.
• Web Design in a Nutshell – Invaluable desktop reference.

Online Books

• Version Control with Subversion – Introduction to the precepts of Subversion.
• Getting Real – 37 Signals famous work on design.
• O’Reilly Library – Various O’Reilly books you can read online.
• The Elements of Typographic Style Applied to the Web

Tutorials

• W3Schools.com – XHTML, CSS, PHP, SQL, XML, etc.
• Good Tutorials – Photoshop, Flash, Illustrator, PHP, HTML, etc.
• PHP for the Absolute Beginner
• ASP.NET 2.0 Quickstart Tutorial
• Learn CSS Positioning in 10 Easy Steps

Editors

• CSS Vista = Neat CSS editor.
• PSPad – Simple, fast editor that I used for a long time.
• Aptana – Editor built on Eclipse that, I think, is the best out there.
• Microsoft Visual Web Developer – Free MS editor to create ASP.NET applications.
• SQLYog – GUI interface to MySQL.
• SQL Server Management Studio Express – The free edition of the GUI to SQL Server.

Templates

• Open Source Web Design
• Themebot – Themes for Drupal, WordPress, Joomla, and phpBB among others.
• Open Web Design
• The Open Design Community
• The CSS Tinderbox – CSS layouts.
• Little Boxes – CSS layouts.

Project Management/Version Control

• Assembla – Free TRAC/Subversion workspaces.
• TRAC – Slim, extensible SDLC tool.
• Subversion – The great open source source control.
• TortoiseSVN – GUI interface into Subversion via Windows shell.
• AnkhSVN – Browse Subversion repositories inside Visual Studio.

Testing/Validators

• UITest.com
• The Scrutinizer – SEO validators and analysis.
• Test Everything!
• Web Site Tools
• WAMP – Apache, MySQL, and PHP on Windows)

Application Comparison

• Wiki Matrix – Compare wiki applications.
• Forum Matrix – Compare forum applications.
• WebBlog Matrix – Compare blog applications.
• The CMS Matrix – Compare CMS applications.
• OpenSourceCMS – Demo various CMS’.

Web Designer Blogs/News Aggregation

• Design Float – Digg style site for designers.
• Web Developer’s Handbook – More resources then you could ever need.
• CSS Juice – CSS tips and utilities.
• Smashing Magazine – The best resource for resources.
• .net Develop – Cutting-edge articles on web technology best practices.