10 Big Time-Saving Tools for Web Designers

Clip art of tools originally sourced from the Wikimedia Commons.

Clip art of tools originally sourced from the Wikimedia Commons.

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

WestCiv's XRAY inspection tool

WestCiv's XRAY inspection tool provides a handy shortcut to view the layout properties of any element.

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Mark

    Wow great resource list. Thank You.

  • http://www.mesmerlab.com/ MesmerLab

    There’s a huge emergence of WordPress sites across the internet. I recently came across a Photoshop plugin that should enable even more WP sites everywhere.
    http://www.divine-project.com/

    This will take your PSD, and with a little block designation via the plugin, export a fully functional WordPress theme. Magical.

  • Jez Caudle

    I use Picturesque on the Mac to resize, round the corners and add shadows to pictures. It can do a few other things as well. Much quicker than loading up Photoshop and a darn site easier as well.

    Jez Caudle.

  • http://www.sitepoint.com/articlelist/537/ Meitar

    Wow great resource list. Thank You

    Thanks, Mark. I’m glad you found this helpful. Spread the word, share this link, and help other devs like us have more fun at work! :D

    MesmerLab, Divine-Project sounds amazing. As someone who works with WordPress a lot, I’m going to have to take a look at that. Thanks for the heads up! Also, Jez, thanks for the mention of Picturesque. I never heard of it before but again, sounds neat.

  • http://www.magain.com/ Matthew Magain

    I’ll throw in a plug for SitePoint’s CodeBurner reference tool, but then I’m a bit biased, naturally :-)

  • Mike

    This was a wonderful list of resources for designers/developers. I’m always surprised when I find one of lists useful, and this one definitely was. I can’t wait to use some of them, thanks for sharing.

  • spheroid

    I use Online Color Schemer and Color Scheme Designer to quickly pick complimentary colors for things like tables and overall site design. There are two versions which both work well.

    http://colorschemedesigner.com/
    http://www.colorschemer.com/online.html

  • Balaswamy vaddeman

    these are very useful tools available for web development,
    might have mentioned which of them are free, so that anybody can make use of them.personally I liked the accessible table builder.we frequently create tables in day to day development activities,let me check if we can reduce any development time by using this?

  • http://www.laughingliondesign.net Jennifer Farley

    Great list Meitar, there were quite a few there that are completely new to me that look very helpful.

  • http://www.sitepoint.com/articlelist/537/ Meitar

    might have mentioned which of them are free, so that anybody can make use of them.

    All of the tools I highlighted in my article are free, Balaswamy vaddeman. ;)

  • nevins

    Hi Meitar,
    Fabulous Post,
    Nice Case study,very informative and resourceful.
    I really admire the information you offered here,its really helpful for my learning experience.
    good resource list.
    Thanks for sharing

  • RussellG

    These are some really great tools. I’ve bookmarked them all for future reference and I am sure they will be part of my toolkit.

  • rossnaumov

    Hi guys,

    Never used Sprites and want to give them a try. One big question though!… are they cross browser compatible?

  • http://www.sitepoint.com/articlelist/537/ Meitar

    Never used Sprites and want to give them a try. One big question though!… are they cross browser compatible?

    Yup, rossnaumov! “Spriting” is just a technique that uses regular images, so they work wherever normal images work. :)

  • Anonymous

    a good list of resources for designers!

  • kingkool68

    I created http://dummyimage.com for quickly spitting out placeholder images.

  • rossnaumov

    ok great! I just thought the process in which Sprites re-create your existing CSS might not be robust throughout every browser. Sorry if this sounds like a silly questions… just thinking out loud :)

  • Erik Stenman

    Hi!
    Thanks for mentioning my site: gradient-maker.com.
    If anyone have any improvement suggestions please tell me :)

  • Tim

    Firebug is better than Xray

  • http://www.ediy.co.nz Web Design

    Nice design