Five Time-Saving Tools for Web Designers (Or Anyone Who Uses a Computer)
by Joel Paris
If I’ve learned one thing in my years as a publisher here at Launch, it’s that efficiency and time management are critical to getting the job done well and on time. While I am no stranger to hard work, one piece of advice I received many years ago always repeats itself in the back of my head when I come to the end of another 12-hour workday: “don’t just work harder, work smarter.”
It is with that thought in mind that I always keep my eye out for handy shortcuts, utilities, extensions, and general nuggets of software gold that may help me shave time off of the routine tasks I find myself doing on a daily basis. Below are a few of the handiest ones I’ve come across.
When publishing web pages, the difference between a clean, professional page and an ugly mess of alignment problems can come down to a matter of a few pixels. If you find yourself repeatedly resizing images or guessing at video dimensions to properly fit a space, take a look at the Ruul extension. It lets you measure any part of your page using an on-screen ruler calibrated in pixels, so you can easily and quickly determine the size of any element you’re working with. There’s also a resizable rectangle tool you can drag across your screen to measure 2 dimensions at once. Less guesswork is a good thing.
Need to match your site’s color theme for a button design or font? There was a time when my less-efficient self would have downloaded an image (or screenshot), opened it in PhotoShop, and used the eyedropper tool to select the color. Then I was turned on to this extension, which does the exact same thing all within your Firefox or Chrome browser. Just click to activate the extension in your menu bar, then click the color you’re interested in. It immediately copies the the 6-digit hexcode for that color to your clipboard, which you can then paste into your HTML code. This is a 1-click, alternative to the cumbersome PhotoShop routine. It also has a slick CSS gradient generator tool included.
This simple extension for the Chrome browser does exactly what the name suggests: it counts words. And more usefully, it counts characters. Word Count is a great time-saver when you’re writing up meta titles or descriptions in a platform that doesn’t offer its own handy character counter—no guesswork necessary, and no need to copy text into a separate word processor to use a word-counting tool. Once installed, all you have to do is highlight the text you’re interested in, right click, and select word count, and it gives you a handy little pop-up with the relevant details. One click, 3 seconds and you’re moving on. Beautiful.
This is a utility I tracked down after a headache-inducing round of copying and pasting item after item from one window to the next to populate information into a large table. Very tedious. I thought, “wouldn’t it be nice to just copy everything in order and then paste them in order, one after the other?” After a quick Google search, I found out I wasn’t alone in this thought, and that’s just one of the things Ditto allows you to do. There are many clipboard managers like this available for download.
Now I can just copy 10 things in a row, then press ctrl+1, ctrl+2, ctrl+3, etc. to spit them back out, all in a row. You can also customize the hotkeys you want to use to paste your clippings. This is not only a huge time saver, it’s a huge headache preventer. It’s also a great tool when I make that dumb mistake of hitting ctrl+C again, instead of ctrl+V, wiping out my copied text—it’s not really gone, it’s just in a different memory position. I can just hit ctrl+2 instead of ctrl+1. Thanks, Ditto.
This handy gem was originally available as a Powertoy add-on for Windows XP, but luckily someone has been kind enough to clone the utility for Windows 7. Just right-click on any picture while browsing through your files, and you’ll find it hiding right there in your pop-up menu. It offers a few preset sizes, or you can customize the image to the exact size you need. It’s a huge time saver when making thumbnails, or even just when reducing huge image files into something more server-friendly. This turns image resizing into a 2-click process, whether you’re resizing one image or a batch of hundreds. The time savings here are significant—anything that keeps me out of Photoshop keeps my workday moving faster.
This has to be the ultimate shortcut utility. AutoHotKey allows you to write basic scripts (or complex, if you’d like) to automatically type out code snippets or other regularly used blocks of text with the simple press of a key or two. At least that’s how I regularly use it, and that’s just the tip of the iceberg as far as what it can do. You can also use it to launch software, manipulate windows, control your media player, perform complex macro operations—you name it, AutoHotKey can help. AHK provides a few example scripts to get you started, and they are simple to modify for your own purposes—you don’t need to have any programming skills to make this work.
I used to keep a hodgepodge of useful html codes saved in a text file that I could search through to copy and paste when needed. Now all I have to do is, for example, hit ctrl-shift-M and AHK types out the code I need for a div aligned to the right with a contact-us button, complete with rollover effects. Done in two seconds. I smirk a little every time I do it. And if you’re not a fan of trying to remember hotkey combinations, you can set a word like “divcode” to trigger the same event. Just type it out, and after you type the e, AHK deletes the word “divcode” and replaces it with your code snippet. The power of this tool really is limited only by your own imagination.
The above is just a sampling of some of the shortcut tools I like to use, and just a brief sampling of what they can do. Hopefully something here can help streamline your own daily routine as well!