Here at Zoocha we have been getting very excited about the latest e-commerce developments happening for the Drupal CMS platform. Ubercart has been the mainstay of e-commerce development on Drupal for a number of years, and still continues to serve a huge number of sites, but there is a new kid on the block in the shape of Drupal Commerce.

Drupal Commerce (currently at version 1.1) is a complete re-write of the Ubercart system, specifically designed to take advantage of the new features within Drupal 7. Drupal Commerce intends to be better for developers by empowering them make meaningful contributions to the code base, and by making it easier to release supporting modules to enhance it’s functionality.

Commerce Guys Vision:

Our aim is for Drupal to be the number one e-commerce platform in the world.
-Commerce guys

Drupal Commerce is best summed up by a quote from the project homepage:

Drupal Commerce is used to build e-commerce websites and applications of all sizes. At its core it is lean and mean, enforcing strict development standards and leveraging the greatest features of Drupal 7 and major modules like Views and Rules for maximum flexibility.

Whereas e-commerce solutions are often developed with an application mindset, highlighting what you can do with it out of the box, Drupal Commerce was developed with a framework mindset, focusing on what you can build with it. The core Commerce systems make no hard-coded assumptions about your business model, privileging developers and site builders at the core level to build custom e-commerce solutions to suit.

In our eyes, that second paragraph pretty much means you can throw away the rule book. Unless you’ve had the backing of a company with very deep pockets, the constraints that developers, designers, UX pros, and forward thinking marketeers have previously had to battle with, or work within the constraints of when it comes to e-commerce online can now be re-thought.

Coupling this free-style, unconstrained approach to e-commerce, the strength of Drupal as a social and community building tool, and you have something very powerful on your hands. Sites built with Drupal Commerce are only limited by the creativity of those that are building them.

Looking at the bigger picture, what this does is level the playing field for those companies looking for something a bit different for their e-commerce proposition, but perhaps don’t have the financial means to invest heavily in something that may or may not work – just ask the likes of Asos, net-a-porter.com, Ocado or Tesco how much it costs to have something truly unique – 50 strong development teams working on 2 year release cycles are not uncommon.

Here at Zoocha we have a couple of Drupal Commerce projects in the works that will hopefully demonstrate what can be achieved when you combine the power of Drupal Commerce with a forward thinking online retailer. Earlier this week we launched the first of our Drupal Commerce projects for a company called Countryside. Countryside is a multi channel retailer specialising in outdoor clothing and ski equipment, established in 1978.

Requirements

Countryside came to Zoocha looking for a complete refresh of their e-commerce website, redesign, re-platforming and SEO optimisation to be carried out. We were given the following requirements:-

• The redesign was to be realignment based of their current logo and colour scheme
• The technical solution must be a scalable and extensible CMS
• It must integrate with the current back office system and Sagepay
• It must be able to handle high levels of traffic

With those in mind and being very open to ideas we proposed we utilise the power of Drupal Commerce and build a brilliant multichannel e-commerce solution.

Approach

Countryside.co.uk utilises all the out of the box features of Drupal Commerce whilst also integrating other Drupal modules such as “Solr” to power the search, “Migrate” to import 3 different data feeds, “Comments” to allow for product reviews and payment gateway integration for the Sagepay system.

Zoocha carried out a full end to end implementation including:

1. e-commerce Strategy
2. User Experience (UX) and Customer Journey
3. Design
4. Technical Implementation

e-Commerce Strategy

We worked with Countryside to fully understand the goals of the new eCommerce website and how it will compliment their other retail channels. In understanding the business requirements and key objectives we could plan the major deliverables the site needed:

• Increase conversion rates and online retail sales
• Showcase the breadth and depth of products Countryside offer
• Present a modern, user friendly, accessible design
• Scalable and extensible CMS framework to build on over the coming years
• Improve SEO and increase traffic from natural search
• Create informative, elegant product pages but also integrate a social touch.

User Experience and Customer Journey

Before bringing out the paint brush it was essential to understand the customer journey and user experience. After reviewing the current site, we identified 3 main objectives the new site should fulfill:

• Improve navigation
• Increase visibility of products
• Improve conversion

1. Improve Navigation

We settled on 2 traditional paths to navigate to products; they were by product hierarchy and brand. We followed industry standards with drop down navigation, clear breadcrumbs; but this was supplemented by using “Apache Solr” as our platform for search. Having used Solr on other Drupal implementations, we knew that it would be capable of providing faceted search, advanced sorting and a fast response time over many products.

2. Increase Visibility of Products

We offered product cross selling points through the main areas of the site to allow the client to showcase individual or multiple products. This was alongside pre-defined product categories which would show the full product range, with the latest products added first.

3. Improve Conversion

Using our extensive experience of e-commerce design and online shopping behaviour, we wire-framed with these main points in focus:

• Clear calls to action
• Clear product information
• Easy ‘add to basket’ flow
• SEO optimised

