Tools for Web Developers

If you are working on any website, no matter what size of site, the audience or if it’s the first or last website you are going to be working on, you need a set of tools. I’ve been making sites for a while now, and I have a system in place to make everything run smoothly from website idea to production.

Now, all websites are different so some tools may not be used as often or even at all. But there is a good chance that you will need to use them at some point if you are building multiple websites.

Tools for Design Phase

When designing a site, you don’t need many tools, just need to know how to use them properly. I’m not much of a designer, but I have found the follow tools to be very helpful and assist me.

• Photoshop / Fireworks / GIMP - This will be your main software to draw out your design to then be later sliced and used on your site and reference when coding the site. There are many other image editors out there that will also work. I personally use Photoshop CS6, and they now have a Monthly Subscription option so you don’t have to drop a ton of cash to get your hands on it.
• Color Scheme Designer - Finding colors for your site can be difficult, this is why I mostly work with grays (still can be difficult to get right). This site can guide you through picking the correct colors for your site if you have a general color in mind.
• Screen Capture Chrome Extension - This extension isn’t needed until after you programmed your site, but is highly recommended. If you need to quickly make a change or add a new design element to the site, having a screenshot of the site along can save you time from cropping a full screenshot or opening the PSD and digging through all the layers for the one you need.
• Paper & Pencil - No, this isn’t some startup software company, but just a piece of paper and pencil. Sketching out a design, color codes, widths / heights / dimensions can help you save time. I always have a pad of paper next to my keyboard and it is just covered with numbers and sketched website designs. It’s much faster to try out web designs on paper before spending a few hours working on it in an editing program.

Programming Tools

None of these tools are really needed, all you need is notepad to code a website, don’t let people tell you otherwise. But some good free / low priced software can speed up the process and make everything a little easier.

• Sublime / Notepad++ / Geany - Getting your hands on a “programming notepad” with syntax highlighting will make editing multiple files and quickly looking up a line of code seem to easy. There are many other editors out there, but I prefer Sublime the most, but Geany has amazing syntax highlighting and multi-file support. Try out a few and pick the one you like the most. I switch my editor every once in awhile, so don’t fear switching in the future if you don’t like it.
• Localhost Server / Sandbox Environment - Testing a website while programming is a good practice. But setting up a server and uploading files after every update can start to be very time consuming.
• Paper & Pencil - In the design part I said the same thing, paper and pencil. Sometimes you will have to test out equations, work around an issue, write binary out to verify your bitwise operations. Sure, all of this can be done in another computer window, but sometimes just working it out on paper makes it easier.

Debugging / Testing Tools

You may think your site is done, but you first need to test it out across different web browsers and verify that everything is working properly. Most of this has to be done manually but a few tools will be of assistance.

• All Modern Web Browsers - Have all of them installed on your computer, such as Opera, Chrome, Firefox, Internet Explorer and Safari. Since you have a real version of it installed, you can test out the JavaScript and other functions the screenshot services can’t test.
• Browser Shots - Get a screenshot of what your site looks like in various browsers. This doesn’t replace normal web browser testing, just gives you an idea on how well your site will look on other browsers. Don’t fret too much if every browser isn’t pixel perfect (and older versions). A lot of newer browser auto-update so you don’t need to worry too much about 1-2yr old versions.
• Developer Tools (Chrome) - Having the developer tools in chrome open can show you javascript issues, allow you to modify CSS rules and move around HTML elements if needed. You can also run speed tests to see how well your site loads and what you could improve. Most other web browsers also have a “Developer Tools” set that you will want to check out, mostly for the Javascript Console.
• Google Page Speed Insights - See what Google thinks about how fast your site is and what you should improve. It will most likely show issues you cannot fix such as third-party scripts / ads having cacheing issues, but you can atleast make improvements on your end.
• Device Wall - A device wall is a collection of various handheld and TV devices that you use to test your websites on. Since every handheld device will have a different resolution, pixel ratio and possibly web browser it’s good to get your hands on as many devices as possible to test. If you are cheap, like me, you can ask your friends and family for old devices they no longer use.

Don’t stop collecting and looking for tools here. After each project you may add a new tool to your workbench. Every person will work differently but hopefully the above tools will give you a good starting point. Also some of the best tools are just the programming documentation and manual testing.