Red Ant

webby awards honoree for tails for whales

Tue, 18 May 2010 09:20:57 GMT

The Tails for Whales site has been selected as an honoree for the Webby Awards

We designed and built the site, all based on the awesome idea from Ben at Republic. Here is his explanation of the Tails for Whales campaign. A great example of what you can do with a good idea.

User generated content

Fri, 08 Jan 2010 16:08:26 GMT

It’s always great to get some user feedback. Brett was kind enough to make this video about Tails for Whales

Why we use Ruby on Rails

Wed, 29 Jul 2009 16:39:51 GMT

We do a lot of work with a programming language called Ruby on Rails. When I explain this, some people look at me blankly (disclosure: I get that a lot anyway…). Techie people usually start gushing about how great it is, or want a fight about how X is better. Many people have heard of it somewhere, but are unsure what it is all about.

Here’s my summary of why we use Rails.

The “Ruby” bit is a programming language called Ruby that was developed in the early 1990’s, while Rails is the “framework” bit. It can run on all different types of servers, and has been used to build a few high profile sites such as Twitter.

The framework is a term to describe a way of working. It’s a set of tools and methods that speed up the routine stuff and increase productivity. They allow developers to spend more time on the problem at hand. To use a cheesey metaphor- say you need to drive from Sydney to Melbourne. A framework means you can start your trip straight away without needing to build the car and find some wheels. You still have to drive the car, but you don’t need to do all the painful stuff around making the car. Someone before you has already made a perfectly good car as part of the framework – in fact they’ve probably made a few. You can get straight into the driving. If for some reason you need a different car, you can always get under the hood and bling that car, or you might want to make a new one.

Frameworks are relatively new on the scene. Rails is one that gets lots of buzz (but it isn’t the only one). Its been used to build lots of different things, including very popular, high traffic sites. What’s attractive (for us) about Rails is that some pretty clever people have spent time working out the best way to make things for the web.

Why Rails and not something else? There are thousands of different languages and ways you could build a web site. Some are more popular than others, and some require specific tools or technologies. Some cost a lot to license, while others are free. While I can’t say we’ve tried them all, over the past 12 years we’ve been in business we’ve certainly tested and kicked the tyres on a few.

What I’ve learnt is that it is quite difficult to manage a team that covers several languages. Each language and tool has some unique way of doing things. So running different projects made in different ways can be (was) a bit of a handful. Supporting and maintaining them is even harder. Maybe my mind doesn’t work that way (another disclaimer: I can’t juggle balls or spin plates either). Some development teams go with three or four, while we’ve found it better to focus on one.

We’ve specialized in Rails as we’ve found it makes us more efficient. It helps us develop things faster, and our team collaborates more. It’s also introduced a bundle of ideas and ways of working – from how we make things to testing and publishing.

1. Rails really suits making websites

Its popularity has a lot to do with Rails being particularly well suited to building web sites. You can make a working prototype of an idea pretty quickly, and then build out from that. It has addressed a lot of the problems you can run into on a large web project. Sudden changes in scope, new/better ideas, changes to functionality and design. It comes with lots of goodies that help you make interfaces that are pleasant to use. There’s a lot of satisfaction with making something that is, well, nice.

2. Rails is a bit of a gateway drug

Think of Rails as a gateway drug – you play around, build a few things, and get into Ruby- which is a very “that makes sense” language. Suddenly you’re onto the hard stuff and you realise that it’s going to be tricky to go back to the old way you were doing things.

It encourages you to make stuff in an Agile way, which is a Good Thing.

3. Stop developers peeing on trees

One of the little problems that we run into is getting another developer to take over a project already started by someone else. Invariably, they seem to spend their first hours/days/weeks adjusting things so that they make sense to them. Much like a cat or dog in new surrounds, a bit of pee on a few trees says you mean business.

This is usually petty stuff, like using underscores rather than dashes or renaming a few database tables. Sounds small, but this can then snowball when it then needs to be applied everywhere else. Frustrating when it wasn’t really required, but the developer felt compelled to pee.

Rails has this thing called “convention over configuration”, which avoids all the peeing. Rather than starting from scratch, there are all these conventions that make a lot of sense. Say I was making a list of these blog posts that you’re reading now. The list would be called “posts”. Each item on my list would be a “post”.