We drew up a set of product page wireframes that focused on these main points and through an internal iterative approach settled on a agreed page structure.

Design

We analysed competitor websites and sites that we like to draw up common characteristics they possessed.

• Clear and easy to use navigation
• Use of large atmospheric imagery
• Clear calls to action
• Modern look and feel
• Design works on an iPad and iPhone without major alterations

With these in mind, using the wireframes we had defined, we came up with some design concepts.

Concept 1

We were requested to keep the current logo and colour palette and to keep certain homepage elements such as brand logos, information and a news ticker on the homepage. They also wished to display a few messages in the large banner at the top of the design, so we presented them with an accordion style banner.

Concept 2

We wanted to give Countryside a more simplified/modern version with a different type of main multi-slider banner. In this concept we started to introduce the idea of a modern/grunge effect (seen in the main banner). The client was very keen on this idea and asked us to carry it through into the next stage of design.

Concept 3

We wanted a way of showing more/different imagery and messages high up on the homepage. They also felt that the background needed a texture so we gave a few more ideas…

We then carried on with the design for the product, category, landing, information and payment process page designs based on the look and feel signed off in the above stages.

Even though we kept the original colour palette and logo that Countryside had we were able to introduce a more modern look and feel through grungy graphical elements and white space as well as additional colours to their palette. We also kept in focus the 5 main goals and feel the new design fulfills all of these.

Development

After reviewing the available platform options with the client, we both settled on using Drupal Commerce due to the exciting possibilities that it offers, and the flexibility it has in dealing with existing back-office systems.
Handling Product Data

One of the main challenges that the project presented was that the website needed to be driven from an existing back-office system called “Top to Toe”. This system provided a one way data feed to the website that gave information on:

• New product additions
• Price updates, VAT bands, discounts etc.
• Stock availability

This information arrived in 3 separate data feeds that we needed to grab, parse, pre-process and import into the system. Before we could tackle this data syncing challenge, we needed to migrate the existing data into Drupal Commerce to that we had a baseline of content to begin with.

Data Migration

Firstly we migrated all existing products and images from the existing bespoke e-commerce system that was in place into Drupal using the Migrate module. This included handling multi-tiered product categories. Using the Migrate module to do this meant that once we had defined the appropriate field mappings between the two systems, we could at any time sync them which meant that the Drupal Commerce site in development had the latest product data.

Data Syncing

With Countryside being a multi-channel retailer, it was incredibly important to get the data syncing aspect of the project right. To manage the data feed that the back office system provided, we approached this by:
Taking a feed of data from the back office system in the form of three CSV files.
As the feed is not in a suitable format to do a straight import/update against Drupal, we needed to first parse it, pre-process it and then feed it into an intermediary database, only updating records that have changed.
Using the Migrate module to update products that have changed in Drupal, based on the data in the intermediary database.

This syncing process handles updating Drupal Commerce products, updating Drupal Commerce displays, creating new products, creating new product displays and also handles the visibility rules. The entire product creation is automatic through the import process.

To handle new products, they are entered into a work flow whereby the shop administrator can supplement the data with rich product information (long descriptions, images etc.) that is not supplied from the back office system.

This product syncing happens at a frequency that is dictated by the rate in which the existing back-office system produces new export files.
Handling Product Data with Drupal Commerce

Drupal Commerce Products and Displays

Drupal Commerce Products and Displays are fully driven by the existing back office system that Countryside have in place, including custom displays rules such as: if the product is a clearance product and we’re out of stock, then remove the product from display.

All products have attributes such as brand, colour and size that can all be controlled through the Drupal Commerce admin screens. Each product can also store supplemental information related to specific related products, this giving Countryside site admins granular control over the display if required.

Discounting Rules

Using Drupal Commerce we were able to configure discounts based on a particular user. For example, if the user belongs to a given company, then apply a discount on the entire basket price at an agreed rate.

Search Integration

Rather than relying on the core Drupal search functionality, we integrated the site with Apache Solr. The main motivation for doing this was that it allowed us to use the faceted search features that are incredibly important on e-commerce websites.

Brand Management

We set up fully searchable brand listing pages with the ability to customise the layout and feature specific products.

Customer Reviews

We used the Comments module as a base for customer reviews. All reviews needed to be moderated so using the Comments module felt like a natural fit to the functionality and user flow required.

UI

Here at Zoocha we believe that there is no reason not to use HTML5 for the markup of a website. We looked into a couple of starter themes to base our markup off, and we finally settled on the “Adaptive HTML5 theme”.

Pages such as the product page offer complex layouts with subtle variations, and throughout the site, all the pages had to load quickly. All of these requirements were met by this theme, so using the bundled style sheets as a starting point, we developed them and brought the designs to life.

Following best practices, we only used AJAX where we needed to aid the customer’s user journey and help the performance of the pages. We used image sprites where possible to reduce server requests and kept the CSS as optimised as possible.

