10 Big Time-Saving Tools for Web Designers

Humans just aren’t as good at performing repetitive tasks as computers are. Moreover, I really hate doing the same thing more than once. I think anyone who uses computers in a professional capacity (and who doesn’t, these days?) would be remiss not to ask themselves how they can become more productive by letting their computers do the boring bits.

Whenever I notice that I’ve just done the same thing more than once in a row, I know there’s an opportunity for improvement. That’s why I’m always on the lookout for awesome tools to help save me time. Using these tools not only reduces the likelihood of my making mistakes, they also help me have more fun when I’m working because I get to skip over the boring stuff and jump right into the interesting stuff—the stuff a computer can’t do for me.

There are a lot of tools out there designed to do just that for front-end developers and web designers. Here are some of the biggest time-saving tools that I’ve come across, and that I use relatively frequently. Hopefully they’ll save you some time, too.

SpriteMe: CSS sprites made way, way too easy

Making CSS sprites is a technique that boosts a web site’s performance by combining many distinct images into one file. While their usefulness is unquestioned, they can be a bit of pain to create—and update—manually. There are a lot of CSS sprite-making tools, like the popular CSS Sprite Generator. My favorite, however, is SpriteMe.

SpriteMe is a simple, free JavaScript bookmarklet service that analyzes all the background images on any page you run it at and helps you turn them into one or more sprite images. With a single click of the “Make Sprite” button, SpriteMe copies the images you have and combines them into a new sprite image for you. Moreover, it will even show you exactly what CSS code you need to edit in order to implement the sprite!

With SpriteMe, you no longer have any excuse not to use CSS sprites. But that’s okay because, since SpriteMe does almost all of the work, you don’t need an excuse anymore. Go enjoy a longer lunch break instead.

YUI Grid Builder: instant CSS-based custom layouts

If you already use any part of Yahoo!’s User Interface libraries, you should really know about the YUI Grid Builder. If you don’t use a CSS framework yet, this tool offers a compelling reason for you to start.

The YUI Grid Builder is an elegant, visual way to create robust CSS-based layouts from scratch. All you need to do is punch in your desired layout, specifying the page’s width (fixed or fluid), the number of columns you want, and how wide each of them should be. You can even split a section into two or more subsections, creating nested column layouts with ease.

When you’re done, just press the “Show Code” button, and the YUI Grid Builder will give you all the boilerplate HTML you need, already linked to the YUI Grids CSS file. I use this tool for creating an HTML prototype layout in minutes, and I’ve pointed several back-end developer colleagues at it when they ask me for layout help. It works like a charm!

Accessify HTML Form and Table Builders

Forms and tables are some of the most complex beasts in HTML. Not only are they among the most delicate elements when it comes to accessibility, forms are also the most important integration point between the front- and back-end spheres of a web site. It’s therefore very important to get form and table code right.

That’s exactly what these two code generators from Accessify.com do. The Quick Form Builder asks you about the data you want to collect and gives you all the HTML code you need to copy to make the form work smoothly. It properly includes <fieldset>s, <label>s, and more. Impressively, it even gives you an option of XHTML or HTML style syntax.

Similarly, the Accessify Table Builder gives you a point-and-click interface for making accessible tables. It prompts you for the oft-forgotten summary attribute and ensures your markup has proper headers or scope attributes, helping you create beautiful markup. Especially if you’re not already using these features of HTML tables, give the Accessify Table Builder a try the next time you’ve got some tabular data to mark up.

Gradient Image Makers

Even basic gradients are some of the trickier images to create, especially for people without much artistic talent (like yours truly). Although industry-standard graphics tools like PhotoShop can certainly do the job, sometimes all you need is a super-simple gradient that transforms from one color to another. Why call in the heavy artillery for such a straight-forward task?

SecretGeek’s Gradient Maker is one of two gradient-image-making tools I really like. The other is over at Gradient-Maker.com. Both provide a super-simple, point-and-click interface for setting colors, image dimensions, and in the case of SecretGeek’s tool, an image format.

Typography Preview and Testing Tools

While subtle, one of the most striking differences between a good web site and a great web site is professional typography. Choosing the right fonts, text sizing, and text positioning is some of the most detail-oriented work a web designer has to do, and that means it’s time consuming. Thankfully, there are some great tools to make tasks like comparing fonts, which can seem overwhelming, pretty painless.

The Typetester is a web site designed exclusively for comparing fonts for on-screen uses. It lets you enter some sample text and then compare up to three different fonts along with an individual font’s properties, such as leading, tracking (letter-spacing), and colors. It even groups available fonts into separate categories for you that shows you which fonts are available on what platforms.

Another great typography tool is the Typographic Grid, which overlays vertical or horizontal grid lines at a particular interval. This is useful because it allows you to instantly see if the spacing of various text elements on your page all adds up according to the underlying mathematics of the fonts you’ve chosen to use. If your text is a bit off, that’s a pretty good indication that you need to adjust some CSS text properties like line-height in order to have the most clearly readable page.

WestCiv’s XRAY: Quickly Inspect an Element’s CSS Box

As web designers, we’re constantly examining web pages and looking at element properties. Many of us use Firebug for that and, while that’s still an unbeatable choice for serious development, sometimes it’s just more than we need. Enter XRAY, a cross-browser bookmarklet that lets you quickly inspect an element’s CSS box and all its associated properties.

Just as the keyboard shortcuts for copy and paste no doubt save you time when you’re typing, XRAY is a point-and-click shortcut that can save you time when you’re skimming over a web design. Invoke the bookmarklet and XRAY will pop open a HUD-like floating pane. Click anywhere on the page, and the element you clicked gets highlighted in the viewport, measured, and all of the essential layout properties are displayed in XRAY’s pane.

CleanCSS: Optimize and Format Your CSS

If you’ve ever had to take a close look through someone else’s code, you know how much more fun the experience is when that code is formatted clearly and cleanly. Sadly, that’s not always the case, and optimization tools like CSS minifiers sacrifice readability to reduce the size of a style sheet. Thankfully, code formatting tools like CleanCSS can give you the best of both worlds.

The CleanCSS formatter takes any arbitrary CSS as input and, according to your preferences, either compresses it or expands it. You can use this after you’ve finished writing your styles as part of a poor-man’s optimization pipeline, or you can use it to expand someone else’s minified code with the click of a button. You can even define your own custom formatting templates and use it to make sure that everyone on your team always commits CSS that meets your project’s coding conventions.

Got more?

All of these tools can save you time, but the biggest tip of all is to make the process of looking for improvements a part of your daily workflow. Doing that will help you find even more tools and save you even more time, all thanks to the magic of continuous improvement. And speaking of other tools, did I leave out your favorite one? Let me know what you use in the comments!