As a full time web designer, there are a lot of free online tools that I use regularly. I have decided to categorise some of these and link to the most useful tools that you can add to your arsenal. Hopefully these will allow you to save time and become more productive in your web design.
CSS
Procssor
I write CSS in a multi-line format, with lots of white space and comments. That is great for a human-readable environment. But on a production ready website it is unnecessary. A best practice is to pre-compress your CSS before using G-ZIP to compress it even further when delivering it to the end-user of your websites. Procssor allows you to compress your CSS with some configurable steps.
Remember to keep an uncompressed copy of your CSS file for your own future use!
Layer Styles
I feel this is one of the best tools on my list. This allows you to create CSS3 effects in real time with a Photoshop like GUI. It then provides you the final CSS code that you can copy/paste directly into your own CSS files. It is really fantastic, and great time saver. Adobe need to pay attention to Layer Styles. Photoshop desperately needs a tool like this built in.
Typography
Google Web Fonts
Web font technology has reached the point where control of typography has elevated to a level that is extremely accessible to everyone and print-like layouts are now within our grasp. Google provides a free web font repository that with a small amount of script, allows access to a massive library of typefaces.
Scale & Rhythm
I believe in readability. Websites on a very fundamental level are just text with images. So that text needs to as easily digestible as possible. This can be aided by setting up a vertical rhythm on your typography so that is flows beautifully and aids reading. The Scale & Rhythm tool helps you to visualise your CSS baseline in real time.
Imagery
Smush.it
I save my images for the web via Photoshop > Save for Web. While I carefully manipulate quality against file size, the Photoshop tool only does a mediocre job at compressing images. Yahoo! host the Smush.it tool that allows you via various means to compress your images even further with no real noticeable drop in image quality.
Dummy Image
Whilst building templates for websites, I often do not have the final imagery that goes along with text. To quickly add a placeholder image to a design, I like to use Dummy Image to generate images on the fly. Their API allows you to change image sizes, their colours and even the text that appears in the image.
Converticon
I often use PNG files as the favicon on the websites I build. The advantage of using a PNG is a slightly higher resolution and the use of transparency. But PNGs are not always supported, so it is good to have a fallback .ico file in reserve. The .ico filetype can be tricky to create without special plugins etc. I use the free Converticon tool to convert my PNG file to an .ico file in a quick and easy process.
Colour
Color Scheme Designer
I find colour schemes tough. So I need help. One tool I use is the Color Scheme Designer. You can use a base HEX colour value or select one via the palette. You are then given lots of options to generate a colour scheme from this colour based on concepts such as complimentary, triad and analogic. It also automatically provides tints of the colours it suggests so from one initial colour, you are provided a colour scheme of fifteen options.
Text Manipulation
Text to HTML
I will often be sent Word documents and PDF files containing text to use as content on web sites. Regularly this text will still keep its formatting when it is copied and pasted. To remove this the Text to HTML tool is very useful and can save time.
Entitifier
This tool can go hand in hand with the above tool. When adding text via HTML certain characters require a HTML entity or they will not be correctly displayed by the web browser. The clearest example of this are the less-than (<) and more-than (>) symbols. These characters are used to open and close HTML elements and if they are not correctly entitified then the browser may display a web page as ‘broken’ because it believes you were trying to write HTML. When in fact you were more likely writing some maths. To avoid this you can use the Entitifier tool and save time when copying and pasting large blocks of text.
Productivity
Instapaper
I started using this service before I got my iPhone to store articles online in a ‘Read it later’ list. This is a little like bookmarking, but only the main content is saved, so all you get is what you are interested in in the first place. This content is reformatted into an extremely readable style. You can then return and read it at your leisure. I use my iPhone nowadays, but it is available on other mobile devices too. Use the Instapaper bookmarklet for in-browser functionality.
Xmarks
I have too many bookmarks. That’s a fact. But I use multiple computers and various web browsers, so it is very important that I have access to this information wherever I am. Xmarks allows me to sync my bookmarks across computers and browsers. I never have to worry about missing something interesting online as I can always bookmark it at work, and return to it at home and vice versa.