netmagFeature

.net Awards 2011: the winners!

As the victors depart the stage at our rock-themed .net Awards 2011 night, we reveal who's come up smelling of (Guns and) roses

They think it’s all over – it is now! The winners of the .net awards 2011, in association with BaseKit, have been announced and handed over during a special rock-themed ceremony at Madame JoJo's in London's Soho. And we can now exclusively reveal the results to the world!

It was back in August and September that readers of .net were first asked to vote for their favourites in each category.  That led to a record 125,000 votes – and decided the top three in each category. That shortlist of three was then scrutinised and debated by an independent panel of industry judges who picked tonight’s 17 winners.   

At time of writing, the event is still in full swing and Conquest of Steel, featuring Opera's very own god of metal, Chris Mills, are about to take the stage. But we’ve dragged ourselves away from the screaming axe solos and general debauchery to share with you the ultimate victors. So without further ado, the winners are …

IN ASSOCIATION WITH

 

1. Online Game of the Year: Angry Birds Chrome

Runners up: LEGO Star Wars III: the Clone Wars and Minecraft

Winner: Angry Birds
Created by: Rovio
Team size: Two employees full-time, three part-time. Technical consultation from Google/Chrome engineers, mostly on using their tool-chain.
Length of project: Three months

.net: How did the project come about?
Serdar Soganci, web games manager at Rovio: This was the first web game project that Rovio released so we had to tackle some new issues in terms of both design and tech. Angry Birds was originally designed for touchscreen mobile devices, so moving it to the computer screen required some different thinking. We also needed to make sure we could provide a good user experience to as many users as possible. As Angry Birds relies on high FPS values to provide a smooth sensation, we spent most of our time improving the performance.

.net: What tools and technologies did you use?
SS:
"Angry Birds Chrome" is an HTML5 game developed by using GoogleWebToolkit and AppEngine. We also used Box2D and Forplay-PlayN open source libraries. Forplay allowed us to utilise WebGL as well.


2. Web App of the Year: GitHub

Runners up: Stackoverflow and Wunderlist

Winner: Github
GitHub is a collaborative coding project that more than one-million people use to host over three-million coding repositories. The site provides social networking functionality such as feeds, followers and the network graph that displays how developers work on their versions of a repository.

The software that runs GitHub was written using Ruby on Rails and Erlang, and GitHub has quickly become a vital tool in the modern web developer’s arsenal.

This year GitHub became the most popular open source forge, surpassing Sourceforge, Google Code and Microsoft's CodePlex. The team also rolled out GitHub for Mac, GitHub Enterprise, a self-hosted GitHub instance that companies can deploy internally, and shared Hubot, a Campfire bot.


3. Best API Use: Instagram

Runners up: Gowalla and YouTube Instant

Winner: Instagram
Developed by Kevin Systrom and Mike Krieger and launched in October 2010, Instagram enables iPhone (and iPad and iPod Touch) users to apply cool filters to their photos. It's a homage to both the Kodak Instamatic and Polaroid cameras and confines photos into a square shape.

In 2011 Instagram became a genuine social phenomenon and now has passed 13million users, all without having its own website! Version 2.0, released in September, includes live filters, instant tilt shift, four new filters, high resolution photos, optional borders and one-click rotation.


4. Podcast of the Year: The Big Web Show

Runners up: CSS-Tricks and Nettuts+

Winner: The Big Web Show
Hosted by: Jeffrey Zeldman and Dan Benjamin
Recorded in: New York City and Austin, Texas
Subjects covered: The Big Web Show features special guests and topics such as web publishing, art direction, content strategy, typography, web technology, and more. It's everything web that matters

.net: What have you been doing this year?
Dan Benjamin:
Focusing on emerging talent, discussing the challenges facing aspiring designers, focusing on the business side of design.

A recent favourite episode is 5by5.tv/bigwebshow/55, where we talk to Marissa Christina to discuss her path as a web designer diagnosed with a debilitating vestibular disorder, and her blog Abledis.com, documenting living with a hidden disability.


