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“.

Artemis Media had been trading for more than a year, but had only ever had a placeholder website. Without an online portfolio to show potential clients, and with no presence in searches, they were losing opportunities. They needed a web presence up and running quickly, particularly as they were planning a new campaign “doing it differently”.

Clean, professional, strong website

Prior to the website build, we advised Artemis on  structure and layout, and how their website could become an effective business tool.  For competitive reasons they were reluctant to reveal too much case study information on site; instead the focus is on illustrating their services, backed up by a series of quotes from their clients.

The website is driven from a content management system, allowing Artemis Media to edit and reload content as new campaigns start, or they introduce new services. Our web design for them also incorporates a blog, where they can write content to enhance their reputation, and gain recognition in the search engines. Other touches include Javascript elements to enhance the front end, and built in on page search engine optimisation.

Delivered within a short timescale, the Artemis Media website portrays a clean, professional image for the company.  As the Artemis add more content, it has strong fundamentals, that will allow it to perform well in search engines.

Challenge presented

Shehla is a Newcastle based psychotherapist who wanted to develop her own private practice delivering executive coaching and personal development.  We’d previously worked with Shehla on her business strategy, and were delighted to be tasked with designing her brand, and building a website that would both generate referrals and also grow Shehla’s reputation as a leading practitioner.

Our solution

This is the first project that we undertook with Rebecca on board, and the benefits were immediate.  The client’s preferred colours and motif, soft fushcias, pinks and a flower, are worked into a striking, professional, welcoming and engaging logo.  The web design continues the theme with clean, bold blocks showcasing Shehla, her services and her case studies, and incorporates a blog where Shehla can write.  The website is standards compliant XHTML and CSS.

End results

Shehla has a brand she can be proud of, that is not only striking, but also sets her apart from the competition.  Her website is appealing with clear calls to action, and a blog for Shehla to write and grow her reputation.  We continue to work with Shehla, and look forward to ongoing development of her Newcastle practice.

Budget content managed website

First and foremost we’ve built a website for Cold Store Logistics that is clean and professional; a brochure website that they can be proud to show their clients and that will drive new business. Rich images and callout banners standout on white pages with search engine optimised text. The website is content managed, allowing the client to modify content, upload images, and even add pages as they offer new services in the future.

We developed the website on the WordPress platform, working from a web design drawn up by our friends at Bigger Boat. Despite being built on a budget, the website features Javascript drop down menus driven directly from the WordPress page structure, inbuilt search engine optimisation, a contact form, and a news area where Cold Store Logistics can publish their latest stories.

End result

Clean, consistent page layouts let the visitor quickly appreciate the services offered by Cold Store Logistics. This is backed up by bright fresh brand consistent imagery, and callouts to focus attention on the key benefits and features offered.