You're just itching to catch up on Doctor Who, Kanasta is calling and the kids wanna go to Six Flags. But you just have. to. get. this. done! Want to reclaim your life? Here are 12 tips for speeding up your workflow so you can bill for fewer hours.
- Use a code editor with a built-in FTP client.
Paid apps Dreamweaver (Mac | Win) and BBEdit, or free apps NetBeans and TextWrangler all have built in FTP clients, some better than others, using the FTP features will save you oodles of time. - Install a local test server.
Building your sites and testing them on your own computer is so much quicker than having to upload every change you make during development. If all you're testing is HTML, CSS and JavaScript, you can do that straight from your browser. If you're using server-side code and databases like PHP and MySQL, you'll want to install a test server. I'd recommend MAMP for Macs, and WAMP for Windows machines. - Make good use of your mobile devices.
Keep your iPads, iPhones, iPods (or other mobile devices) closeby during development. Rather than interrupting your workflow and shuffling your windows to use the calculator, check your eMail or Tweet, use your mobile device instead. - Export straight from Illustrator. Skip Photoshop.
Illustrator lends itself better to web-esque graphics, so a lot of designers will do their mockups there first, then import into Photoshop to rasterize and export it. You can bypass Photoshop by using the Pixel-Preview and Save for Web and Devices commands straight out of Illustrator. - Remember, you have a Refresh button.
When testing locally (see #2) keep your editor and browser open side by side. Make a change, hit save and then just refresh the browser instead of re-opening the file. Further, most browsers have add-ons or extensions that you can set to refresh your browser automatically every few seconds. Try these for Firefox: Auto Reload or ReloadEvery, for Chrome: Auto Refresh Plus and designed by yours truly for Safari: Auto Refresh. - Use a good file structure and naming conventions.
Organization is key. Everybody has their favorite flavor, but just stay organized. Separate your production files from your publishing files and it's most common to also divide images and stylesheets from content files. Name your files so you know what they are at a glance. - Increase screen real estate.
Investing in more / larger computer screens is a time-tested productivity booster, especially for design professionals. You'll scroll less and shuffle less. Having your code and your browser visible simultaneously is enormously helpful. - Learn hotkeys and gestures.
Newbies drive me mad when they have to access the menus for every little command! At the very least learn Copy, Cut, Paste and Save. Those four alone will save loads of time. When you find yourself accessing the menus regularly for the same command, learn the hotkey. If there isn't one, you can often assign one. Gestures are the new hot thing with fancy multi-touch mice and trackpads. Learning what these can do will also improve your speed. - Use fast-switching features built into your OS.
I'll admit I'm not much of a Windows expert, and I know you guys have some similar features. In Mac OS X you've just got to get into Exposé, Fast App Switching, Spaces and the new Launch Pad and Mission Control. Most of these are controlled by hotkeys and gestures. Here's one to get you started: Command+Tab (Alt+Tab on a PC) will switch between open apps. Brilliant! - Master automation features in your software.
Many mundane tasks can be dished out to the processor, like resizing, renaming, rotating, exporting etc. Use the actions palette in Photoshop and Illustrator. Learn about styles in the Creative Suite and try out Automator in Mac OS X. Automation = time! - Build your own tools and widgets!
As a web developer, you've got the know-how to customize your own workflow tools. Make your portfolio self-updating so you can just drop the new image into a folder instead of hard-coding every update. Other custom tools I've made for myself: RSS generators, a Timestamp generator, Amazon affiliate link builder (I just type in the ASIN number, it does the rest) and as I mentioned in #5, a browser extension for Safari that refreshes automatically. - Use FireBug or Inspect Element browser features.
Safari and Chrome have a built in "Inspect Element" browser tool, and you can also download FireBug as an extension to most browsers. These tools allow you to view the code and make live changes — most useful for CSS. Once you've got things where you want them, just copy and paste the code back into the file (using the new hotkeys you learned!).