Set Up Your Desk to Maximize Productive Web Development

I get lots of questions about how both my desk and apps are set up and about how productivity can be improved. This is a very important topic for many reasons, yet it isn’t discussed very often on the web.

Properly setting up both your physical and virtual desks can make you more productive while also helping you avoid serious injury like frequent headaches and carpal tunnel syndrome.

While I’m no ergonomic expert, I’ve spent several days over the years tweaking my setup to be the quickest it can be. I’ll show you my own setup and give you some tips for your own.


My Physical Desk Setup

IMG_0464

  1. Ergonomic & comfy chair–Chairs are not cheap, but you’re going to be spending lots of time sitting in one, so make sure you get a proper computer chair that won’t hurt your butt after sitting in the same place for 6 hours straight.
  2. Dual monitors–An absolute must for a developer, I seriously don’t know how I coded without one. This is probably the biggest productivity increaser besides Spaces (discussed below). However, I wouldn’t recommend going any larger than dual 22″ because you run the risk of painful neck strain.
  3. Wireless Keyboard & Mouse–No clutter means you’re not wasting time going through junk, unplugging or tangling up cords, or even falling off mousepads.
  4. Laptop–Quick and easy to take to client meetings or for working out of the office to stay sane. Having its designated resting space means it’s also out of the way when I don’t need it. My laptop has the same exact setup as my desktop, so there’s no adjustment or mistakes when switching back and forth.
  5. Wireless router/backup/printing–All-in-one devices mean less clutter and wires. Try finding products that do more than one thing at a time to reduce the visual clutter you have to deal with. Also, automatic backups are every computer user’s best friend!

My Virtual Desk Setup

screenshot_03

Now that you’ve seen my physical desk, let’s look at my virtual one. The way your desktop is organized can greatly help or hinder your productivity and workflow.

Try to keep your desktop free of any apps. Keep your dock (in both Mac and PC) only filled with the apps you use daily, or at least more than once a week. This will help you find things quickly and easily.

The Layout of Apps

If you’re a Mac user, you probably already know what Spaces is. If you’re on a PC instead of Mac, Spaces won’t work for you. I haven’t tried it, but SourceForge offers a virtual desktop manager, VirtuaWin, that you might find helpful. (If you use VirtuaWin, or a similar PC app, let us know how you like it in the comments.)

Spaces is awesome for productivity because it gives you four virtual desktops that you can switch between with a set command (I use Apple + Arrow key for speed). If you’ve got a second monitor hooked up, that means you technically get eight desktops to work from!

While this may sound daunting and like overkill at first, it’s perfect for organizing your apps in designated areas by task. Here’s how my Spaces are organized:

Space 1 (top left)

screenshot_03

Space 1 is my development area. I leave Coda on the left monitor and FireFox on the right. This allows me to view the site I’m working on almost simultaneously. It also makes using Firebug easier because I can view what changes I made in the browser while typing them into Coda.

Space 2 (top right)

screenshot_03

Space 2 is my browsing and communications area. I keep my email app on the left monitor opened to about 3/4 of the monitor space. The rest of the left hand monitor is taken up by Adium and Skype. The right monitor is taken up by Chrome.

Space 3 (bottom left)

screenshot_03

Space 3 is entirely for Photoshop in both the left and right monitors. Normally, the menus are located on the right side and the design on the left.

Space 4 (bottom right)

screenshot_03

Space 4 is for client management. On the left monitor, Billings takes up the whole screen, and on the right is iCal, so I can view my schedule while writing out contracts and quotes.

More Tips

  • If you’re able to use Spaces, or its equivalent, set up your apps to automatically open in their proper space. This prevents cluttering up of one space and wasting time having to move the apps.
  • If you don’t have access to Spaces, keep all the apps closed that you aren’t using right at the moment to avoid window clutter.
  • Try finding all in one apps to reduce the clutter of apps you use. Some examples are:
    • All in one IDEs that have FTP built in
    • Multiple chat client apps
    • Project management that includes billing and time tracking
    • Browsers with web dev tools
  • Do what feels natural and if you keep clicking in the wrong area for something, that means it probably needs to be moved.
  • Give yourself a couple of days to get used to a new layout or piece of equipment before you think it doesn’t work for you.
  • The less clicks or app switches you need to make, the faster you’ll work.

Just like our code does, our setups also need to be tweaked and perfected over time to get it right. Do what feels comfortable for your workflow!

Your Turn

Do you have any productivity tips? What have you done that’s helped you work faster?