And Finally…

We launched the site early in January 2012 and it can be seen at www.countryside.co.uk!

We’ve just written up a case study for Drupal.org that explains some of the technical challenges that had to be overcome on a recent project of ours called Property Place. This project posed particular technical challenges due to the volume of data that we were having to deal with (350GB of images and 2GB of CSV data!) – essentially what amounts to every property for sale or rent within the UK.

If you don’t fancy reading the whole case study, then to summarise the project in a single paragraph; Property Place is a Facebook application built using Drupal 7 that allows users to search, share and advertise their property. It uses Drupal Commerce, Apache Solr, Migrate and a range of other modules to enable this functionality. The application aims to be the number one Facebook property application, and although the app is focused on the UK market at present, it has global ambition and capability.

Check out the full case study over at Drupal.org or read our portfolio page entry to find out more.

Business Requirement

If you require a number of bespoke features that are unique to your proposition or want to really differentiate your website from that of competitors, an ‘off the shelf’ shopping platform is unlikely to be fit for purpose.

Budget

The cost of e-commerce platforms can be broken down into licence fees (if proprietary technology), design costs, development costs, hosting and management costs. For most retailers, the single biggest cost is development, as it is this that enables them to tailor the platform to meet their business requirements.

Ambition

Just like any business venture, launching an e-commerce website is an investment that needs to deliver a return. Whilst a free SaaS platform will provide a quick to market, low cost option, it is unlikely to provide the functionality, customer experience or scalability to grow a significant market share.

Here at Zoocha, we thought we would review what we believe are some of the better e-commerce platform and framework options that are available to all businesses:

• Magento
• Drupal Commerce
• Drupal Ubercart
• Shopify
• Opencart
• Presta Shop
• Interspire
• CubeCart
• X-Cart
• Spree
• osCommerce
• Zen Cart
• VirtueMart
• Business Catalyst
• WordPress eCommerce Plugin
• Satchmo
• Batavi
• Broadleaf Commerce
• Interchange
• nopCommerce
• Ofbiz
• osCMax

Magento

Big names such as Nokia, Samsung, Fred Perry and The North Face are among the 100,000 merchants that currently use Magento as their ecommerce solution. The feature-rich and fully supported Enterprise edition is directed towards larger companies with costs starting at $12,990 USD/yr. Features include email marketing along with a rich merchandising suite to target marketing, CMS, highly tuned page performance, private sales, special events and permissions just to name a few. A hosted edition available called Magento.go aimed at small businesses which ranges from $15 to $125 per month offering from 200MB to 5GB of storage, 4GB to 32GB of bandwidth with free set up and no transaction fees. A free version is also available; you get the code – that’s it!

Drupal Commerce

Drupalcommerce, also being fully integrated with the Drupal content management system moves a step up from ubercart to be enterprise aware by being scalable and secure, PA-DSS compliant with multi-currency support to name a few. Extended modules allow you to add payment service integration, coupons and affiliates, paid file downloads, shipping calculation, stock management and SEO tools to further enhance the already search friendly Drupal. Being a Drupal module Drupalcommerce has access to the large list of modules available to the CMS along with it’s expansive community of developers and themes available in abundance with consultants offering theming services if needed.

Drupal Ubercart

Ubercart fully integrates with the award winning open source content management system Drupal and thus has full access to all of its functionality for URL optimisation and a host of modules to make your site search friendly, its secure application framework along with the ever growing community of developers for drupal and ubercart. The flexible product attributes system allows shoppers to choose selectable attributes that may modify the price, SKU/model, and/or weight of the item as the shopper adds it to their cart. Single page chekckout then allows the shopper to pay for their item(s) and all checkout information is found on the one page along with integrated payment gateways such as; PayPal, Authorize.net, Cyber Source etc. There is currently a development version of Ubercart (version 3 beta) to be fully compatible with Drupal 7.

Shopify

A very easy solution for creating a professional looking online shop. There are plenty of free and premium themes available that are completely customisable in the Shopify admin area. Or you can design your own theme from scratch.

Shopify will host your site along with setting up SSL so you get plenty ‘out of the box’ with Shopify. Major credit cards and PayPal payments are accepted and Shopify does provide their own analytics, although you can use Google Analytics. Shopify do take a percentage of each sale for providing all of the above for you.

Opencart

OpenCart allows storeowners to create unlimited categories, products and even add unlimited manufacturers to sell products in multiple languages and currencies via 20+ payment gateways and 8+ shipping methods. The administration user interface is clear and easy to navigate along with some sleep looking templates. A big plus point for OpenCart is the ability to create and run multiple stores from a single admin interface where storeowners can set products to appear on specific stores, theme each store differently, localise each store by setting a default currency and tax class.

Presta Shop

