Our web design and development process has evolved to include a very powerful suite of tools that let us build rich websites quickly and efficiently.  In this post, I share some insights into the tools and how we use them.  Hopefully, you’ll find some new software to explore; I look forward to hearing your thoughts.

Coding and standards

XHTML and CSS are the cornerstones of our web development, with PHP and MySQL for our server side scripting and database work.  Before a website goes live, we test it for standards compliance using the W3C validators.  We want our websites to work across different browsers with less problems, and standards compliance helps ensure that.  It also gives us some search engine optimisation and disability discrimination pointers.

Most of our websites have rich interfaces and effects built with Javascript (typically using the jQuery libraries).  The sites we are building for Concept Eye Clinic are great examples of  jQuery enhanced websites.

Our graphic designer, of course, uses the ubiquitous Photoshop to create our site layouts and design previews.  Something about the ‘developer aversion to Ps’ in me, sees Fireworks being snook out occasionally to tweak graphics.  I’m getting over it.

Content management

Almost all our sites are built using the WordPress platform for content management.  We  worked with Expression Engine for one project, when we needed friendlier image handling for the client, but have returned to WordPress since.  We know the platform well, and are comfortable extending it to meet most website needs.  We’ve used WordPress to build everything from simple  brochure sites to full blown online magazines.  I’m also keeping an eye on RadiantCMS for a future development.

We undertook a couple of ecommerce projects a while back, and have had a surge of them arrive recently.  For all three of the new projects we are using Magento.  Magento is more than a little intimidating out of the box, with a powerful but complex set of XML and PHP files for layout and templating.  The documentation, including text books, is often poorly written, but a very active Open Source developer community means ‘how to’ solutions for just about any problem are only a Google away.

Last but not least, we’ve used BuddyPress for social network developments, including the acclaimed Hello Eco Living website.  We considered Elgg as a social network development platform, but opted for BuddyPress because of our familiarity with the underlying WordPress system.  BuddyPress has been an adventure.  It’s feature rich, but definitely went through teething problems during its first year.  Serious development requires far more knowledge of filters and event handlers than you’d expect to encounter developing standard WordPress themes.  That, coupled with a much smaller market, means the number of skilled developers and shared knowledge is limited.

Development tools and environment

We develop on Mac, using the Coda web development environment to hand code our websites.

MAMP Pro gives us a full featured Apache / MySQL / PHP local test environment, and we use Versions in conjunction with Beanstalk to manage our code.  Beanstalk is a hosted source code control system (subversion SVN), that lets us track revisions to our websites, build and test new features independently, and integrate back into the main site.  Coda can function directly as an SVN client, but we prefer to use it in combination with Versions.  We use Versions to create test branches, create working copies of a website, and set up our local file structure.

Finally, we use Safari with its developer tools enabled as our main development browser.  The developer tools offer a similar set of functionality to Firebug on Firefox, allowing us to examine our HTML / CSS / Javascripts and resource usage in the browser.

This post has given a quick overview of the tools we use in our web design and development process.  I’ll delve into more depth on some of them in future posts.