by James Klymowsky
With our mantra of making the complicated simple ringing through our heads, we embarked upon the building of Karbon’s ambitious site.
To begin with, we set ourselves some rules:
Compactness
Karbon’s site had to be lightweight in its architecture - under 500KB – so our users would experience the delivery of content quickly and not have to wait unduly for large amounts of data to load
Practicality
We had to be able to update our content on the fly – using marketing assistants and copywriters instead of programmers and techie’s.
Versatility
We had to have the facility to include media from community platforms such as You Tube and Twitter.
Optimisation
And finally, our site had to be found by any search engine. Just like any HTML site out there, we wanted to optimise our site as much as possible with all the benefits of “deep-linking” to our users.
To satisfy our goals, we opted to create a so-called hybrid website, utilising technologies such as Flash, AJAX, HTML and PHP simultaneously. Although no mean feat, we felt this would allow us to use the best aspects of each technologies – and create a future-proof versatile user experience.
First up was tackling the graphical interface and vast animating backgrounds our designers had laid-out. This proved to be one of the most difficult of tasks. How do we instantaneously generate 10,000 cubes, each unique with different colour sets, and allow them to animate simultaneously with an infinite number of combinations? We opted to use the Adobe Flash framework to do the job, both because we already had a deep understanding of 3D architecture in flash and also because our site had to remain accessible to the public.
Unfortunately, after having carefully looked into many of the open source frameworks we so much admire (such as Paper Vision or Away3D), it dawned upon us that if we wanted to display this many moving elements and sustain a reasonable speed, we would have to create our own bespoke framework to perform such a feat.
So we coded, and we coded, and we coded and eventually ended up with 76KB of flash that allowed us to generate our 10,000 cubes in real-time. We even built it so that our creatives could choose the colours and animation by simply using picture files to generate them.
Next up was to get our Flash talking to the HTML and PHP and vice-versa, which would eventually house and generate all the content and any media we wanted to insert. For this we used AJAX (asynchronous JavaScript and XML). After a couple of weeks of jQuery (a JavaScript library) and lots of testing, our efforts seemed to pay off. The two worked together like peas and carrots – although I am not a great fan of the peas.
Once the AJAX and Flash parts were done, all that remained was to strap it into a fantastic content management system – Concrete 5, one of the easiest and most robust open source content management solutions we have ever encountered. It’s capable of managing any enterprise site, but with intuitive simplicity at its forefront. We had already delved deep into the mechanics of Concrete 5 for previous projects, creating a completely overhauled, custom version so that we could extend its manageability to any concept or idea we could think of. We simply added the customised system to our existing content and it worked like a charm. Now we had a fully manageable and search engine optimised website, small in size and with a unique look and feel.
And the result? Happy creatives, contented techies, satisfied marketeers and, hopefully, interested clients.