As winner of the best open source ecommerce application 2010 [PAKCT] with more than 50,000 live shops and a 240,000 member community PrestaShop comes packed with features including customer referral program, quantity discounts, returns management, unlimited shipping carriers and destinations, user statistics and localisation. The biggest plus point for PrestaShop is the attractiveness of the sites created using the popular Smarty Template Engine. However, it is believed that the backend is slow to manage and maintain lets hope this was addressed in the 1.4 version release.

Interspire

The latest version 6 has been enhanced with features such as; the ability to sell on ebay as well as mobile commerce, integration with MailChimp, pre-orders and min/max order quantity to name a few. Interspire is offered as a hosted plan or a licensed edition so the shop owner can decide how simple they wish their ecommerce platform to be along with the user-friendly admin area that comes with Interspire. There are over 90 design templates available and each design is easily customisable to suit the storeowner’s needs.

CubeCart

CubeCart is a basic ‘out of the box’ ecommerce available for up to £110. There is a cut down version available free of charge that has limited features to play with such as a choice of three skins, five payment steps and mandatory registration. The premium version comes with more features but further add-ons and a familiarity with PHP and MySQL are necessary to really make CubeCart work for you.

X-Cart

A commercial package with open-source code that is affordable for new business start-ups as well as established businesses. X-Cart uses the Smarty Template Engine that is popular amongst developers due to its approach of separating presentational code with application code.

Custom META tags and URLs for products and categories make X-Cart search friendly. Sales analysis and tracking data that is integrated with Google Analytics, you can target your HTML emails to specific customer groups integrated with MailChimp (this module does include a one-time fee). Extra modules such as Facebook Tab and X-PDF Invoices are also available but at an extra cost.

Spree

Spree is an open source platform constructed in a very clean and lightweight fashion using the popular framework Ruby on Rails. Being an open source platform Spree comes with a strong community that has provided over 100 extensions and continued support through active development. Spree also provides support for over 50 payment gateways, single page checkout and custom tax logic along with built in Google Analytics. Spree sites can be translated into over 25 languages to give your shop a worldwide presence along with being cloud-tested so you can host your store on the next generation of server technology.

osCommerce

osCommerce is an out-of-the-box shopping cart that is easy to setup, run and manage in a cost effective fashion. If you want to differentiate your store from the thousands of other osCommerce stores, there are over 5,000 add-ons available, some of which come at a cost, however, modifying the stores design is a little tricky. Version 3.0 of osCommerce that was released in March 2011 includes a template system and an administration area username and password definition during installation. Supports authorize.net, paynova and paypal gateways to name a few. More gateways are available via add ons.

Zen Cart

This open source platform is easy to install, customise, manage and generally just easy to use so great for someone new to ecommerce. There are a large variety of add-ons available to enhance Zen Cart including template packages, pricing tools to enable discount coupons and gift certificates, language packs and a newsletter manager to market to your clients. However, installing too many add-ons can leave you with a very cluttered user interface. On the downside, a lot of the templates do appear to be somewhat lacklustre; although Zen Cart is easily customisable so implementing a bespoke design should be easy.

VirtueMart (Joomla extension)

VirtueMart is an extension of the well-known content management Joomla! As a shopping cart it allows shoppers to create and manage their own account along with sending a product ‘back in stock’ notification to shoppers. VirtueMart is available in multiple languages and currencies along with allowing storeowners to sell downloadable products (virtual goods), add product ratings and testimonials that can be moderated or auto-published. There are a plethora of extensions and themes available to customise your shop and differentiate from the crowd.

Business Catalyst

Being managed and hosted by Adobe, Business Catalyst is an eCommerce platform that includes a content management system, customer database, email marketing, along with analytics and reporting. Arguably the most impressive part of Business Catalyst is its powerful customer relationship management features. All interactions a customer makes with the interface is tracked and recorded making this data a great resource for targeted email campaigns. Being an Adobe product it does favour Flash to JavaScript for the majority of all moving parts and looking at a lot of the live sites the Flash used tends to be heavy and buggy. This could be seen as a negative to Business Catalysts ‘Awesome Web Apps Without Coding’ approach.

WordPress eCommerce Plugin

With this being a WordPress plugin it is obviously only available to WordPress users as an add-on to their existing site. However, if you decide to have a shop as an after thought to your existing WordPress site, this would prove to be a decent option. Providing easy setup/use, integrates with PayPal, Google Checkout and Payment Express among others along with the getshopped! Facebook application that will allow storeowners to promote products on their profile.

Satchmo

Satchmo is built using the popular Python Web framework, Django and has support for range of product types including downloadable products, subscription products, custom configured products, product variants and gift certificates. Continuing along the lines of Satchmo being feature rich the customer model allows multiple ship to and bill to addresses along with being available in multiple languages and supporting discount codes to allow free shipping, set amount of percentage discount, set start and end dates, limit to certain products. The requirements list is somewhat extensive and definitely worth having a look through before making your decision.

Batavi

