WordPress is the underlying platform for a lot of our website development.  Alongside the base platform, there are thousands of plugins that make developing websites easier.  We really love three of those plugins; they feature in many of our projects: All in one SEO, cforms, and improved include page.

All in one SEO

The all in one SEO plugin from Michael Torbert is first out of the box.  A few small tweaks and it automates all our on site search engine optimisation.  We’ve no complaints, and the search engine ratings for our clients have been impressive.  We were even happy to pay for the Pro version!

cforms

When we need a contact form on our websites, we invariably turn to the cforms plugin.  It’s the only plugin I know of that’s written by food bloggers.  It’s also, for licencing reasons, excluded from the official WordPress plugin pages.  Despite that, it’s one of the most popular plugins out there.

The feature set is very rich, although some of the customisations we’d like to make are sometimes difficult to implement.  I’ve also just noticed that like all in one SEO, cforms is German in origin… Vorsprung durch Technik and all that.

Improved include page

Improved include page is a real help when we’re treating WordPress more like a Content Management System than a blog platform.  It lets us easily include subpages of information.  We typically use it for multiple column text, or dropping content into a sidebar.  Improved include page (iinclude_page) was created by Italian developer Vito Tardia.

WordPress plugins

There are a lot of other great WordPress plugins of course.  We’ve used BuddyPress in a number of projects, although don’t think of it as a plugin, and are quite excited by  Twitter Widget Pro (which we use on the front page of 21 inspired).   We are also looking forward to trying the Author Spotlight widget from Debashish Chakrabarty.

The WordPress image is courtesy of Jose Pardilla on DeviantArt.  It’s licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.

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.

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.