Solid Free(mium) Tools For Designing, Developing, and Deploying Websites

You see ads for basic website builders everywhere, but real web development is more than drag and drop.

From start to finish, you might end up using dozens of tools to get the job done.

Each tool will serve a specific purpose, and it’s vital they all work together in unison to prevent delays, headache, and good-ol’ frustration.

Below are our top recommendations for the best web development tools, sorted by category.

If you’re looking to get the job done better and more efficiently, either for client work or your own projects, read on...

1. Visual Editors

1.1. Bluefish

Bluefish is a robust (and free) visual editor with a fairly impressive list features.

If you don’t want to shell out money for an expensive (and clunky) editor like Dreamweaver, Bluefish is your next best bet.

It’s a fast, lightweight editor that supports XHTML, CSS, Ruby, Shell, and everything in between.

So your functionality is there, and where a more bloated program would freeze with hundreds (or thousands) of web pages open, Bluefish stays responsive, even on lower-end computers.

You’ll find all of the standard developer tools you need, but that’s where Bluefish stops - there aren’t any fancy bells or whistles.

For example, if you collaborate with others, Bluefish doesn’t provide any in-program way to communicate like Dreamweaver does.

But it does support FTP and other types of file protocols.

Another downside is the lack of the WYSIWG editor, but if you’re a skilled developer, that’s a feature you might not need.

Bluefish is available for Windows, Mac, and Linux.

2. Text Editors

2.1. Brackets

Still using Notepad++?

Although all text editors will let you tap away at raw code, Brackets is our favorite because of its design-relevant features.

If you’re making manual edits, Brackets integrates with your browser so you can check your work on the fly.

The shortcuts are snappy and will save you time (once you get used to them).

You can even pull CSS from other web elements with the Extract extension and copy/paste them right into your code. 

A text editor is a text editor - but you can do better than Notepad or Notepad++.

Get Brackets for a free, slightly-upgraded text editing experience that can run on both Mac and PC.

2.2. iEditor

iEditor is a free iPhone app from Comcsoft that will allow you to open text, HTML, and even Javascript files for quick edits on the go.

Although functionality is extremely limited (there is no FTP support or developer-specific tools), it is free - and that’s always convenient.

3. Prototyping / Wireframing

3.1. Pencil Project

Wireframing software isn’t particularly complex - as such, there are plenty of free options available.

Pencil Project is our pick because of its increased functionality past the basics.

All basic framing tools are included, but you can also go further to develop a concept with a tool like mind-mapping.

Other features include fluid, easy-to-customize diagrams, a wide assortment of shape templates, and even Android/iOS templates to save you time in mobile design.

You can link pages together and output in a few different formats, including PNG, PDF, and SVG.

The only feature that Pencil Project really lacks is collaboration - aside from exporting, there is no way to share or receive feedback on your project.

Aside from that, Pencil Project is a very comprehensive wireframing tool, and best of all, it’s free.

Without the need for in-program collaboration, we think developers of all skill levels will find it to be more than enough.

Pencil Project is available for PC, Mac, and Linux.

4. Typography

4.1. Typecast Beta

The fonts you use can make or break the readability of a page.

Imagine if we were using Times New Roman for this post - would you still be tuned in?

Probably not.

Typecast is the most intuitive solution to managing fonts we’ve seen. The platform aggregates over 90,000 fonts from Google, Fonts.com, TypeKit, and FontDeck to save you time.

Pick a new font and build out a new concept in a snap. You can even compare different fonts side by side - perfect for presenting work to clients.

Before, sifting through a repository like Google Fonts and hoping for the best was your only option.

Now, Typecast takes care of the work for you. 

Sign up free or get an agency account (up to three users) for $10/month.

Typecast is available as a web app.

5. Visual elements

5.1. Fontello

Fontello compiles free icon packs (such as those from Font Awesome and MFG Labs), then lets you pick and choose your favorite ones to create a pack of your own.

From there, you can download the pack and use the icons as-is, or, you can add titles to create full graphic elements in a snap.