Batavi is a relatively new open source platform that is an extension of osCommerce as the Batavi development team is the former, well known, osCommerce core team. A particularly impressive aspect to Batavi is the ICEcat PIM module. This Product Information Manager has the ability to handle millions of product data sheets, provides a graphical menu structure, support for multiple Linux distributions such as CentOS, Gentoo and Ubuntu along with easy integration with external sources. Batavi is currently under heavy development and each release brings a host of new features and bug fixes to provide a more customisable and robust platform for your web shop.

Broadleaf Commerce

This open source Java EE eCommerce platform is the first eCommerce framework to be developed based on the widely adopted Spring framework, the leading framework to run and build enterprise Java applications. Broadleaf Commerce offers simple and easy integration with any database and back end system you currently have. Broadleaf Commerce has a user-friendly merchandising tool enabling you to manage products, promotions, designate featured products, customise product search and reporting with ease. Broadleaf Commerce was designed to be highly customisable and easy to configure, extend and maintain so you can make your store stand out from the crowd with ease.

Interchange

Interchange is an open source eCommerce application written in Perl for building customised eCommerce and catalog solutions. A powerful tool that can automate and data-enable your site and build online applications. Interchange supports sales, order processing, content management, customer service, digital goods delivery and auctions. Integration is the big thing for Interchange as it integrates with payment processing services, ERP systems, point-of-sale systems, accounting systems, external content management systems and Java-based application servers. So whatever your existing platform, Interchange will make a great add on.

nopCommerce

nopCommerce is stable, usable and highly customisable and one of the best free .NET shopping cart solutions. This platform is easy to use with its quick and simple installation instructions and pluggable architecture, adding additional functionality or presentation elements is made easy. nopCommerce is also optimised for search engines with the use of friendly URLs, properly structured content and products to enable potential customers to find your store. However, it appears to have some heavy server requirements and tends to require more design and development expertise than other shopping carts.

Ofbiz

This open source enterprise project can be used out-of-the-box or customised to suit further business needs based on this reliable, secure and scalable foundation for enterprise solutions. Ofbiz provides a suite of enterprise applications that incorporate and automate plenty of the business processes of an eCommerce enterprise. You will get a well tested and proven architecture that adopts best-practise design principles and is highly customisable for you to adapt the architecture for the most specific of business needs. However, the user documentation is not particularly fantastic. If you have a specific problem, you are unlikely to find the answer in the documentation as it is very generic.

osCMax

osCMax is an open source ecommerce platform derived from the popular osCommerce platform that has been extended and rewritten. osCMax is a fully templateable solution that comes with a default template, However, other pre-designed templates come at a cost, although the template store is empty. Strengths include; the ability to use your own rented server without further licenses, pricing for different customer groups, allowing users to sell to retail and trade customers, ease of use when creating and uploading new products, downloading and processing prders along with the ease of setting up payment gateways. osCMax does lack multi-store support and one page checkout.

Need help with your e-commerce platform selection and implementation? Contact us!

Zoocha devised, designed and build a bespoke photo sharing application that formed the centre piece of the launch campaign, titled ‘Scourge of the Storm’. The app was added to their official Facebook page and Zoocha build a ‘photo hall of fame’ widget to be embedded on their website to ensure the campaign was fully integrated into the product launch.

The incentive for entering the competition was ‘bragging rights’… You read that correctly – no prizes were offered! As testament to the strength of the user experience and the brand engagement, the app was installed by over 2000 users.

If you are looking to create a storm on Facebook and stand out from the crowd with a bespoke Facebook app, contact Zoocha today!

We enjoyed some particularly impressive sessions at DrupalCon London this week – some of the highlights for us were (videos now available online):
- Living Breathing Drupal: The Biology of a request – Kenny Silanskas gave some valuable insight into what happens underneath the hood when a page loads in Drupal.
- Entities emerging patterns of usage – Ronald Ashri made a strong case for using entities over nodes for storing certain types of data.
- Damn quick Drupal: How to make Drupal Perform and scale like a Rockstar! – Michael Cooper provided the audience with some great practical advice to help speed up a Drupal website.
- Developing with Drupal Commerce – Ryan Szrama chaired an interesting panel debate on Drupal Commerce and announced that Drupal Commerce had just entered full 1.0 release! Here at Zoocha we are very excited about Drupal Commerce and have a couple of Commerce builds in the works that are shaping up to be something special!

Roll on Munich 2012!

The April Sun

The theory goes that drinking a hot drink will cool you down. As we’ve been enjoying an early summer lots of refreshing hot cups of tea have been needed to keep everyone at a comfortable temperature in Zoocha HQ.

The new Marks and Sparks Tea Bags

A somewhat controversial maneuvre was made, the standard PG pyramid tea bags were dropped and Marks and Sparks English Tea was brought in. They even come with instructions on how to make the perfect cup of tea. It turns out reboiling water is bad, as the oxygen is all but gone hence the brewing suffers. However you like your water, they certainly pack a full flavour.

