Leafcutter Labs is a showcase of the creative thinking, design and technical work being done at Leafcutter Creative Digital. Here on Leafcutter Labs the team shares their latest thoughts, some experiments and techniques, and promote a range of products available for testing and licensing. Ultimately, we aim to help you understand the digital space and it happenings, and for the more technical and creatively minded help you make great things.

The Latest


Making interactive, animated experiences is one of the greatest things about the web. With the new HTML5 canvas based libraries, the power and flexibility of the tools that was once restricted to flash is now available in native HTML/javascript code. One of the articles that hit our desktops today was a comparison of the major web drawing frameworks; Raphael, Processing.js and Paper.js. Raphael is based on older SVG technology and we haven't worked with it much, so we don't really have an opinion on that one. Processing.js we have used before for experimentation as well as an adapted boids animation on our main site. Processing is great for the heavy, complex animation stuff; one experiment was to draw hundreds of moving particles on screen with no noticeable slowdown. The other framework is Paper.js. From what I read and saw on the demos, it looks like a really good way to create simpler but more interactive experiences because of its object oriented focus. Which should you choose? My bet for simple stuff would be Paper.js. However, anything requiring complexity, or fast animation should really be Processing, and because of our experience with and the power of Processing.js, we'd actually recommend looking at it earlier in your development cycle than later. Check out Smashing Magazine for the full throwdown.


A lot of the web at the moment is pushing responsive design heavily now. Mobile sites (m-sites) - which were largely the predecessor of responsive design, are now viewed as somewhat old hat and not up to the 'responsive' needs of today's devices. So where do m-sites sit in relation to responsive design and is there a need for the two or just one? Our opinion is probably best explained through an example; the development of our own site. Last year (2011), we developed our site to give us a really simple, clean and yet innovative feel. As part of that, we did a mobile site which utilized a really original horizontal scrolling interface (using the great plugin iScroll). This was a really cool site that really impressed people, even though it wasn't always the most consistent (again thanks to iScroll). You can view the old m-site here, best viewed on a mobile. However, this year when we redid our site and setup the labs, we wanted to make the site more responsive so that it would display across desktops, tablets and mobiles really well. As such, we used our own framework, borrowing bits from skeleton and foundation to make a responsive site. When we compared the two side by side, a lot of people thought that the new site was consistent and really good for conveying information, but the old site had a cool, dynamic and interesting feels that couldn't be matched by the responsive site. So which one will we stick with? For us, we would stick with responsive. Probably the biggest user gripe is having different information or inaccessible information on the mobile version of a site. With our responsive site, the same information (optimized for the mobile) is displayed with a very similar paradigm. We could put a few more mobile enhanced features, like swipe carousels and more, but keeping the layout and interaction the same creates consistent interaction and branding. Responsive & M-sites are two different things; responsive is used to convey the same information and largely similar experiences cross all devices. M-sites are very targeted in that they are used only for mobiles, but can provide deeper of more interesting interaction paradigms because of their focus on a particular devices. As with any problem, choose the right tool for the job.  


eCommerce is big business these days, with a host of companies offering strong interesting and dynamic solutions. For the end user i.e. the SME or the sole trader, it can become difficult to figure out which solution sits right for them. From our research on advising and implementing stores for clients like most other areas there's a range of products on the market that aim to suit different things. The first decision point is whether to go open source or hosted solution. Open source gives you complete control over everything; hosting, code, features etc. Its powerful and allows you to do whatever you want, at the expense of support, backups and updates which must be managed by your host/developer. The hosted solution gives you peace of mind, a full feature set and having something ready to go. This comes at the expense of full control over code, comparatively poor content management & continuous monthly fees that will be higher than an open source solution (provided the open source solution is stable). The one you choose will depend on your situation; if you want something cool, different that you can make exciting, and that you know some good developers for, then go open source. Else if you want something stable, robust and reliable that just gets the job done (with a few bells and whistles like email marketing and so forth) go with the hosted solution. Stay tuned for a comparison of the different solutions available (Magento, BigCommerce, Shopify, Volusion and maybe WP-eCommerce).


Why is combining Communication, Design and Digital Technology essential for modern business? For modern business, digital experience is becoming ever more important. Whether you're selling product online, building online software or running a new startup, having an integrated team that is across communication, design and digital technology is key.


There's a good few providers out there that give you a strong platform to get started with, so that you don't have to worry about servers, software install or a buggy shopping cart. You will still have to do the theming and some of the development yousrself, but its largely simpler to get started that way.


During Gmail's April Fool's this year where Google introduced the concept of Gmail Tap, we decided to actually make a real version of what they proposed.


Over the past few years, there was a lot of chatter about the term Web 3.0 and its real meaning. We felt it was time for us to explain quickly our poisiton on Web 3.0 and its meaning, and to characterize it with a set of simple dimensions / points.


The phrase 'art imitates life', and its converse 'life imitates art' are often used to describe how an artists expression can capture and abstract certain life events and concepts.


Mobile games have become a big thing in today's consumer market. With smartphone and mobile interenet use ever on the rise and set to overtake traditional PC usage, mobile games have become a leading form of interactive entertainment for all ages.


Sometimes you want to test a site in an iframe quickly to determine if the linked site is going to work or not. We did a quick Google in a client meeting today for 'iframe test' to determine whether the support section of their site would work, but to no avail.