Technology changes all the time and some of it is great, some is fleeting and some is utterly worthless. Here are a few of the things we use at LimeRed to get our work done.

Project Management

Redbooth

We used to use Basecamp, but we switched to Redbooth because time tracking is part of the system and Basecamp got rid of it in the last huge update from Basecamp Classic. Redbooth is a little buggy, but they are making almost constant updates and we love having everything in one place. Everything we do needs to be tracked with a task, so we have to stay really organized and detailed about everything. Its great and cheaper than Basecamp, too.

Pivotal Tracker

Pivotal Tracker is a project management software for Agile Method developers. It breaks build tasks down into stories and then those can be organized into epics. It helps to keep development contextual within the whole site concept. Also, Pivotal Tracker hooks into Redbooth so were not switching between two systems. Yay.

Wireframing / Outlining

Balsamiq Mockups

Balsamiq Mockups is perfect for wireframing. It has menus with all of the bits you need when architecting a site: forms, buttons, text, image placeholders – everything. It has containers for phones, devices and browser windows.

Weve also used OmniGraffle and a set of wireframing images built for Keynote.

Of course, before we move to software wireframing starts with a pencil and some paper.

Tree

Tree helps us create detailed, horizontally expanding outlines. Its great for site maps when you have to add descriptions of how things will function and connect. Bad thing is, if you have a huge site map the PDF you export will be small and hard to read. In those cases, we do several outlines, usually one top-level one and one for each section.

Weve also used MindNode, which is also great.

Prototyping

Foundation 5

We dont always use Foundation to prototype, but we sure love it. A prototype is a flat version of a website, which means its not connected to the Content Management System (CMS) yet. Its a lot faster to make changes here than in Drupal, so we always build the prototype after were set with the wireframes.

Its super easy to create responsive, designed prototypes with Foundation. The trick is to keep everything from looking the same. Also, you can get far ahead of responsive testing if you start early.

File Storage

Dropbox

For better or worse, we use Dropbox. Id love to hear from you guys if you use anything else like this and love it. Its pretty good, though weve had to completely reorganize all of our files to change some basic access privileges. Now with Condoleeza Rice on the board, Im a little (lot) bit skeptical of Dropbox.

Im considering moving to Sync. Theyre all about privacy and its way cheaper.

Development

Beanstalk

Beanstalk is a private code hosting platform. Basically, this means you can save your code to beanstalk and it has a number of features that make working with a project more efficient. First, the fact that it uses version control for moving code to and from beanstalk. We use Git here as a version control system, its decentralized and fairly simple to set up and start working with. Briefly, Git saves snapshots or commits of your project that you can move to and from Beanstalk. One of the advantages is collaboration on projects is much easier, each person has their own copy of the project and can change and edit it without worrying about editing a file someone else is currently editing. This also applies to adding additional people to a project, they are able to clone a version of the project and can start working immediately. Beanstalk also takes care of deployment to staging and/or production servers. We rarely edit files directly on the server, but instead use Beanstalk to deploy the snapshots to the staging server. This means all changes are tracked through Beanstalk, and if something happens in one of the snapshots” that isnt right, its easy to deploy an earlier commit that is known to work. Some work may disappear, but prevents starting from scratch.

Brackets

Brackets is an open source code editor for web designers and front-end developers. Weve started to use Brackets primarily for doing front-end development. One of the biggest advantages is its extensibility. Two of my favorite plugins for it are Emmets??and Theseus. Emmets is available for quite a few editors, but my first experience with it is in Brackets. Once youre used to the syntax, it allows you to write markup and CSS much more efficiently. Emmets itself is also easily extensible, and you can create your own snippets and abbreviations for your own use. Theseus is a live javascript debugger, but basically is a live site debugger as well. It allows you to load any flat site project youre currently working on into a browser, and will auto reload the page as you make changes. Excellent for creating site prototypes.

Content

GatherContent

This does just what you think it does: Its an online platform to gather content. We use out outline, chop up page content into fields in GC and send it to clients or our writer to add in content. You can also add images, which is great if a set or a particular image needs to go on a certain page.

There are repeatable page templates and theres a post for SEO meta for each page. One thing I really like is that we or our clients can change individual page statuses from Draft to Approved and we can create our own statuses so we know whats ready to move to the site.

Debugging

Bugherd

When we’re ready to QA and debug, we use Bugherd. Our team and clients have access to this tool just before a site goes live to note any bugs or tiny changes in the site. It turns all of the bugs into tasks, which are assigned to people and given a level of urgency. You can log in and see what’s been done, who is doing what and what’s left to do. It also integrates with Pivotal tracker, so again we’re not checking a million different accounts to get stuff done.