5 Free Must-Have Tools For All Web Designers

Posted by in Featured, Reviews, Tips, Tools, Web Design | 5 comments

5 Free Must-Have Tools For All Web Designers

One of my favorite parts about working with the Internet and in web development is that I get to use so many cool toys on my computer.  I think a fascination with these sort of tools is a shared trait of web designers that helps push us into the web design industry.

If you haven’t noticed, a common theme has been running through my posts.  This theme is the importance of becoming a trusted asset to our clients, so that they come to us anytime they need anything to do with the Internet. We help to put the Internet at the forefront of their thinking when they are considering how to grow their business. Consequently, if they have advertising dollars, rather than putting it all in print, radio or TV, hopefully they will filter it through you for Internet marketing instead.

In my last post, I talked specifically about the importance of building a trusted relationship by thoroughly testing our own work to ensure quality before letting a client see it. Here are 5 of my favorite tools that I or my team use on a daily basis to help make the best quality websites possible.  If you find these helpful, my newsletter includes even more web design tips as well as a copy of my quality control checklist.

1. Jing – Easy Screenshots

Jing Screenshot Tool for Web DesignersI love Jing!  It is the perfect tool to easily and quickly take screenshots, make quick edits, and then email to someone to explain something about a design. You know what they say about a picture being worth a thousand words; Jing allows you to to take 30 seconds to put in a screenshot what would have taken several minutes to write up in an email or explain over the phone.  It is a tremendous time saver.

http://www.techsmith.com/jing/free/

2. IETester – Test Any Version of Internet Explorer

IE Tester Web Development ToolMicrosoft has blessed the world with a multitude of browsers that never follow true standards and each manage to have their own unique quirky bugs.  Thankfully, IE6, the worst of them, is at such a low market share now, less than 1%, that I don’t worry about it anymore except for basic site functionality. Still, it is necessary to test sites in the other versions of IE7-IE9, and this can be complicated since multiple instances of different Internet Explorer versions can’t be installed on one machine.

IETester fixes that problem. It will render any version of IE5.5-IE10 all within the same program but in different tabs. Now checking out your site in each version of IE is as easy as clicking through the different tabs. This alone could save you hours of time in going back and forth between different computers or running a virtual machine just so you can check another version of IE or even calling up a friend to look at it for you.

http://www.my-debugbar.com/wiki/IETester/HomePage

3. Web Developer Browser Plugin

Web Developer Chrome and Firefox ToolThere are several different browser plugins available that do many of the same things. I use Web Developer because that is what I have used for a long time, but a lot of my team uses Firebug. These plugins allow you to easily switch the browser size to whatever screen resolution you want to test, or shutoff all caching (which can save you from jumping off a cliff sometimes), or easily switch off Javascript to see what happens (which I recommend doing).  They also allow you to edit the CSS on a page within the browser to quickly see what different changes will do.

Web Developer will also allow you to highlight different elements right on the page to see exactly what CSS is affecting it, which can be especially handy if you are working within a CMS (Content Management System) that is pulling code from multiple sources.

Chrome: https://chrome.google.com/webstore/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US

Firefox: https://addons.mozilla.org/en-US/firefox/addon/web-developer/

4. Support Details

Easy Web Developer Client Support DetailsEven if you are using my Quality Control Guide, there will be times when you miss some kind of bug, and even after your client describes it you can’t reproduce it. It is nearly impossible to fix a bug that you can’t reproduce. Usually this issue arrises from a client using a very old machine, or from some kind of proprietary software on their computer, a browser plugin or malware, or any number of other issues.

Asking your client to go to SupportDetails and enter your email address to send you a report about their computer can save a lot of time.  With this one simple step, you can find out lots of important details about your client’s computer, without having to walk them step-by-step through how to get each piece of information.  It saves your client from getting frustrated as well.

http://www.supportdetails.com/

5. Broken Link Checkers

Broken link checker to use when designing websitesHaving a good automatic link checker is a great time saver.  This isn’t a fail-safe, since it doesn’t validate that all of your links point to the correct URL, but it does ensure that they aren’t dead links.  There are several great web design tools to check for broken links.

First, there is an excellent web-based link checker at BrokenLinkCheck.com.  This is a very thorough tool and will scan your entire site and output a list of all the broken links as well as the page where they are found.

For a quick link check on one page at a time, there are several good browser plugin tools.  My favorite browser-based link checker is for Chrome and is called Check My Links. It quickly scans the page, giving you a percentage progress readout as it goes.  Firefox also has a comparable tool called LinkChecker, although I haven’t used it as much since I do the majority of my web development in Chrome.  LinkChecker doesn’t provide a summary, but instead highlights broken or problem links right on the page.

Web Based: http://www.brokenlinkcheck.com/
Chrome: https://chrome.google.com/webstore/detail/ojkcdipcgfaekbeaelaapakgnjflfglf
Firefox: https://addons.mozilla.org/en-US/firefox/addon/linkchecker/

Each of these free web design tools can help you create better quality websites more quickly.  If you find these suggestions helpful, then you will like my Web Design Quality Control Made Easy guide.  You can download your free copy by signing up for my newsletter at the top right hand side of this page or by clicking here.  You will also get more tips and strategies to help make your web design or development business a success, and I promise to never abuse your trust.

I need your help!

I lost all of my social stats when I changed my URL from webdesignbusinessbuilder.com to www.webdesignjourney.net.

Please "Like" and share generously! :-)

5 Comments

  1. Nice and complete write up. I do web design, SEO and management and some of these I have never used. I will now add them to my arsenal.
    Scott R
    TWManager

  2. Awesome list…thank you! A couple of these are new to me & I’m excited to check them out/add them to my arsenal!

  3. Instant text finder (www.instanttextfinder.com) is pretty useful when you do text search on your desktop.
    Usually finds what you are looking for under a second.

    • Thanks Adam, I haven’t tried that one. I have always used Google Desktop for that, although I have found Windows 7 built in search works great too.

  4. SupportDetails is an absolutely PRICELESS find, wow — thanks. It will really help eliminate frustration and save time when trying to help users troubleshoot otherwise minor problems. And across all industries, not just as a “Web designer” per se. (For instance, my dear pastor… who seems always to have some technological woes. ~lol)

    Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *