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.

We spent summer 2009 developing one of our most exciting web projects to date. A full blown online magazine, social network and blogging platform for Hello Eco Living.

Challenge presented

We’d discussed a number of eco-related projects with Laura and Chris, and were absolutely delighted when they asked us to develop their Hello Eco Living brand and website. They wanted a site that delivered an online magazine full of practical tips, and a related online community that pooled expertise, discussed and shared ideas on how to adopt a more eco-conscious lifestyle.

Our solution

Our graphic and branding ideas went through several iterations, ‘high tech’ revolutionary initial concepts giving way to wonderfully welcoming ‘eco-lutionary’ logo and design. The web design is our most ambitious project to date. An outwardly simple set of pages, subtly enhanced with beautiful typography, is underpinned by an extremely powerful social networking engine. Javascript is used to enhance the XHTML, CSS front end, and a content management system allows Hello Eco Living to easily add and edit their magazine stories. The final touch is the integration of a blogging platform that allows site members to create and author their own eco blogs.

End results

Hello Eco Living have an engaging and pervasive brand that unites a whole suite of online features, and even out onto their Faceboook and Twitter pages. Their website is ambitious and immensely powerful. The Beta version launched in September, two editions of the magazine have gone out, and membership of the social network is starting to grow.

In January, 2010, WPMU.org listed Hello Eco Living as one of the “10 Latest and Greatest Inspirational BuddyPress sites“.