How to Prepare Your Development Environment to Boost Your Productivity

by Matt Montaruli on February 9, 2012

The designs are complete for your latest-and-greatest project. It’s now time to start coding.

You want to be sure you are organized so you are as productive and efficient as possible. Below is a checklist for all of the preparatory work you should perform before rolling up your sleeves and starting to code.

1. Agree on Content

Confirm with your client what content and functionality they want on their site. Having an understanding of this will help identify what technology you’ll use and how you will organize your files.

2. Who Delivers Content?

Determine who will be providing the content. Content helps to shape the theme, message, design and code structure of the site. So having as much as possible written beforehand will speed along the design and development process. Worse case, you could just use filler text from Fillerati in the meantime.

3. Design File Format

If the person designing is not coding the site, it is recommended to organize design files in a format that your developers can easily access to help speed things along.

Our design team uses Illustrator which makes it simple for our development team to be able to extract the necessary elements from AI files without much trouble.

The software you use is your choice as long as you and your team can find it easy to work with.

4. Can Developers Extract Images From the Comps?

Make sure your development team finds it is easy to extract the necessary elements from design files. You’ll want to minimize the back and forth with the design team in getting different images sliced from the comps.

5. What Technology Will You Use?

Now you should make the final decision on what technology you’ll use for this project. Will you be using static HTML files? Any JavaScript? Or will you be using a CMS, Ruby on Rails or some other server side scripting language?

You may have already made this decision earlier when quoting the customer, however this would be a good time to finalize this decision and iron out the details.

6. Organize Files

Frameworks such as WordPress usually create a file structure for you. This file structure will only contain your development files. But, you also need a place to store all of your design files. I generally do the following:

  • Create a project directory to hold everything, titled the client or project name
  • Create a “Design Files” sub-directory, to store AIs, PSDs or any other images that are not directly linked in the actual development files
  • Create an “Archived Files” sub-directory for older files I’m not quite ready to get rid of
  • Create “Production” and “Development” sub-directories for the code files for production and development versions of the site. Alternatively, you could consider creating one directory called “site files” and keep a Git “production” and “development” branch.

7. Prepare Your Development Environment

If you use TextMate, you’ll need to create a new project file and drag and drop the development folder into the project drawer. Many IDEs may work in a similar way, while other text editors (ie: Sublime Text) just require you to “open” the folder.

Are there any steps or pre-development tips you’d suggest that are essential to your preparatory workflow? Please let us know in the comments below.