5. Social Campaign of the Year: Jack Draws Anything

Runners up: IE6 Death and It Gets Better Project

Winner: Jack Draws Anything
Until the beginning of this month, six-year-old Jack Henderson from East Lothian drew pictures on request in return for donations to the Sick Kids Friends Foundation, a charity for the hospital his brother goes to.

Jack set up Jack Draws Anything with the help of his father, Ed, and completed 536 pictures over 231 days, using 314 pens, 162 crayons and 96 pencils on 2,144 sheets of paper. He is now 'hibernating' for the winter and has raised over £32,000 so far.

Jack's final drawing was a request from his dad for a rock band. Jack decided to do his favourite band, Queen, depicting them as rocks (see below).

The website has had more than 400,000 visits from 163 countries, with six-million views of the Facebook page and more than 6,000 fans.


6. Innovation of the Year: jQuery Mobile

Runners up: CSS3Pie and Google+

Winner: jQuery Mobile
It’s fair to say that 2011 was the year that mobile web development hit the mainstream, and this touch-optimised framework was an instant hit with developers, saving them buckets of time, while taking the pain out of mobile development.

In the Developer's Guide to Mobile Frameworks Jonathan Stark said: "jQuery Mobile is like jQuery UI for mobile. It's a widget library that converts semantic markup into a familiar, finger friendly format. It's built on top of jQuery and as such has best-in-class support across A, B, and C grade mobile browsers. It's a fairly young but very ambitious project that aims to create the best possible mobile web experience on the largest number of browser. That being the case, the total file size is a bit on the large size but it's a great choice if you're creating a mobile version of a public website."

Just a few days ago the team announced jQuery Mobile 1.0.


7. Open Source App of the Year: Modernizr 2.0

Runners up: Firefox and WordPress 3.2

Winner: Modernizr 2.0
What would we do without the open source movement? Pay a lot more money, that’s what! This award recognises the applications and their creators that make the OS movement so great. And this year the prize deservedly goes to Modernizr 2.

Modernizr, developed by Faruk Ates, Paul Irish and Alex Sexton, is a small JavaScript library that detects the availability of native implementations for the ongoing HTML5 and CSS3 specifications. It tells you whether the current browser has implemented a given feature, enabling developers take advantage of new features, yet create a fallback in the browsers that lack support for that feature.

June this year saw the launch of Modernizr 2, taking the feature detection service to the next level. Detecting the availability of native implementations for next-generation web technologies has never been so sexy!


8. Mobile App of the Year: Reeder

Runners up: BBC News and Google+ for Android

Winner: Reeder
There’s more to mobile apps than throwing angry birds at green pigs. This award goes to the best and most useful application for mobile devices, as chosen by our judging panel.

Available for both iPhone and iPad, as well as the Mac, Reeder, developed by Silvio Rizzi, is an RSS client for users of Google Reader. It pulls in your latest news stories, presents them beautifully, and also enables you to send links to Instapaper, post to Twitter, and much more besides. You can also star your favourite articles to read later, and group your sources by topic. If you’ve never used it, check it out today!


9. Mobile Site of the Year: Facebook

Runners up: Engadget and Nike Better World

Winner: Facebook
Whether they're bespoke mobile sites or responsive designs, our the nominees in this category enabled visitors to their sites to enjoy their online experience, no matter how small their screen size.

This year our judges were blown away with Facebook’s mobile site, which has set a new benchmark in what can be achieved on smaller screens, with the use of open web technologies. The social networking continues to innovate on mobile, which is increasingly becoming its natural home.

Despite 2011 being the year Google+ launched, Facebook has gone from strength to strength and is reportedly about to launch its own phone in collaboration with HTC. Is there no stopping this social networking juggernaut?


10. Site of the Year: BeerCamp SXSW 2011

