Figuring out where problems lie in websites used to be a case of trial and error, but all of the biggest browsers – even Internet Explorer – now include built-in development tools. Opinion seems split regarding which tools are the best.
Safari's web inspector gets points for looking great and being surprisingly feature-packed, but Firefox is the browser almost all developers argue should be your first port of call, due to its sheer extensibility.
Recommended extensions include Web Developer, colour picker ColorZilla, on-screen ruler MeasureIt, performance analyser YSlow, and Firebug.
On Firebug, Ian Routledge of Edible Code told us via Twitter that it "saves hours of debug time and has features for everything – DOM, network, JavaScript, as well as add-ons for Flash and cookies". If you're using an Intel Mac, you also have the ability to run Windows in a window, in order to test sites on Internet Explorer.
Boot Camp is pointless for this, unless you like rebooting constantly between Mac OS X and Windows, so check out Sun's free VirtualBox. If that doesn't cut the mustard, have a look at Parallels Desktop or VMware Fusion.
Regardless of your choice of platform, chances are you'll have moved away from static HTML websites for most projects. If so, investigate installing an xAMP solution stack. A WAMP package will enable you to run an Apache server and sites built using MySQL and PHP on Windows PCs.
Similar solutions exist for Mac and Linux (MAMP and LAMP, respectively). A popular distribution is XAMPP, although for Macs, MAMP is a good bet.
Mac users should also investigate Mac OS X's built-in webserver. To run more than a single site, you must edit some config files; but if you don't fancy getting your hands dirty, VirtualHostX makes it easy to run multiple sites, and it works with MAMP and XAMPP too.
As a final entry in this category, it's heartening when developers create something unique but also essential. ARTIS Software did this a few years back with a set of slightly clunky screen tools for Mac, which Iconfactory subsequently spruced up and compiled as xScope. This utility is now an utterly essential purchase for any Mac-based web designer, particularly because of its Guides and Dimensions tools.
The former enable you to overlay horizontal and vertical guides on your screen – perfect for checking whether sites adhere to a baseline grid. The latter provide the means for measuring the dimensions of anything on your screen, including distances between components within a Photoshop document.
Getting things done
For most people in the web industry, designing and building websites is only part of the job. Luckily, today's designer has access to a huge array of tools for project management, collaboration and communication, and the best are distinctly web-oriented.
The undisputed favourite app in this area (in fact, the app that topped our top five) is Dropbox, an online tool for file backup and synchronisation. The free version provides 2GB of storage, and you can sync files across several computers, work on files offline, share links with others and control access to shared folders.
"It's changed the way I work," says Dawes. "My projects are now stored inside Dropbox, which syncs across the Macs I use. There's built-in version control, and I can access files via my iPhone and the web. I couldn't live without it."
Another service likely to become ubiquitous in designers' toolkits is Evernote. This is effectively an app for thought capture – it's designed to house notes and clippings, PDFs and URLs, which can be tagged or automatically organised. Like Dropbox, Evernote's power lies in its all-devices approach – there are clients for Windows, Mac and the five most popular mobile platforms. The basic ad-supported service is free.
Other online tools are favourites for enabling collaboration with clients in a more direct sense. "I wouldn't be able to function without shared spreadsheets and documents," claims Jared Plummer, founder of HAUS (madeinhaus.com) referring to Google Documents.
He says that while his clients have joked about moving from Microsoft Office to Google's online apps, they're "quick to come around and love being able to collaborate and see our progression through projects by viewing our Google tracking spreadsheets".
He notes that while Google's online apps aren't as robust or feature-packed as desktop equivalents, they do what's needed well.
Plummer recommends anyone requiring a hosted project management solution to try Unfuddle: "Unfuddle uses a ticketing system for tracking things that need to get done. We use it for managing design projects, software development and for tracking customer service requests."
