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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Victor Escobedo
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Electerious - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
thanks so much. great list!
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.
como dijo david: de puta madre, conyo.
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
Awesome List……Thank You!!
Excellent post. I LOVE domai.nr
Awesome post!
Thanks. Those things will come in handy for me
Very nice, thanks!!
Wow, Firebug has to be one of the coolest things in the world, next to the Dinobots. Thanks for the list!
ducaralho essas ferramenta mano, pode cre.
Damn good list you got here man. Twitted
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
I only use and love ColourLovers, Firebug, 960 Grid System, Icon Finder, Web Developer Toolbar.
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!
Thanks mate, killer list.
thanks so much. great list!
You are voted!
Track back from WebDevVote.com
awesome awesome list. I can’t thank enough.
Excellent resources. Thanks a ton
Very useful!
Thanks a lot
I’m definitely going to try and get into the habit of using these – many are new to me.
Thanks for the information!
Wow Font Burner!!
How cool is this, shame there are only three options for styling the font colour (black, Grey and White).
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!!!!
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.
Thanks for the list! I am sure many of these tools will prove useful. I especially like the HTML Entity lookup….what a timesaver!
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/
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/
this is the most powerful collection i’ve ever seen
very good list thanks for!
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!
good list
check out this too http://www.mattharward.com/
Really useful tools, especially number 5.
Thanks for sharing.
Awesome collection. Found a few new ones too!
wow.. very nice list. very useful & saves a lot of time. Thanx!
Simply amazing. I had no idea Domainr even existed until now. Thanks so much!
Great article! Added a couple of FF addons and bookmarked a couple of sites. Very useful for web developers!
Thank u 4 this great Article
Great Collection, thanks for sharing!
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/
Great Sets of tools. Can’t thank you enough!!!
Is there anything like Firebug for IE or Chrome?
good theme i want information get a higher rank in google
tell me about ……………