The Best Free Web Development Tools on Windows

Created Thursday, 20 October 2011 15:16 Last Modified Monday, 24 June 2013 23:40

As a designer or developer, the operating system that you use has no influence on your skill level, creativity, or craftsmanship. Unfortunately, if you are a designer or developer who uses Windows, whether because of choice, comfort level, or economic necessity, you tend to get looked down when you mention your operating system to other designers. At times, it can seem like every other self-respecting creative on the planet uses an Apple - and I've even been asked half-seriously by a client, "where's your Mac?"

Fortunately, Windows designers and developers have the last laugh. The majority of our audience is viewing our work on Windows systems, and the majority of those users are using Internet Explorer, which ceased development for Macintosh years ago. This means that we are developing on the same system that we would have to test and troubleshoot on anyway. In addition to to this advantage, there are a number of tools for PC's which are extremely useful for web design and development.

Notepad ++

One of the advantages of using a Mac is that there are a number of great text editors available for the platform, like Coda and Textmate. Windows has many comparable alternatives, and among them, Notepad++ is the heavyweight champion - and it's "free as in both 'free speech' and 'free beer'". The program has all the features you could want from a text editor, including code coloration, support for every major web language, the ability to launch files directly in multiple browsers, powerful plug-ins that extend functionality, and the ability to record and run macros (if you're a designer who doesn't know what that means, it's the coding equivalent of Adobe's actions panel).

Fiddler - Debugging Proxy

Fiddler allows you to monitor requests between your computer and the internet - this can be great for when you are testing https connections and need to see if there is any insecure content being transferred, or if you're having trouble with bottlenecks on your connection & you want to see what is making all the requests.

GTMetrix - Site Speed Analyzer

GTMetrix isn't software you have to download, but a service where you can test your website's download time, get recommendations to improve your web site's speed, and see a timeline of your content as it is downloaded. Similar to Google Page Insights & Pingdom's Page Speed Test.

Color Contrast Analyzer (now on Mac, too)

When designing for the web, the readability of our text needs to be in the forefront of our minds. However, being geeks, most of us have computer screens with better contrast and brightness than the majority of our users. This can create some problems - it can be tempting imitiate Apple's style of using gray type on a white background, but how do we know if there's enough contrast on a less powerful monitor?

Enter the Color Contrast Analyser. It's a very simple, lightweight program that uses the W3C's contrast ratio algorithm to check background and foreground colors for readability, and warns you if you're using a combination that won't work well for your visitors. It has very few, easily manageable settings, including an option to show the contrast ratio for the colorblind. If you're a good designer, most of the time you won't need this tool - but when in doubt, it can be a lifesaver. The best part is it only takes seconds to use.

HFS - HTTP File Server

HFS allows you to turn your computer into a file server, which you can use to share files directly with members of your development team across the internet. It can take some effort to configure, but once it's up and going it's a great way to transfer large files (like raw video) without having to deal with size limits imposed by e-mail accounts or 3rd party file storage services.

G Sitemap

Generating a sitemap is very important for search engine optimization. Submitting sitemaps to search engines is one of the best ways to improve rankings, and keeping a sitemap on your server will help search engine spiders find pages and files that they would otherwise miss.

G Sitemap is a webcrawler that you can use to spider your site and generate a valid XML sitemap. This is a great tool for most users, but if your site is using WordPress or another popular content management system, it might be more efficient to find and install a plug-in designed to specifically generate and submit a site map for you (for WordPress, I use the wonderful Google Sitemaps Generator.

Web Developer Toolbar (on Mac, too)

The Web Developer Toolbar by Chris Pederick is the tool that I use the most of all. I list it last because it was never specific to Windows like the others were, but rather cross platform by the beginning. It's always a shock to me when I find out a developer or designer doesn't use it; Partly because it's so helpful, but mostly because the people who do use it can't shut up about it.

The toolbar is available as a browser extension for both Firefox and Chrome, but in my experience it works best in Firefox. The extension gives you a plethora of cool tools and abilities - including the ability to edit CSS directly in the browser and watch your changes live, outline capabilities (so you can see how the page is fitting together), validation tools to measure code against web standards, and a myriad of miscellaneous design tools.

In Conclusion

With all of these great toolsat your disposal, you definitely don't have to feel like a second class creative because you aren't on an Apple. In the end, the effort and ability you put into your work is a thousand times more important than the hardware you make it on.