Make sense? Not “BlogPost”, “blog_item” or “myblog89-entry”. This saves time in simple ways- like once you see “post”, you can assume it belongs to “posts”.

4. Model View Controller

The Model View Controller (MVC) principle is a big part of Rails. In a nutshell it means that you break up your data and logic (the Model), what it looks like (the View), and how it interacts with the user (the Controller) into separate areas.

If you’re familiar with HTML, it’s kind of like using CSS to separate your layout and your content. At first, it might not have seemed that useful to separate layout and content, but it gives the developer an extraordinary amount of flexibility. Everything is in nice neat compartments, so you can fiddle around with your layout (the View) without breaking other stuff. Same language across all of them.

5. Active Record- database Esperanto

One of the pains with web development is Choosing Your Database. You might start off development with a simple database system. Later on you might want to upgrade for whatever reason (say more data, higher traffic). Who knew that changing between two flavours would mean subtle but critical changes to most of your code?

Active Record is like database Esperanto. You can write everything in Active Record, and it no longer matters what database you use. As always, if you want to get under the hood and write specific code for your database, you’re free to do so.

6. Ruby Gems

What you get as part of the Rails is pretty good, but it also has this tool called Ruby Gems. This allows you to download things that add to what Rails can do. You can grab a database, a tool for testing your code, or something that will add cool little graphs to your page.

7. Capistrano

Capistrano is a tool that helps you publish sites. For a simple site with just a few pages, this isn’t much of an issue- just copy the files onto the server. But as soon as your site becomes a bit more advanced, you’ll need to update several things at once. When you update, you might have changed how a few things work- which might mean an extra column to your database, deleting some images, and replacing some files. This can be a real pain to do by hand. Prone to error in fact.

Capistrano automates this process- we tell it we’d like a current version of projectX on our testing server, and it works out the rest for us. When this has tested OK, Capistrano then plonks the tested version onto the live server. It can even do stuff like roll the current live site back to yesterday’s version.

Twitter Update

Twitter have had some well publicised scaling issues, and this has been taken as evidence of scaling problems with Ruby. This isn’t as straight foward as it might sound – he’s why.

First off, Twitter deals with a fairly unusual traffic profile. Their scaling issues are sudden, massive surges in messages that need to get queued and delivered. The engineering issues they face are relatively unusual- where they’ve faced scaling problems with pretty standard/mature technologies such as MySQL and Memcache. So they’ve discovered they need to solve these issues in quite specific ways.

Second, these specific scaling issues are to do with parts of their system, such as the messaging service.
There is a good discussion and great comments from the Twitter guys here

My example of Twitter might not be the best – as far as I understand they use Rails on the front, and they’ve recently switched to Scala for their back end. Perhaps better examples of popular sites using Rails are Hulu.com (a video portal by Fox & NBC Universal) and NYTimes.com. Any others you think are good examples please drop me a line :)

What's in your spamtail?

Wed, 29 Jul 2009 16:37:56 GMT

We've recently moved this site from Wordpress to Radiant, and one of the fun tasks I got to do was move all of our comments over. The comments database table was quite large, so I naturally assumed that it must be brimming with all the witty and insightful comments that people had left on our blog, that I'd somehow missed. It turns out that of the ~4000 comments, 5 were from actual people, the rest were spam.

Out of ~~procrastination~~ idle curiosity, I wrote a query to break down the results a bit further, splitting on spaces and removing markup, then counting how often the same word appears. This then revealed a magnificent long tail (drag to zoom in to detail). Scroll down to see a more detailed version.

View online to see the interactive version of this diagram

The top 13 phrases

I was expecting porn and viagra to top the list of frequent phrases:

car	253
site	188
Hi	158
htm	131
and	129
my	119
Good	118
visit	106
nice	106
Please	97
Hello	95
Great	93
Sex	93

Here is a graph of those appearing more than 3 times:

View online to see the interactive version of this diagram

Most common names

The most popular name chosen by our spammers is Ipatiplakat, followed by:

Britney;15
Helga;13
Hillary;12
Replica watches;11
Betty;9
Mikle;9
Joey;8
Eddie;8
tramadol;8

Most common URLs

Some variation of Google.com was popular. IPs were a little bit more straightforward- the clear winners was 81.95.146.227 with almost 30% of our spam, followed by several variations of 66.232.126.195

we've been found out

Wed, 29 Jul 2009 16:35:51 GMT