Sponsored by

Runners up: Activate and Sophie Hardach

Winner: BeerCamp SXSW 2011
Team size: 1

.net: What was the brief?
David DeSandro, frontend developer:
My team at nclud was planning an event at SXSW 2011. BeerCamp was a fun party that we throw for our fellow web designers and developers. We wanted the site to be a celebration of our community and be something that our peers would enjoy. We knew that we could tailor it to the early-adopter, tech-savvy demographic and leverage latest browser capabilities. Apart from making something fun and captivating, I was free to make whatever I wanted. This was a great opportunity to try something new and play around a bit. It took me about two or three weeks to make it happen.

.net: How did you build it?
DD:
I had an idea about a zoomable layout using CSS transforms. Like most of my projects, my development process began with iterating over several prototypes to see how feasible or compelling a concept might be. Midway through the project Nike Better World was released. This was the inspiration to use the scroll event to control the zoom.

You can learn more about the frontend development behind the site from the colophon I put together. I've also written a step-by-step tutorial to make your own zoomable user Interface for .net magazine, available in issue 216 and online (also check out my extended version, in which I cover more about the navigation and how to add CSS transitions to make an impressive interaction).


11. Redesign of the Year: Mailchimp

Sponsored by

Runners up: Gizmodo and YouTube Cosmic Panda

Winner: Mailchimp
Team size: Six, all in house (project manager, writer, two designers, two developers)

.net: What was the brief?
Mark DiCristina, marketing director: The entire brief from our CEO was "Make it pro." The challenge was to figure out how to do that while maintaining the integrity of the brand.

.net: How did you build the site?
MD: Our designers built reusable design structures, and our developers used them to create our own modular CSS ecosystem. We were tired of editing content through bloated WYSIWYG editors, so we switched to an open source static site compiler called Frank. Frank enabled us to improve productivity using HAML, SASS and our own Ruby helper methods. We manage content with our favourite text editors, and everything is kept in version control. To deploy, we run a script that exports the site as static HTML and minified CSS and JavaScript, and then syncs it to staging. From there, we check changes into Mercurial and push to production.

.net: How did you test the redesign?
MD: We didn't test it prior to launch, other than doing our best to make sure we wouldn't break anything. After launch, we made some changes to homepage to clarify the message and make it faster, and we've been making iterative changes ever since, based on user testing, data analysis and our own preferences.


12. Brilliant newcomer of the Year: Rob Hawkes

Sponsored by

Runners up: Harry Roberts and Lea Verou

Winner: Rob Hawkes
Job: Technical evangelist at Mozilla
Got into web design/development aged: 12 (13 years ago!)
Education: Self-taught, but also studied Interactive Media Production at Bournemouth University and got a First
Areas of expertise: Visual programming, HTML5 and the new JavaScript APIs

.net: What have you been working on this year?
RH:
Wow. I think a better question is what haven't I been working on this year! The past nine months feel like an absolute blur really, but there are a few major events and projects that occurred during 2011 that stand out for me. The first is that I somehow managed to write and get a book published by Apress. It's called Foundation HTML5 Canvas and it's a comprehensive guide on the 2D drawing technology that's now baked into all the major browsers. Writing a book is a great experience but I don't think I'll be doing it again in a hurry.

Another big event that happened this year is that I graduated with a First in my Interactive Media Production degree at Bournemouth University. The past three years of my life coming to a close has been a very weird feeling, but fortunately I already had a job lined up for after university which helped me move into the "real" world. It's that job which has been the biggest thing that has happened to me this year – somehow I managed to find myself working for Mozilla! I'm really chuffed about that and, although I've only been here two months, I'm itching to do some awesome stuff.

Aside from all of those events I've been working on two interesting projects, both related to my final year at university. One of them is the analysis of sentiment through Twitter, which ended up providing some really interesting results (who knew people liked kissing on a balcony so much?). The other is Rawkets, my HTML5 and WebSockets multiplayer space-shooter game.


