Friday, October 29, 2010

WordPress E-commerce Website Animation Design - Part 2

Part one of our WordPress e-commerce website design overview looked at the commercial influences into E-creation's decision to start using WordPress as a CMS platform and WP e-commerce as a shopping cart plug.

In the previous article, our top five e-commerce functionality update requests in 2010 included integration into Google Shopping, CSV imports, digital content delivery, automated SEO and order forms. However, there is an basic but important requirement for a positive user experience in e-commerce websites that WordPress supports (with a bit of coding help) - multimedia and animation...

The core WordPress content administration functionality is flexible - certainly flexible enough to support the complicated multimedia & interactivity requirements demanded by E-creation clients. A specific useful feature we have integrated into WordPress to create a more interactive, visual experience is home page animations.

Most contemporary websites use simple, effective image animation to keep the page alive and moving. But potential customers are fickle - so updating and keeping your imagery topical is an important element in building the initial relationship.

For the SexyCooking website, we update the front page animation with seasonal food imagery and holiday based recipes (in addition to text based updates to the recipe list on a weekly basis) on a regular basis. Updates to the front page animation are done simply, by uploading an image into a specific folder, which our code searches through automatically every time someone visits the website.

Here you can see the administration screen for the media library within WordPress. Two images have been loaded or 'attached' to the About Us page. This is sufficient for the page to automatically read and display in the page. As part of the code we wrote, it is possible to easily change the speed with which the images change and the 'dissolve' effect.

A simple yet effective animation solution for your WordPress e-commerce website...

Click here for part three of our article on WordPress E-commerce Website Design which looks at Booking Calendar Plugins for WordPress e-commerce website design.

E-commerce websites designed using WordPress & WP e-commerce work!

E-creation has historically designed & built e-commerce websites using off the shelf shopping cart packages or custom written code. However, over the past year, we have noticed a web 2.0 trend towards using WordPress as a CMS platform with variety of e-commerce engines plugins to build e-commerce websites ... that work!

For 80% of businesses creating an e-commerce website, price is a primary motivator and there is no question that WordPress and plugins such as WP e-commerce can be a cost-effective way to put an e-commerce website together. However, low cost is not necessarily good value. E-creation is often asked to 'clean up' or replace e-commerce websites that have been badly developed (usually with bespoke e-commerce engines created by a small website design agency) for customers who thought they were getting a good deal.

So, priding ourselves on being at the forefront of technology, we spent the summer working through both Blogger and WordPress, to compare the two platforms before starting research into the best e-commerce plug-in for designing and developing commercial e-commerce websites.

E-creation continues to use Blogger as a useful & rapid way to drive traffic to a website (it's incredibly quick and easy to add automatically formatted content to a website using Blogger) BUT a key weakness we have discovered is Blogger's lack of e-commerce support. So to commercialise a website once it has achieve high traffic amounts, creates a problem for Blogger.

So for our e-commerce driven requirements, the team at E-creation got its hands dirty with Word Press. It was an interesting transition, as there had generally been a feeling that WordPress was a 'small scale' solution used by amateurs to put together their home websites or small scale e-commerce website but rarely used by larger corporations or even SMEs. We were therefore surprised to find that many large companies, such as SAP, CBS, MTV, Blackberry and Xerox were using WordPress for, at the very least, parts of their websites.

With that in mind, we have been pushing WordPress to the limits and seeing what it's really capable of in the context of the demanding multimedia / interactive requests that are typically made by our clients, particularly when in the context of e-commerce. Often clients already have existing e-commerce sites which are not delivering required functionality or most often, under performing in search engines.

The top five new functionality requests for e-commerce websites E-creation has seen in 2010:

  • Automatic product export into Google Base for display in Google Shopping
  • Ability to deliver digital content automatically after purchase
  • CSV uploads to update to large volumes of product information
  • Better optimisation of content for SEO purposes
  • Order forms (literally) - long lists of products with a field at end of each product for volumes
We can cover the results for each of the requests based on the two strongest (in our opinion) shopping cart / e-commerce plugins for WordPress - WP e-commerce & Shopp.

WP e-commerce has been around for a while and has a mixed reputation. Its strength appears to have been the support provided by its NZ based development team, although the core robustness and flexibility has been questioned by many developers online. Used in anger, we have found that WP e-commerce was quick to install and to set up basic websites. Integrating functionality improvements is possible but creates some issues when updating the core e-commerce code as the updates can override the changes made.

What does this mean in non techie terms? It means that you can have pretty much whatever you want in terms of functionality but the website development agency building your e-commerce website had better be keeping damn good notes of the changes they make to the functionality in order to be able to keep the site up to date as new versions of WP e-commerce are installed (which happens often when using autoupdate!)

So what about some of the specific functionality requirements? One of our test e-commerce sites has been the website. This site began life as a cookery blog site but has grown into a complete online e-commerce website for ordering corporate and private catering in Bournemouth.

The site had no e-commerce functionality to start with, so this was very much a test of how quickly WP e-commerce could be integrated into a WordPress website and what would be the functional stumbling blocks.

I was intrigued by a video I'd seen online that demonstrated setup of an e-commerce website in 5 minutes using WP e-commerce. In the video everything went very smoothly and indeed, an e-commerce website was up and running in 5 minutes. But from experience, nothing is ever that simple ... and it turns out the video was produced by the company who wrote WP e-commerce. Right, that explains how they were able to navigation and configure the site so quickly. So what is the real story? Well, for a simple e-commerce website, setup takes around a day BUT then more tricky configuration and customisation starts, because out of the box, WP e-commerce looks and feels cheap.

Luckily, we had spend a few days initially producing a simple yet effective design with clear grid (if your design team is not working to 960 grid system for ALL websites I hang my head in despair). This invisible geometry that makes sites feel right and easy to work with rapidly pulled the WP e-commerce pages together and within a further day, most of the pages were looking and feeling 'right'.

So two days to design, one day converting to WordPress and two days integrating WP e-commerce and we have a basic functioning e-commerce website ... so next comes home page animations in your WordPress e-commerce website. 

Click here for part two of our review of WordPress & WP e-commerce - WordPress E-commerce Website Animation Design