We have outgrown our website. This is the realization many of our clients reach; a stage on the journey that can be frightening even if it is a sign of good things. Normally we guide, support, and stand by our clients during this change. Now we are at the same stage in our own journey. Because we believe that shared experiences are critical to growth, we are sharing how we go through the re-design process and invite you to accompany us on our journey.

Why we need the refresh

The site no longer represents our needs. We need a new look. Not just that, we need a new structure for our content because it has changed so much from when I first built the site. With all the advances in mobile design we also needed to improve the mobile experience. Together, these add up to more than just tweaking the existing website.

Considerations:

• Site is already on WordPress with a Linux, Apache, MySQL, and PHP stack
• The design should be mobile first
• Prefer to work with modern web development tools like: SASS, CoffeeScript, Templating
• Need a full featured admin section for content creators
• Multiple content types like: Clients, Projects, Team Members, Services, etc that are easy to update
• Good deployment system that includes a staging site, backups, and version control
• Use proper schema as mentioned in this post and this one

So what did we do?

We decided to keep the site on WordPress and use WordLess, a plugin that uses SASS, CoffeeScript, and PHAMLP. It also has a logical separation of views code, functional code, and assets. This improves maintainability and the development process.

Our multiple content types are created through WordLess helper methods and a nifty plugin called Advanced Custom Fields. Our team member content type can have a website url field without writing lots of code.

Zurb’s Foundation framework gives us the mobile first design elements that we needed. It also uses flat design elements which further simplifies the layout making the focus of the new site on the content.

Finally, by using Capistrano we were able to create a modern deployment system that creates backups, uses version control, and deploys to a staging site before going into production.

Stay tuned. In future posts, I am going to go into detail about WordLess, Zurb Foundation, and Capistrano while working on this redesign.