Lines of PHP

The final theory is that there is a direct correlation between the amount of code written and the amount of tea drunk. The more code needed, the quicker the tea is drank.

So after much deliberation, over a nice cup of afternoon tea, the office consensus was that all 3 are at play. However “lines of code” was seen as probably the biggest instigator. Thus to keep the tea flying off the shelves we need to write more code, hence we are hiring!

So if you working on exciting, challenging, innovative projects coupled with a spot of tea then Zoocha is the place for you. Take a look at our careers page for more details!

Right…time for a cupa.

The Nuptials

As a long time user of Firefox (as are most of the tech chaps in the Zoocha office) I’ve seen it graduate through its various incarnations. I started out back in the day with version 0.9(b?) with the excellent web developer plug-in and progressed to version 3.6 – all as my default browser of choice; regardless of OS.

The Lovers Tiff

However recently I started to get this nagging feeling, should a web browser really take that long to boot up? I had a shiny new Macbook Pro i5 and Firefox was still taking an eternity to load. Maybe I should just blame Apple? In the evening I found myself doing the dirty and taking a bit of time to dabble in others, the obvious 2 choices were Safari and Chrome.

The Separation

3 days later it was made official, my relationship with Firefox for daily browsing was over; I had a shiny new partner for browsing…Google Chrome.

The Counselling

But come March this year all 4 major vendors (I know I’ve missed various others out but I’m a sheltered ‘trust what you (don’t) know user’) had new browsers out. As a Mac fanboi IE9 was instantly ditched due to the minor issue of its unavailability. This left me with Firefox 4, Safari and Chrome 9 to choose from.

So after using Chrome 9 and not noticing any life changing enhancements; Safari seemed to occasionally freeze, I downloaded Firefox 4 and went on a few dates. These were the most noticeable changes:

• Visual

  At last a Mac looking skin and the tabs had moved to the same place as Chrome and Safari. I personally believe the address bar is a child of a tab, thus the tab appearing on top makes perfect sense to me.

• Firefox Sync

  I now have all my bookmarks on my iPhone. I know in itself this is not revolutionary, as there are probably plenty of apps out there which achieve this, but due to the ease of configuration it is a welcome bonus.

• Development

  Firebug, YSlow, Screengrab, Colorpicker all present and correct! I dabbled with using Chrome’s built in web developer addon but I couldn’t get my head round it. This I put down to, it not being quite like Firebug.

• JavaScript

  Supposedly it now renders JavaScript even quicker. Now I have to be honest, I’ve never really noticed how quickly a modern browser renders JavaScript. I only notice a problem when I get the spinning beach ball of death and the whole browser locks up. I thought this was down to badly written script in the first place, not how quickly a browser can interpret it. But I’ll take their word for it.

• Start Up Time

  Now the big/fast one! It looks like the Firefox Wizards have done some serious tuning. Now when I fire up Firefox 4 it loads in a comparable time as Chrome.

The Reconciliation

So to sum up, things have been tweaked, updated and refreshed with the new Firefox 4. To my mind it seems a rather excellent improvement on the last version. However whether this will guarantee its survival in what now is becoming a very important battle ground only time will tell. For what its worth though, today Firefox 4 was welcomed back as my default browser of choice.

HTML5 – Boxed up and ready to go!

Update 27/01/11: HTML5 is now really just HTML. But for those who like buzz words we’ll call it HTML5. So read on about why you can use the evolving version of HTML, I mean HTML5.

Firstly, lets look at the past to see where we have come from. About 6 years ago Dave and I attended the first ever @media web conference in London. A common question that kept cropping up was “yes we’ve heard about this XHTML and CSS stuff (Web Standards) but why on earth should we use it?” Good question…and it turns out the answer is rather straightforward:
It’s the correct approach to front end web development
Well in the eyes of the developers it was.

For those who don’t get turned on by semantics and all the other nerdy goodness it offers, what are the reasons for moving over to “Web Standards”? Well rather than list the numerous benefits, as this is really about HTML5, take a read of Ryan’s excellent article “Why Use Web Standards”.

So here at Zoocha 6 years later we find ourselves at a bit of a déjà vu moment. Just this time substitute the abbreviation HTML5 in to where “Web Standards” used to live.

So 5 reasons to use HTML5

HTML5 Baby!

So that is why when we create a website, unless directed otherwise, you will get your website built in lovely HTML5 goodness. You may also get a bit of CSS3 thrown in for good measure…but that’s for another time.

This month see’s the first birthday of Zoocha Ltd, and we’re celebrating one year of success. There’s a lot to be thankful for and as we enter into 2011 – a year we’re sure is set to see yet more new clients, new opportunities, and new experiences (even new staff as we’d like to welcome Owen to the Zoocha team!) – we reflect on the experiences of the past year and what 2010 bought to us.