Those cunning William Gibson fans have found us out.

We've been busy ants

Wed, 29 Jul 2009 16:32:43 GMT

We've been busy little ants over the last few months (as you can probably tell from the flurry of blog posts here). There have been quite a few that have launched in the last weeks - here are some:

Huggies Baby Name Finder

The Baby Name finder is an AJAX tool that helps you look up baby names, as well as create a list of favourites to share. We referenced these names against names that members had already chosen for their children - so if you're thinking about "Joshua", we can show you the ten most popular sibling names from families that already have a Joshua.
http://huggies.com.au/babynames/

Ultraserve

A redesign project for the mighty Ultraserve, done in Ruby using Radiant as the CMS.
http://www.ultraserve.com.au

Mums & Bubs TV

Another Huggies project- This has been / is quite a large project, involving the coordination of web site content and a TV schedule, as well as live chat and regular updates. Also includes a large consumer promotion, where you can win a pretty nice looking Volvo.
http://huggies.com.au/MumsAndBubsTV/

Orix

We’re thrilled to see this project go live! With operations in 23 countries and regions worldwide, ORIX’s activities include leasing, corporate finance, real estate-related finance and development, life insurance, and investment and retail banking.
Please be sure to stop by the Novated Lease Calculator, and the wondrous accordion FAQs
http://www.orix.com.au

Oxfam Trailwalker

A dotNet project with extensive javascript and AJAX, we're working together with the Oxfam team to build this application for the Trailwalker project.
http://www2.oxfam.org.au/trailwalker/Melbourne

Kleenex Cottonelle

The Puppy gets a new site!
http://www.kleenexpuppy.com.au

INO Therapeutics Clinical Trial Site

An extranet application for managing clinical trials for INO Therapeutics, with secure document library and user management. This was built with Ruby on Rails, with a design by our award winning Mr Kap.
http://clinicaltrials.inotherapeutics.com/

Wondersoft Design Competition

Voting has just finished on this small interactive tool that we created to allow people to vote on their favourite design by primary school children- something which turned out to be incredibly popular with tens of thousands of people voting in a day.
http://www.wondersoft.com.au

Books Alive

Another Ruby on Rails and Radiant project, but this one is just a prelude to the much larger site that we're beavering away at right now. The preview site contains a useful countdown, so you know exactly how many sleeps to go until the big site goes live.
http://www.booksalive.com.au

Visualising your online customer funnel

Wed, 29 Jul 2009 16:30:51 GMT

Increasingly, our work involves understanding how customers are using and responding to something online. By tracking and measuring how people interact with a particular site / game / online form, we’re able to improve and adjust. Sometimes this is“learnings for next time’, but ideally we’re able to make changes while the project is live.

One of the ways that you can track customer interaction is through a conversion funnel approach, which will be familiar to anyone with a sales background. Coming in at the top of the funnel you have new customers. In the sales model, you communicate with them in various ways by sending them brochures and proposals, and in turn they express an increased interest in your offering. At the bottom of the funnel are the customers that actually commit to your offering. The whole point is to measure how many people you convert from newbies to customers – your conversion ratio.

Measuring your funnel online

For a site or web application that sells a product or service, the traditional funnel approach works well since it’s relatively easy to track user interaction on the web. Not only can we track things by looking at server logs & and page analytics, we can also use database analysis to gain a much deeper understanding of the interaction.

There is an article by Michael McDerment from Freshbooks (a web site that allows you to manage your invoices) on this subject: How to measure the success of your web app. In it, he describes a simple model (visit > trial > buy) as well as a more sophisticated approach (visit > trial > active > pay). He goes on to discuss ways you can go about measuring your conversion funnel.

Michael also makes the point that the initial funnel is important, however how a customer behaves once signed up is actually more important. Do they stay signed up for the next month? Do they even use the service, or do they find it not useful or too hard, and do they upgrade to a bigger package?

There is an interesting discussion on working out just how leaky your funnel is and setting realistic targets for the top of your funnel in Measure the Real Conversion Rate &“Opportunity Pie’, and then debunked in this post.

But what if your site isn’t about buying or signing up?

