Tools for the Web Designer in You

Whether you’re a designer, developer, or programmer, chances are you’re going to have to deal with CSS at one point or another. A powerful tool which we’ve broken and abused to fit our purposes, CSS can tend to be temperamental at times. Thus I present to you the best tools for getting your CSS into tip-top shape.

10. CSS Redundancy Checker

The CSS Redundancy Checker takes your file URLs and returns whether all your style rules and selectors are actually used by your files. A good way to reduce the loading time on pages, removing unnecessary rules is highly simplified by this tool.

9. CSSEvolve

CSSEvolve is a web app which allows you to toy with the properties of a website, keeping those you like and changing those you don’t. It’s a much easier way of testing new features and designs without touching the original file. Additionally, when you’ve found one you like, the final product’s source can be viewed and copied.

8. Lorem2

Not exactly a CSS tool, Lorem2 is a site which provides better Greeking/dummy text for wireframe layouts, including short and long paragraphs and lists of both long and short items, as well as a version in Spanish.

7. JS Bin

JS Bin is a sandbox for testing CSS and JavaScript code before taking it live. With collaborative capabilities, group debugging has never been made easier.

6. CSS Tidy Online

An online version of CSS Tidy, this web app compresses and optimizes CSS code, available for four languages: English, German, Chinese, and French. It is important to not that this tool is not a validator. Your code should be well formed, or the tool may not function properly.

5. Pretty Printer

Useful for PHP, Java, C++, C, Perl, JavaScript, and CSS, Pretty Printer is a source code beautifier that provides a number of options on formatting, such as removing whitespace and adding new lines after brackets. It’s an excellent place to make shared code more legible and optimized.

4. CSS Analyser

Juicy Studio’s CSS Analyser is a service which combines the W3C’s validator with a checker for color contrast and units like pixels and ems within your source code. What comes out of it is a very in-depth critique of your code with any errors and warnings that should be fixed.

3. YSlow for FireBug

Yahoo’s development tool YSlow for FireBug analyzes your website’s code and explains what issues are causing slow load times. A good way to time your PHP scripts’ time and to monitor what’s happening when your page loads, YSlow is an excellent tool for improving your website’s performance times.

2. Replace CSS Colors

Web tool Replace CSS Colors lets you change the entire color scheme of your website without having to change the CSS by hand. You simply upload your CSS file, change the colors to what you want, and download the new file.

1. This collection of tools

This collection of tools is a list of the best tools and plug-ins by browser for web developers. Making the list for Firefox is the web developer toolbar and FireBug, two of my favorite tools for helping along my web design practices. Additional tools are available from the list.

That sums up the list of the best productivity aids for web developers everywhere. From CSS to JavaScript, these tools are sure to help you in your every endeavor.

Related posts:

1. 5 Books that Addicted Me to Web Development