Expansion

A word we all love and key to any business! Zoocha has grown from a twinkle in the eyes of its four founding fathers (well… three founding fathers and one founding mother, to be politically correct!) to a fully functioning and highly successful, innovative business and an exciting place to work. The digital world can change with the blink of an eye, and we’re enjoying every step of the ride, moving with trends in the market and even predicting the next major change in the tide, so we can stay ahead of the game and make sure we deliver future-proof websites and leading strategies with each campaign.

New Clients

Zoocha have grown to encompass new employees as well as new and impressive clients in our first year of business. We’re thrilled to have worked alongside an impressive portfolio of clients in the past year alone, including huge names such as Argos, Radley and Walkabout Bars (you can check out our full client portfolio on our portfolio page).

New Staff

For all this extra work load, we’ve taken on a handful of fresh faced new employees, willing and eager to get their creative juices flowing. Our newest web expert, Senior Web Developer Owen Williams, has joined us all the way from Welsh Wales, and we’re very excited to have him on board.

New Office

We’ve also just moved into a fancy new office that can fit all our bright new employees, with ample room for all the creativity we’re sure they’ll be firing around at one another. We’ve even got a chill out area – come – games room, complete with mini pool table (courtesy of secret Santa!) It doesn’t get much better than this – short of replacing the stair case with a water slide, as per one request which popped up in Zoocha’s metaphorical ‘suggestion box’.

New Website

Not only does our 1st Birthday coincide with the New Year, but seeing as you’re reading this blog, you will also have noticed that it coincides with the launch of our dazzling new website! Our blood, sweat and tears have gone into this site (just as with any work we do here at Zoocha) so needless to say, we’re rather proud of it – even if we do say so ourselves!

New Year!

One year on from Zoocha’s official start date, we’re going strong and growing stronger as each and every day brings us exciting new challenges. If we can achieve all this in a year – just think of what we could do with ten! So, enough of the reflection – we’re looking onwards and upwards towards what the future has to bring to Zoocha. Watch this space!

Have you ever wanted to make a fully custom Hulk Hogan Munny… Probably not, but having made one myself as a present I wanted to share the process in a tutorial fashion. Hopefully it will inspire you to get creative a make your own custom Munny… maybe not Hulk Hogan but anything you can imagine.

> The Back-Story
> Concept Design
> Sketching
> Modeling with the Clay
> Boiling the Clay
> Sanding and using a Dremel
> Primer and more Sanding
> The really fun part…. Painting
> The Finishing Touches
> The End Result

More Munny Resources

The Back-Story

Recently I discovered the magical world of ‘Munnys’ created by Kidrobot, I had seen them on blogs and presumed you bought them painted. For those of you who have never heard of a Munny, they are blank figures that you buy and decorate yourself. For us designers it gives us another media to show our creative flare.

My older brother; James Reeve‘s birthday was fast approaching, and as he is also a Designer I wanted to give him a unique design related present. So I decided to make him his very own custom Hulk Hogan Munny (Hulk being his favorite wrestler from the old days). I did some research into customising a Munny, looking at people’s creations and some of the tutorials online. I particularly liked the Halo Master Chief Tutorial that used Clay to add even more detail to the model. Check it out here.

My Shopping List
• Kid Robot 4” White Minny Munny
• Super Skulpey
• White Plastic Primer
• Mixture of Acrylic Paints
• Household Stuff, Towels, Pot and pans etc.

Concept Design

Before I went charging off with the paintbrush at 100mph, I wanted to come up with a concept design in Photoshop first. Once you start painting etc there’s no going back so I wanted to be prepared and design my model first in order to get a rough idea of how he could turn out.

I came up with the following design for my Hulk Hogan Munny, I understood that it would not look exactly the same but was nice to have the rough outline for once I started working on the model. You can find templates on the Kidrobot site, or simply do a search in Google.

Sketching

I started by sketching my design on my 4” Munny, so I could start to figure out where to paint on all the different parts. Working on a physical object is a real break from the digital design world and I love working with my hands, so even by this stage I loved this project.

(Please note if you are going to do the same, give your Munny a good wash first to remove all the dirt etc and if you can, try not to not handle him too much, or similar to myself, slap on some latex gloves!)

Modeling with the Clay

Originally I was only going to paint the model, but after seeing some examples on how well clay can transform the basic Munny I had to give it a go. I bought some Super Skulpey from Ebay, I had read online that this was the best stuff for not cracking and giving general problems. (After using it myself I totally agree it was very hassle free and gave a great finish.)

As always I was only going to give him a mustache and beard combo made from clay, but once I started getting my hands going I couldn’t STOP! In the end adding eyebrows, nose, shoes, arm bands and some smaller details, making the munny completely unique.

Here was my first attempt with the clay, it took me about an hour to get to the point you see above. I took a photo and had a good look, soon realizing he was not angry but had more of a surprised look.