You always have the option of buying an icon pack or paying a designer to create a custom one for you.

But with the sheer diversity of icons available on Fontello, we’re confident any developer can find the icons he or she needs without paying out of pocket.

Fontello is available as a web app, and files can be downloaded in any format imaginable.

5.2. Unsplash & Pexels

Unsplash is a free stock photo resource with stunning stock photos.

Although only 10 new photos are added per week, there’s an impressive existing collection on the site with the option to search by keyword.

Because of the sheer quality of the images, most can be used for a wide variety of purposes, even if the picture you choose isn’t totally relevant to what you’re saying.

Although Unsplash is considered the best, other free stock photo sites are making waves, too (pun intended).

One such site is Pexels.

The concept is the same, except 10 new photos are uploaded daily, not weekly.

And as with Unsplash, you can search by keyword or category. 

Because there are more photos on a site like Pexels, you’ll be able to find images that match with your ideas more closely - Unsplash focuses mostly on grandeur shots of landscapes, scenery, and people.

5. Testing (platform, browser, device)

5.1. BrowserShots

BrowserShots is good to use if you have a mostly-static website that you won’t be modifying every couple of minutes.

The concept is simple - enter a website URL, enter the browser(s) you’d like to test, wait a few minutes, and you’ll be able to see how it displays on each of those browser(s).

Best of all, it’s free.

The problem with BrowserShots is that it’s slow, sometimes inaccurate, and does not offer any information aside from a simple screenshot. But for those with simple websites, it should be enough.

BrowserShots is available as a web platform.

5.2. Remote Preview

Remove Preview is similar to Browser Shots, except with a focus on mobile devices.

The software is very simple - you download the program, specify which files should be loaded, and press a button.

Remote Preview will display screenshots for your website (the files you loaded) on all of the platforms selected, which include Android, Blackberry, iOS, Maemo, Meego, Symbian, Windows Phone and WebOS.

Although Remote Preview doesn't give you real-time displays of how your website behaves, the screenshots will be enough for the majority of webmasters to rest easy knowing their websites are displaying properly.

Upgrade to a paid piece of software like Ghostlab if you need more functionality than that.

Remote Preview is available for Windows.

6. Collaboration

6.1. FreedCamp

Relying on others? Don’t delay your projects because they’re bad at communicating.

Instead, get everyone under one roof and move your projects along smoothly.

FreedCamp is a simplified project management dashboard where you create projects and assign members to each one.

You can add tasks, notes, and files, and when something happens in a project, you can customize your notification preferences to be alerted through email or text.

In case you’re wondering, yes - FreedCamp’s name is intentional.

It’s billed as the best free alternative to BaseCamp, a $29-$79 / month project management platform that many find lacking.

Rest assured that although FreedCamp is free, the functionality is there - their client list is impressive, boasting some big names like PayPal and AirBnB.

Highly recommended for anyone who feels too much time is wasted coordinating through email.

7. Optimization

7.1. Trimage

The #1 largest consumer of resources on any particular website is usually the image folder.

Especially if you use custom image dimensions (instead of resizing manually), you may be loading 10+ MB just from the graphic elements on a page.

You can reduce the file sizes for all of your images (without compromising quality) with a tool like Trimage. Both PNG and JPG files are supported.

You input your files, press a button, and the new optimized images will automatically be saved. Bulk input is supported.

Other tools like Trimage exist, but very few are as robust as Trimage.

Before you launch, run everything through the tool for guaranteed increased load speeds.

Trimage is available for Windows.

7.2. Google Page Speed

To check on header information (such as pulling javascript) that could be delaying page load, use a tool like Google Page Speed.

It’s free, and you’ll be able to see how long each element on a page or website takes to load.

Usually, there will be one or two egregious errors that you need to address.

Google Page Speed is available as a web app.

Conclusion

You could start testing out web design and development tools at random, but we wouldn’t recommend it. Most of them are… lacking… to say the very least. Instead, scroll up, pick the tools you could see yourself using, and get to work. You’ll be more efficient. The end result will look better. And most importantly, your code will be clean. Good luck!