13. Young designer of the Year: Janna Hagan

Sponsored by

Runners up: James Billingham and Lauren Thompson

Winner: Janna Hagan
Age: 20
Education: Attended Durham College in Oshawa, ON for Web Design & Development. Currently taking business

.net: What have you been working on this year?
JH: This summer I worked at a design agency called Mediashaker in Edmonton, AB. I’m also setting aside time to do freelancing, as well as start a personal project specifically for web design students. My proudest moment this year has been to be named on the list of "50 Awesome Portfolios from Female Designers and Illustrators".


14. Young developer of the Year: Paul Davis

Sponsored by

Runners up: Felix Krause and Garrett Bjerkhoel

Winner: Paul Adam Davis
Age: 20
Education: Self-taught, initially from Chris Coyier of css-tricks.com. Holds no qualifications in art, design or development.
Areas of expertise: HTML, CSS, JavaScript. jQuery and WordPress are the only frameworks PauI uses
 

.net: What have you been working on this year?
PD: This year, I have had the pleasure to do some very high exposure work for Sony Ericsson, but that was only a couple of weeks’ work. By a long shot, the largest piece of work I have done is build my own web app from scratch, Kodery. My proudest moment was when people I've never met or spoke to asked for invites to the service. It left me with a smile on my face for many days knowing others shared my problem with storing code centrally and liked my solution enough to want to use it. There can be no greater feeling for a developer.


15. Designer of the Year: Sarah Parmenter

Runners up: Meagan Fisher and Mike Kus

Winner: Sarah Parmenter
Education: Self-taught
Areas of expertise: iOS UI design, user interface design
 

.net: What have you been working on this year?
SP:
I've been working on two really amazing apps, almost exclusively for the last four months. One is really going to change the way people read on their iPads. It's just a shame a lot of the apps are so cool, they are under NDA for long periods of time, so I can't share my work online as much as I would like. I'm really proud of my work with 'Beyond the Shock' for the National Breast Cancer Foundation of America, this year. Its iPhone and iPad apps are directly helping women, all over the world, who suffer from breast cancer.


16. Developer of the Year: Paul Irish

Runners up: Lorna Mitchell and Matt Gifford

Winner: Paul Irish
Job: Chrome developer advocate, Google
Education: Bachelors degree in Technical Communication. Self-taught developer
Got into development aged: 14, maybe? I remember going to an IE4 developer preview event at my local cinema where I got free popcorn and MSFT swag and learned about DHTML. I then copy/paste-abused DHTML heavily, as we all did
First job: Cashier at Stop & Shop. I can still remember the codes for bananas (4011) and artichokes (4084)
Areas of expertise: HTML5 and emerging web tech. Robust cross-browser techniques

.net: What have you been working on this year?
PI:
I've released new, major versions of my biggest projects, HTML5 Boilerplate and Modernizr, along with our very large developer communities. I've also been teaching people how to be more effective with the Chrome DevTools. I've been curating polyfills, and excited to encourage smart practices when using new features.


17. Agency of the Year: Clearleft

Sponsored by

Runners up: Happy Cog and ZURB

Winner: Clearleft
The final award of Agency of the Year is the most hotly-contested category in web design. These agencies have all excelled with consistently groundbreaking work. But there can only be one winner.

This year, the Brighton-based user experience and web design agency hosted the popular events dConstruct, UX London and Ampersand as well as designing sites and apps for the likes of ITV and Channel 4. 2012 will be just as busy, with its UX London event penned in for April, featuring talks from 15 of the most influential UX practitioners from around the world.

Clearleft continues to drive web design in the right direction, and for that our judges crown it Agency of the Year.

And that's it for this year. Congratulations to all the winners, thanks to the judges and last but not least to you for voting!

Roll on 2012!

Log in to Creative Bloq with your preferred social network to comment

OR

Log in with your Creative Bloq account

site stat collection