With a matter of a few pinches, pokes and squeezing he was given the angry look I was after. Once I had checked over every part with a fine tooth come it was time to harden the clay to the model.

Boiling the Clay

Now Super Sculpey you are supposed to bake, but Munny’s are made out of plastic vinyl and I really did not fancy putting him in the oven etc. So I used the option of boiling. (I am not saying that baking will not work or will mess up your Munny, there are loads of examples of people who have baked their Munnys and had no problems, it’s just a personal choice by myself).

I used a big pot to boil some water in, and a small pot full of cold water. (To put the money in after it was boiled so that it did not warp too much or become distorted.)

Unfortunately I did not take any images of the boiling process as I had my hands a little full, but it went quite well. I simply used a spoon to lower the parts of the Munny into the boiling water, with a cloth over the top so that they did not float to the top. (As they are hollow). I left them in the boiling water for about 3 mins, a little bit less for the arms due to the size.

Please take your time on this process, I did find that the arms were very very tricky to keep in the boiling water as they wanted to float about. I used a wooden spoon to poke them under, however with one of the arms it left an imprint as I must have applied too much pressure. (Hardly noticable).

PLEASE NOTE: If you are going to use any kitchen utensils to hold them under make sure you apply light pressure, or you might pull it out and really not like the deformed head you see in front of you. But take your time, and you will get a good result. You will notice in the later pictures he has lost his arm bands, they were simply too small and ended up breaking off due to not sticking correctly so I decided to just paint them on instead of messing about too much.

Sanding and using a Dremel

(You do not have to undergo this step, I however being the perfectionist I am could not go on living knowing my Hulk Hogan had imperfections on his tash).

After the Munny had all cooled off, I noticed that some parts were quite rough and not as defined as I wanted them. I started off with some sand paper to take off some of the jagged parts of clay, but struggling to get the clean edges I wanted so it was time to step it up a notch.

The Dremel was released, however I used it on its lowest/slowest setting to ensure it did not cut through the Munny like butter. I took my time and used different ends to the Dremel to sand and sculpt the clay making it as defined as possible. After a few hours he was finally ready to go to the next step. (As with anything craftsman like, it’s all in the preparation!!) It is by far the most important step, as the more time and effort you put in now means the better end result. Remember once you have painted, it is a lot of effort to go back and change anything so put in the extra added time now and you will appreciate at the end.

As usual, it didn’t take long for my dad to see what I was doing and give a hand, allowing me to work on the other parts of the Munny. I suppose that is where my ‘artsy’ skills come from, so it was only fair to let him help, as I knew he would do a good job on it.

Primer and more Sanding

Before I started painting the colour onto Hulk Hogan, I sprayed him with a few light coats of plastic white primer (plastic is better as it is less likely to crack).

Once again you do not have to add primer but as the clay was a different colour to the model it could made the paint different shades, also paint sticks better to a primed surface, giving a better end result. So in my opinion it’s an easy job that is worth doing.

The really fun part… Painting!

This is the part that everyone looks forward to, when you get to start slapping on some colour. But at the same time it is quite nerve wrecking as you do not want to mess it up. I chose to use acrylic paints as they have the best coverage and leave a really bright colorful result.

I mixed up all the colours I would need from my original sketch, and got going. It took a very steady hand and a lot of patience to get all the lines straight and add all the little details of colour around the eyes etc. I did “cheat” on some parts and used markers to fill in the tiny gaps, such as on the pupil of the eye. I used a very thin sharpie to get into the corner of his eyes… Oh no my secret is out, oh well you would never be able to tell, ha!

Here is the completed painted model, the picture makes his face look quite yellow but is actually darker in reality. I was going for the tanned Hulk Hogan look, he could have done with a little more orange. (Be aware he is missing an arm because it was drying at the time, haha).

The Finishing Touches

I have been using an airbrush for a couple of years now, it has not been out of the cupboard for a while so this seemed like the perfect time to break it out. I added some highlights to his eyes and parts of his costume and also added some very very light shadows, just to give him that little bit of extra depth.

The End Result

So here he is in all his glory!! For my first Munny project I am really proud. I presented my brother with it on his birthday and he was over the moon. He had seen Munnys before that had been drawn on but never a completely custom and painted version.

The Munny now lives on his desk at work, with his Goomba Mario Figure. (Out of shot).

More Munny Resources

If you want to see some more custom Munny stuff and general desiger toy info, then check out Chris Spooner’s Blog Post on the subject. It’s a really good read and played a big part as inspiration for me to make my own.

http://www.blog.spoongraphics.co.uk/articles/tutorials-for-creating-custom-designer-toys

I hope that this tutorial/guide to an amazing Hulk Munny has inspired you to try it yourself, if you make any Munnys post them so we can have a look at your handywork :D, as always any problems drop me a line and I will help you out to the best of my ability (I am not a pro at the subject, but have learnt a lot throught this project.)