Developing a well-rounded aesthetically pleasing website can be a daunting task even for the most seasoned web developer. You must identify current trends and standards and determine ways to incorporate them into your designs. Luckily, there are many free tools which are available that can help you speed up your efforts and work in a more efficient manner. Below are 20 tools which are sure to benefit all developers.
Typetester
Typetester is an online application for comparing how different fonts and font attributes will appear on a given set of text. Its primary role is to make the life of a web designer easier by allowing them to quickly and easily visually compare different typefaces.
pForm
Create a php form in seconds with this free and easy to use tool. If you need a little more power you can check out its parent program MachForm or great alternatives wufoo and formspring (both of which offer limited free versions and paid premium versions).
ColourLovers
An international site created for color lovers. You can search the site for color palettes that you may use for projects or create new palettes which can be rated by peers. Great for inspiration or critique of design ideas.
Firebug
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. This is probably one of the most widely used web developer tools out there. If you don't have it, get it now!
HTML Entity Character Lookup
Need to know how to display the trademark symbol on one of your pages, this tool if just for you. The HTML Entity Lookup searches the html entities for matches to the searched character based on how the character looks. For instance, the letter "c" would match © and ¢ entity, because of the way they look. This is really a tool that you need to try to understand how useful it is (also available as a dashboard widget for you Mac users).
960 Grid System
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Watch an in depth screencast on this framework.
Em Calculator
Em Calculator is a small JavaScript tool which allows you to enter a size in pixels and displays what the corresponding em value would be. This tool is extremely easy to use and handy for a quick reference.
Browser Shots
Browser Shots allows you to view your website in around 100 different browsers on 4 different platforms to determine the ultimate cross browser support. Given how many different types of configurations exists today, it is important to ensure that your site looks its best on as many platforms as possible.
Icon Finder
Iconfinder provides high quality icons for web designers and developers in an easy and efficient way. You simply type in a keyword into the search box and Iconfinder brings you back icons beautiful icons which you can freely use.
WhatTheFont
Want to know the font that your favorite blog uses, this tool can help you. Just upload an image of the font that you are intrigued about and the tool will do its best to match it with the right font. If you would rather trust a real person, the WhatTheFont forums are a great resource as well.
MeasureIt
A great Firefox plugin that lets you draw out a ruler to get the pixel width and height of any elements on a webpage.
ColorZilla
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can zoom the page you are viewing and measure distances between any two points on the page.
Pingdom
Pingdom loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser and then displays how long each of those elements took to load using nice visual time bars. This can be very useful when you are trying to improve the efficiency of your site.
Test Everything
Test Everything lets you run your website though approx. 100 different validators and testers, all from the comfort of one application. This can save an enormous amount of time during the testing phase of your site development.
CSS Sprite Generator
Sprites can increase the speed of your site by reducing the number of HTTP requests and are therefore becoming more popular. Using them, however, requires a good amount of foresight and planning which can make using them somewhat difficult. This amazing online tool allows you to upload your images in a zip file where they are then combined into a sprite. Once the sprite is created, it creates the CSS that you will need to use the sprite and allows you to download all of if free of charge.
Web Developer Toolbar
An extremely useful Firefox plugin which provides many tools which web developers use on a daily basis. Great for quickly validating your XHTML or inspecting HTTP header information.
Domainr
There are plenty of tools available that tell you whether a domain is taken or not. What sets Domainr apart is that it takes your query and then tries to create a more memorable name. Domainr helps you explore the entire domain name space beyond the ubiquitous and crowded .com, .net and .org. Inspired by jish.nu, burri.to and del.icio.us this tool can come in handy when you just can't think of a unique domain name.
Font Burner
Font Burner is a free online tool that allows you to search through over 1000 fonts they have available. Once you have found a font you like, the tool provides you with a snippet of code which allows you to use the font on your site, free of charge. The font will then be displayed on every computer, regardless if the user has the font installed or not.
Smush.It
Smush.It is a neat application which uses non-lossy image optimization tools to squeeze the last bytes out of your images
Load Impact
Are you about to release a product or come out of beta and are wondering whether your site will be able to take the increased traffic? Load Impact is a free tool which tests your site at different load levels and then displays your results in an easy to understand graph.
The End!
Well hopefully you will find something useful in this list. It is by no means an exhaustive list, but simply a list of tools that I have found to be useful in the past and that you may as well.
- Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Philo June 9th
Awesome List!
This will come in handy!
“HTML Entity Character Lookup”
( )Luiz Janela June 12th
Agreed: “Awesome List!”.
But the Form Generator generates completely bad and not validated html, DON’T USE IT!
( )Greg Dougherty June 14th
Yea, this is a pretty fantastic list… I like it a lot!!!
- Greg
( )Arpan Dhandhania June 17th
Mac guys, there is an awesome widget for “HTML Entity Character Lookup”. Its called ‘Symbol Caddy’.
Robert June 17th
Really ! An Amazing collection which i cant expect to be available at one place, it took me 30 days to find the toolbar like Firebug 6 months ago when i first heard about a tool which allows one to edit website realtime.
( )Adrian - WPdone June 9th
Great tools. For font selection you can use also FontPicker – an Adobe Air App
( )some1 June 9th
Very nice as always
( )Keep em coming ;>
Peace4man June 9th
Exellent I want to add an exellent Form Builder The ‘Form Factory’ http://www.webformfactory.com/ .
( )Thanks again you did make my life better
infocyde June 9th
Another great resource, keep up the good work!
( )Crysfel June 9th
firebug and the web developer toolbar are the best!!
( )kreativeKING June 9th
Wow I never heard of FontBurner. Gonna have to test that out.
( )Meshach June 9th
Web developer toolbar and firebug are absolutely revolutionary.
You forgot to mention Adobe Browser Lab
( )bill June 10th
browser lab isn’t open to new registrations
( )simonataction June 9th
Nice list
( )arnold 'C June 9th
wow fontburner going to try that out
( )cssah June 9th
great list ,i love Typetester and Firebug
( )Jeff Kes June 9th
Great Stuff
( )Randy June 9th
I have added many of these to my bookmark bar on chrome! Awesome list! Thanks!
( )Web010 June 9th
Wow thanks, great list.
( )VoodooBettie June 9th
I read lots of web round-ups but I hadn’t heard of most of these. Thanks! Very helpful list.
( )Paul Radicdh June 9th
Great list. Browser shoots is a go to for the mac developer!
Thanks
( )Rohit June 9th
FireBug is really a revolutinary, even i got to know some of the other tools….. nice work
( )Andrew June 9th
Great Stuff! Definitely useful!
( )Ramana Moorthy June 9th
Cool List.
I think don’t need “mesure it” Addon.
We can use “Web Developer Toolbar”.
Miscellaneous -> Display Ruler.
( )iPad June 12th
You’re right
( )Don June 9th
Web developer toolbar has a measuring tool. No more need for MeasureIt plugin.
( )Lamin Barrow June 9th
Fantastic article. Firebug, Domainr and Load Impact are my personal favorites. Thanks (:0)
( )Luis H. June 9th
Font Burner = Awesome!
( )Matt Ward June 9th
Great article. Really like the icon finder. Thanks!
( )grazz June 9th
That’s a great list. Icon Finder is great!
( )Stevie Benge June 9th
HTML Entity Character Lookup site is going to make my life a bit easier!
( )Miguel Hernandez June 9th
Good article, Victor. I hadn´t heard of a couple of those so thank you for sharing.
Additionally, it´s nice to see more young Latinos working in Tech. I´m in LA also & attend a ton of conferences, code camps and the like. There´s just not a lot of brown faces in the crowds. Lastly, I´m VERY inspired by the sheer number of young folks interested in technology these days. When I got into this field back in 1991, it was all dominated by older, uptight men. But now, with so many bright young minds, lots of great ideas are revealing themselves.
Long story short: props to you & all the other young designers/developers.
( )Phil June 9th
This is great man!!
couple of those went straight in by bookmarks, html entity finder is excellent thanks.
( )Brian B June 9th
Great list. I prefer using YSlow in firebug instead of pingdom (http://developer.yahoo.com/yslow/)
( )Restoration Media June 9th
Great stuff… I have never heard of Test Everything, and I will definitely use that with our company website.
( )Léo Renaud-Allaire June 9th
Actually smushit.com no longer works and the service is now included in Firebug, under the YSlow tab.
p.s. Really useful tool!
( )Mike June 9th
Not usually a fan of these lists but this is a great compilation for sure! Thanks SM!
( )Behrang June 9th
thank you man…really handy…
( )sven June 9th
i was using the FF extension a while ago but can’t remember how it’s called.
( )you could place an image as background turn its opacity down and use it for template design.
anyone.
Jonny June 9th
pixel perfect
( )David Powell June 9th
i would probably use fireshot add-on in place of browsershots but good list! thanks
( )Moksha June 9th
really really cool links i can say how many things i have learn from this site or how many good links i found here.
( )Michael June 9th
Echoes to all the props above. Many I’ve used, Many I’ve heard of, but several are new to me, and now bookmarked.
Thanks!
( )Cyrus Kafai Wu June 9th
Awesome tips!
( )Paresh June 9th
Great work thanks
( )Chris June 9th
Amazing article, didnt know a lot of those
( )Laneth June 9th
Thank you so much for this list – as I’m just starting, this will be amazingly helpful! My bookmarks folder is gonna overflow soon!
( )w1sh June 9th
One of the few lists of it’s kind that was actually helpful. Thanks a lot for the great resources!
More from this author please!
( )effectus June 9th
truly awesome!
( )Austin June 9th
Great article and great timing. Coming from the developer world and trying to teach myself design, this site has helped tremendously.
( )arnold 'C June 9th
I like the fontburner
( )Jarryd June 9th
Wow some of these are fantastic that I had never heard of, yet most of them I already use
. Cheers!
( )Jess @ Creativity Abounds June 9th
Interesting list!
( )Some of them extremely helpful, others useful, others just plain interesting!
Keep it coming
Carl - Web Courses Bangkok June 9th
Wow fantastic! The Icon finder, colour love and test everything a new ones to me and very useful!
Thanks again,
C
( )James Selvakumar June 9th
One of the best article ever written about web development tools.
( )Great. Really awesome.
Keep up the good work and thanks for sharing your knowledge with us.
Brett June 9th
Great resources!
Thanks,
( )B
William June 9th
Great articles! Thanks!
( )arun June 9th
Great List…. Thanks a lot
( )Julius June 9th
This is very useful. I’ll recommend this to my boss. Thanks a lot! Your The Man!
( )Adeline June 9th
Definitely bookmarked!
( )wmwm June 9th
awesomeee.
my web design is by trial and error..
i really in need for all this sites.
thank Yu!
( )Marc June 9th
SmushIt doesnt seem to be working at all. As well as its other page.
( )http://developer.yahoo.com/yslow/smushit/
Cesar Noel June 9th
Bookmarked and Tweeted. This latest list of tools are very handy although some of it I am currently using but some of them are new. Thanks for this post
( )SnowInChina June 9th
didnt we have a similar list somewhore on tuts+ recently ?
not too sure about it, but nonetheless great compilation
some of them i didnt knew and they will come in handy
thanks
( )YourName June 9th
I missed one of the best.
https://addons.mozilla.org/de/firefox/addon/249
( )bruno June 10th
Amazing list.
( )I didnt know many of them. Now i have added almost all of them to my bookmarks;)
emson June 10th
Really useful list of tools thanks.
I recently did a blog article on command-line scripts for web developers, which might be of interest:
http://blog.emson.co.uk/2009/06/18-useful-bash-scripts-for-web-developers/
Thanks again,
Ben…
( )Joel June 10th
Nice list of tools, many of which I haven’t heard of and many that I’ll check out.
The Web developer toolbar I use almost every day
( )Wil June 10th
Many thanks, not sure how I’ve bypassed some of these!
( )DataMouse June 10th
Awesome selection!
( )Does anyone know if there’s a version of Web Developer that works with IE6/7?
That would be really handy!
Mathis June 10th
Only for IE6 und IE7
( )http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
DataMouse June 10th
Fantastic! My life is now complete!
Maisara-WD June 10th
Thanks alotttttttt
It’s too an\mazing and all tools are useful
thanxxxxxxxxx
( )João Pedro Pereira June 10th
AWESOME LIST.
There’re lot’s of Tool Lists for Web Designers and for Web Developers but this one is one of the best list’s I have seen ! Congratulations Victor
( )Martin Leblanc June 10th
Nice list
( )Davide June 10th
Useful list…THANKS!
( )Romi June 10th
thanks for sharing
( )Martyn Web June 10th
If you know how to use it properly – firebug is most defiantly the best tool of the lot but I can’t get by without colour lovers and the 960 grid system as they are both just as good.
( )awake June 10th
IMO… Blueprint CSS Framework is way better than 960gs.
I’m beginning to think people go with 960gs strictly for religious reasons.
( )DemoGeek June 10th
I tend to agree but disagree. I’ve been using Blueprint for a while now and most often I run into limitations one way or the other. Haven’t tried 960 yet but given the 12 and 16 columns option I’m hoping that it might provide some more flexibility.
Also, NEVER set custom padding to the grid elements on Blueprint. Live would be more miserable if you do, at least for me.
( )insic June 10th
nice list, I only know 5 in the list. i gotta them all. DIGG IT!
( )arnold June 10th
I digg it…
( )Vernon June 10th
Great list, thanks for sharing! A lot I knew of already, but HTML Entity Character Lookup is a GRRRRRRREAT find and was definitely worth the read!
( )DemoGeek June 10th
PixelPerfect would also nicely go along with these awesome tools. If you are a perfectionist then it would be a tool that can really help you nail down those couple of pixels costing your evening timeout.
( )Chris June 10th
Perfect list! Thanks a lot!
( )l4u June 10th
Great list.
( )Diego SA June 10th
Jesus! What a list! Bravo!
( )Some of them definitely will be very useful for me.
Perfect! Thanks!
Dario Gutierrez June 10th
Definitely some of one these programs I will use. Thanks.
( )jem June 10th
As much as I’ve been impressed with browsers like Chrome and the new Safari, I can’t bring myself to switch from FireFox simply because of FireBug. The developer tools in the other browsers just aren’t as convenient or powerful.
I’ve permanently committed the EM formula to heart now too, and I’ve been using em values exclusively for text-related styles for some time. If you’re still hard-coding pixel values I suggest getting out of that habit!
( )Bruno June 10th
Amazing list!!!!!
( )Thanks you so much
JeankGeek June 10th
Good one! Really Liked!!
( )harshal hirve June 10th
this is the best thing i have seen
( )IhateDesign June 10th
Great! specially the Pingdom tool, awesome!
( )Anand June 10th
Awesome tutorial
( )Good Collection of Tools.
Gary Smith June 10th
Kickarse! This page is being seriously bookmarked.
( )paul June 10th
Nice post man
( )Biz June 10th
I owe you many many beers. Thank you. Whatthefont is exactly what I was looking for.
( )Celso Bessa June 10th
I would put Google Page Speed in this list too: http://code.google.com/speed/page-speed/
( )Nicoas June 10th
Fontburner uses sIFR, surely its better to learn sIFR. Otherwise great selection of tools!
( )M. Powell June 10th
Ive seen many “resources” lists but this one has been EXTREMELY valuable. Thanks!
( )Rob June 10th
Man, thanks so much! These entries, and this website period have helped me progress my skill set tremendously. I am looking at getting back into web development, but my skills are sooooo rusty.
I’m talking, the last time I developed a serious web page, was about 10 years ago. Man, what a shock! Web Development has really came a LONG way. soooo streamlined now. im stoked.
( )Blue Buffalo June 10th
This list is awesome – I already had some of these bookmarked already, but the others in the list are great tools!
( )Alexandru Pitea June 11th
The best collection of web tools i’ve seen so far!
( )Thanks very much!
Ben Kuker June 11th
I can’t begin to describe how much I like Firebug and all of it’s plugins. I use it and the Web Developer Toolbar constantly. I tried Load Impact out, but it really didn’t tell me anything useful. Thanks for pointing it out, though.
( )ferarias June 11th
Brilliant! Just added as a dropdown to my firefox toolbar
( )Ilse June 11th
Great great list! Def gonna use some of them!
( )liko June 11th
great work, have cited your article for further study..
( )thx!
David June 11th
Tio esto es de puta madre.
( )Chao
SanyC. June 11th
Great summary! I can also recommend iMacros for regression testing and AlertFox for free website monitoring.Both use the free iMacros Firefox addon.
( )stone June 11th
i like all, tks very much for you“aha
( )ambadas June 12th
Simply Great!!!
( )L. June 12th
thanks so much. great list!
( )James June 12th
I’d like to add the extremely useful Cascade Calculator favelet – useful if you size anything in ems, and much better than the basic em calculator listed above:
http://pixy.cz/blog/favelets
- Just hover over the element and it tells you the browser-calculated css – useful for spotting those little problems where for example the browser is trying to render a font or a margin at 12.3333px and getting the rounding wrong. Also very revealing when you see your em-based line-heights leaking all over the place and causing problems.
( )sergi June 12th
como dijo david: de puta madre, conyo.
( )Cara Mia June 12th
Great post! Actually a lot of useful tools that I had never heard of, most exciting to me being ‘what the font’! Thank you!
Cara
( )Cody June 12th
Awesome List……Thank You!!
( )Curtis June 13th
Excellent post. I LOVE domai.nr
( )blendaz June 15th
Awesome post!
( )Thanks. Those things will come in handy for me
Gabriel June 15th
Very nice, thanks!!
( )Matthew Johnson June 15th
Wow, Firebug has to be one of the coolest things in the world, next to the Dinobots. Thanks for the list!
( )Jaeger June 16th
ducaralho essas ferramenta mano, pode cre.
( )Alex Reis June 16th
Damn good list you got here man. Twitted
( )Mujtaba June 16th
saved the page 4 future reference..,
( )in my one of my recent projects involving php … This tool came really handy coz i needed to base64 encode & decode data frequently :
http://www.dynamicguru.com/files/encode-decode.php
dev.my June 17th
I only use and love ColourLovers, Firebug, 960 Grid System, Icon Finder, Web Developer Toolbar.
( )Jason Barone June 17th
Firebug is by far the most useful thing I’ve ever came across in regards to web development. I recently installed Colorzill and MeasureIt and they have both proven to be very useful as well.
960 GS is awesome, although I need to try out Blueprint soon.
Thanks for the article!
( )Charlie June 17th
Thanks mate, killer list.
( )ahmed June 18th
thanks so much. great list!
( )webdevvote.com June 18th
You are voted!
( )Track back from WebDevVote.com
SohoInteractive June 18th
awesome awesome list. I can’t thank enough.
( )Suvin ks June 18th
Excellent resources. Thanks a ton
( )David Bernad June 19th
Very useful!
( )Thanks a lot
Shane June 19th
I’m definitely going to try and get into the habit of using these – many are new to me.
Thanks for the information!
( )Keith June 20th
Wow Font Burner!!
( )How cool is this, shame there are only three options for styling the font colour (black, Grey and White).
Gabriel June 21st
I just noticed something about IconFider – from their website:
“Often it says “only for personal use” – then the icon can only be used for your desktop.
Most icons are protected by licences where you, by giving a link to the designer’s website and tell which license they are protected by, can use them in templates.”
Bummer!!!!
( )Martin Leblanc June 27th
Most icons in can be used in designs by giving a link to the designer’s site. The reason why the designers put them out for free is to get new clients who buys the whole icon set or some other design service. I think it a low price for professionally looking icons!
The icons which are for personal use is intended for styling your desktop. I’m currently working on a filter which can quickly seperate the two “types” of licences.
( )Chad Warren June 26th
Thanks for the list! I am sure many of these tools will prove useful. I especially like the HTML Entity lookup….what a timesaver!
( )2sd June 28th
Nice list, some of the tools listed I’m already using. Domainr is quite good tool to check domain availability and for domain hinting, but there is a better one: http://domaintyper.com/
( )Chris Brown July 5th
I would also suggest Less CSS. This tool is dramatically improving workflow on multiple projects and allowing more expedient responses to client requests and feedback.
http://lesscss.org/
( )gmpoint July 11th
this is the most powerful collection i’ve ever seen
( )Dildo July 14th
very good list thanks for!
( )calgary graphic design July 14th
I can’t live without Firebug and Colour Lovers.
( )The only thing you missed was a VA to answer the phone.. I hate being interrupted when I’m coding!
Bhargava Padarthy July 15th
good list
check out this too http://www.mattharward.com/
( )Pom Design July 18th
Really useful tools, especially number 5.
Thanks for sharing.
( )Erica July 27th
Awesome collection. Found a few new ones too!
( )deebong July 27th
wow.. very nice list. very useful & saves a lot of time. Thanx!
( )Jeff Piper August 6th
Simply amazing. I had no idea Domainr even existed until now. Thanks so much!
( )Jayden Lawson - Thermosis website design October 9th
Great article! Added a couple of FF addons and bookmarked a couple of sites. Very useful for web developers!
( )Versicherung October 17th
Thank u 4 this great Article
( )Slice2U October 22nd
Great Collection, thanks for sharing!
( )Nik October 30th
Great stuff!! I found some great stuff in there. I just stumbled across a tool that is very helpful. It checks your page for unused css rules so you can clean up your code. So simple yet so handy
http://www.sitepoint.com/dustmeselectors/
( )