What if your site isn’t about buying or signing up? Many of the projects that Red Ant works on aren’t based on an ecommerce transaction, where the customer walks off into the sunset with a product. Often the“reason for being”is brand interaction and exposure- a chance for a company to engage with customers in a way that is simply not possible in other mediums such as television. For this kind of site, simple conversion points (how far along the funnel you are) aren’t as meaningful. What’s more, they are harder to measure and assess. In the sales funnel approach above, the customer represents value to the site only once they’ve passed through the end. In this second type of site, a customer might pass through many different points of potential value.

Benchmarking is also difficult. First, there isn’t an easy metric like a sale with attributes (how many items, how much $) that can be measured. Secondly, the comparisons tend to be a bit vague. For example, at what point does a customer become“engaged”- 10 seconds or 10 minutes or 10 clicks? Apart from vague, things can be downright confusing – what might seem great customer response (a surge in unique visits) might actually be bad when deeper analysis reveals that these visitors are just coming for a promotion give away, and then rarely return.

h2. Visualisation

One of the big challenges is communicating what this customer funnel looks like, and how it behaves. Once people can visualise what is occuring, then it’s often easier to explain or contextualise strategies for the various points.

Here is how we’ve explained it as an overview:

tracking stuff - part one

Wed, 29 Jul 2009 16:29:12 GMT

A while back, we started looking around for options for tracking bugs that came up in the process of developing web sites. This is a summary of what we learnt, and some of the steps that we went through.

The basic problem; you have a project where there are lots of things that you need to write down and keep track of. These need to get resolved before the project can wrap up.

Initially, we used issue tracking for tracking bugs- identifying and recording things that were broken or not working properly, and then recording when they got fixed. Looking again at it now, about a third of what we do are “bugs”, the rest would be better described as tasks – so project management rather than bug tracking.

We started off with the “low tech” approach- using an Excel sheet. Mine had a description of the issue, a unique number, and some kind of way of marking issues off. As the project progresses, these were updated and hopefully checked off. The drawback to this approach is that it’s quite manual, and needs an “owner” to update. We found this approach not particularly scalable – it worked OK sometimes, but on a rapidly changing project it became unweildy and got out of hand.

The first issue was pretty simple- version control. The excel file got mailed around, and people would start to update or annotate their version. Then these changes would need to get merged in to an update version. The first or second time, it’s not that hard; but gradually things start to get just too much hassle. Yes, I’m sure that the solution lies with some kind of Advanced Merge With Tracked Changes command, hidden deep in the bowels of Excel interface, but I could never find it.

Another problem comes with distribution- how to let everyone know about the list, what they have to do, and what other people in the team are working on. Emailing it out as a “broadcast” works, but then we ran into version issues when people started using it. Again, I’m sure there is some clever function in Excel to make nice HTML, but I always seem to end up with a tag soup mess. And then people start emailing in updates, and some poor soul then has to reintegrate these into the spreadsheet.

The next issue started off as a filtering problem- some people need a list of just their issues, while other people (like a producer) needs a list of everyone’s. Then the customer needs to get a feel for what has already been resolved vs what is left to do. But then we had one project where we needed to manage things that were being done by freelancers, as well as our internal team, and create a nice report back to our customer. The whole Excel plan started groaning at this stage. Then there are those “secret” bugs- a few things that we’ve stuffed up and needed to get rectified urgently, but we didn’t necessarily want to broadcast this to our customer and their boss.

What really sank the good ship Excel was what I call “issue blossoms” – when one seemingly simple, innocent sounding issue suddenly spawns 20. They seem to appear in the later part of a project, when you’re getting in to the meat of the project (and everyone is strapped for time anyway). You can try to have some kind of numbering system like 2.4.1, 2.4.2 etc, but you’re starting to walk the thin ice by this stage. Sub list spreadsheets are another way of handling this, but these introduce lots of other issues.

Text Cloud in Flash

Wed, 29 Jul 2009 16:26:35 GMT

This post outlines an idea that we’ve come up with for visualising a list of information in interesting ways. We’ve included some code examples, a live example, and you can download the source code to roll your own.

First, some background. We’re working on a project that had some kind tag cloud as part of the layout, serving both as navigation and a quick way of visualising what the content (in this case books) was about. Initially, the idea was to have a regular tag cloud. Content within the site would be tagged by users, and then we’d display these as links next to the book as a way of showing what other people thought of/categorised the book as. Clicking on “green” would get you all of the other green books. The more often a book is tagged green, the bigger the green link becomes in the list.

