FrontEnders

Eastenders, the popular British soap, sounds a little like Front-enders… doesn’t it? Wouldn’t it be funny if all the characters of Eastenders where front-end web developers? That’s how my little random side project, FrontEnders started life.

As with most of the many ideas I’ve had, FrontEnders got shelved until one day when I had some free time I decided to go for it. I launched it with a simple tweet ‘Introducing, FrontEnders‘ and I hoped that a few of the other web developers I’d met at Northern Digitals might get a giggle from it but, thankfully, a few more people liked it too.

Unfortunately, too many people liked it and my server ground to a halt. The beautiful design I’d created with the huge map of London in the background and the high quality images of the scenes were killing the server, so cue some optimisation.

Optimising the site

I’d originally saved all the images out at 80% quality but this was giving file sizes which were too big and I felt this was one area where people wouldn’t notice a compromise so I resaved those images as 40% quality and took the file sizes down from an average of 30Kb to 12Kb. I did the same with the large background map image too.

After resaving in Photoshop I then used (the Mac OS X software) imageOptim to strip a few more bytes from the images.

But that still wasn’t enough, so I decided to give Amazon S3 a whirl. For those who haven’t heard of Amazon S3, it’s a service which allows you to host your media on Amazon’s servers for a nominal fee. Amazon S3 documentation makes it seem a lot harder than it is and it took me quite to work out how to:

• set-up the DNS records so I could use subdomains like media.front-enders.com
• upload files to Amazon S3′s ‘buckets’
• change permissions to people could view these files on S3
• log-in to Amazon S3′s management console and find my security credentials

Bizarrely, that last point was the hardest part of all of this.

Thoughts behind the design

My main desire for this design was to keep it simple and therefore quick to build and deploy. I wanted to use a splattering of bleeding-edge CSS3 for the sake of it to try and impress some of the potential audience. Font-face was used for the logo purely to save me time designing a custom logo.

If I’m completely honest, a lot of touches of the design involving CSS3 are extremely self-indulgent and are only there because I felt they’d lead to more people retweeting or linking to the site.

CSS3  used on the site

• Background image that stretches to full width/height of viewport (webkit browsers only)
• @font-face for logo
• rgba used to give certain background colours an opacity
• text-shadow (coupled with rgba) to give text slightly more readability
• CSS transformation/transitions to move the episodes images on hover

Quirky touches

There are some aspects of the design that I wouldn’t dream of putting on a live site such as the rude message that any IE6 users get or the 404 error page that features no useful information. I don’t believe in the ‘hardboiled’ approach of giving IE6 users a crap experience but once again for this non-important site I felt I’d be more likely to get kudos from an audience made up of web developers with this approach.

Statistics

At the time of writing, FrontEnders has been visited by around 3,000 different people. It has steadied to getting around 200-500 people on the day of an update. The site also jumped to a PageRank of 5 in 2 months.

Lessons learnt

Twitter is a powerful marketing tool, and getting the attention of the right people on twitter (at the right time) can lead to huge swathes of traffic with little or no other forms of promotion. It proves that having the right idea in the right hands can produce great results.