But as the project progressed out of wireframe and into design, we came to the realisation that many of the pages probably wouldn’t get tagged – at least not by “real” users (read: not Red Ant people). One of the things we try to do in our design process is to have lots of reviews to really test out ideas with all of our team. What might seem a cool idea early on might end up being a production nightmare in the harsh light of day, or alternately someone might have a much better idea on how to do it. Someone brought up this Library Thing post which discusses tag clouds on Amazon and Library Thing – well worth a read if you’re considering using tag clouds as part of your site structure.

Tagging works well when people tag “their” stuff, but it fails when they’re asked to do it to “someone else’s” stuff. You can’t get your customers to organize your products, unless you give them a very good incentive. We all make our beds, but nobody volunteers to fluff pillows at the local Sheraton.

So, we had a problem in that the tag cloud idea wasn’t necessarily going to work getting tags from users. But it did work as a visual device- a really simple way of getting the overall flavour of content on any given page. Joe Lamatia has an interesting post about moving away from basic tag clouds, and their value as a way of visualising information. Using his title as inspiration, we worked up this re-usable snippet that can be used in a Radiant page (or any page/CMS with some tweaks), and it looks like this:

Miles Franklin Award
versatile and provoking
powerful narrative
mystifying power
Queensland
most impressive novel
Essential reading
love and betrayal
inter-racial relationships
Indigenous spirituality
colonial violence

Example of Text Cloud in Flash. Refresh the page and you’ll see the keywords written out as text, and then get replaced with the Flash.

Integrating a text cloud into Radiant

To make it easy to generate a text cloud in our CMS (we’re using Radiant), we thought that a simple ordered list was the most logical/semantic choice for content. We didn’t want our content authors having to remember lots of markup to generate what was in essence a list of keywords describing the content. To add a text cloud, they add a “cloud” part to the page, and then use Textile to write a list of words, starting with the most important:

We grab the “cloud” bit with this code, which could be either in the layout or as a snippet

But this is only half the story. Next, we could have gone 2 ways. The first would have been to simply style the content via CSS and Javascript, and the second was to use Flash. The advantage of Flash here is that it gave us a bit more freedom with regard to font, effects, and speed of production. The Javascript feeds this list of words into a Flash movie and we let Flash handle the weighting. We used Prototype to parse the list, and added it as a variable into the embed code.

var so = new SWFObject("root.swf", "text-cloud-flash",
  "525px", "100%", "8", "#ffffff");

so.addVariable("tags",$$('div.text-cloud li').collect(
  function(li){return li.firstChild.nodeValue;}).join() );

so.write("text-cloud");

From there it is pretty straight forward. Flash randomises the array, calculates relative sizes of fonts, and generates our text cloud. The only tricky thing left to do is to resize the Flash content on the page to fit the height of it’s content. We didn’t want to limit the content author at all- if they want 5 words or 50 words, the Flash needs to deal with it gracefully. Again, this is handled with Javascript and Prototype. This means that the content editor doesn’t need to worry about passing additional arguments to make it bigger for more text, and we can be sure the text cloud will look the way it’s meant to look.

Try it out

Download and roll your own

flash-resize.js – resizes the flash
text-cloud.js – talks to the flash
root.swf – Flash that contains the bling. Get the flash source here (right click and choose “Save as”)

Tails for Whales

Wed, 29 Jul 2009 16:24:15 GMT

We’ve finally launched an update to the 551 project- you can check out the sparkly new goodness here.

Basically, each year Japan sends all these boats down to the Southern Ocean to hunt for whales. Last year they got 551, hence the name of the project. Fingers crossed that this year the number will be much lower, but the only way that is going to happen is if we all hassle, hassle, and hassle some more.

The Tails project involves taking photos of people making a whale tail with their hands (take a look at the site to get a better idea). These photos go into TV commercials, web sites, magazines, and a big book that went to our Prime Minister.

Hold off adding your tail pic for a few more sleeps- we’re beavering away on a new upload tool that will allow you to add your image straight in to the flash feed. To get the project up quickly, we’ve done the design and flash work first. We grabbed all of the images and associated information from the Flickr group and made a JSON feed for the Flash. This will then get replaced with a new admin tool that will help manage all the gazillions of photos and allow all the whale lovers to send in their stuff.

We worked on this project with the Dudes at Republic of Everyone, and IFAW. We hope you enjoy it and feel inspired to take a few Whale Tail photos of your own.