Let’s face it. Those of us who consider ourselves to be adventurous frontend developers are pretty spoilt at the moment. Browsers are getting beefier and stocked full of all kinds of bells and whistles, and have new capabilities that most of us would never have imagined coming to the lowly browser a few years ago. Along with these new abilities, we have an audience who are more sophisticated and who expect and understand more complex or imaginative user interfaces. This all creates opportunities to really push the boundaries and create sites with user interfaces which can surprise and delight.
Sometimes this can mean something subtle, some crafty piece of genius which goes unnoticed but makes our experience better. Sometimes the result is as subtle as a mouthful of popping candy washed down with cherry cola.
Clever shizzle and demos
Its creator, Alexander Chen, works at Google Creative Labs and was behind the lovely Les Paul Google Doodle, also brought us a fabulous time-lapse visualisation of the NY subways system earlier in the year.
4. Windows Phone Demo
6. jQuery Mobile
(Disclaimer: I worked with Jake at the time he put this together … in his spare time … on the train. Freak!)
8. Cloud 9 IDE
Pusher is a hosted service which provides an API to power your real-time apps and services. A great site with lots of thoughtful documentation makes getting started simple.
Originally developed by some clever folks at New Bamboo, a small, but smart development shop in London, Pusher itself was built with Node when New Bamboo spotted a need for easy real-time communication to power all manner of web applications games and tools.
13. BBC homepage
14. BBC iPlayer
Ok, I admit it. I’m one of those web snobs who is a bit down on Facebook. But I can’t ignore the sophistication and the scale of the work that has gone into bringing the Facebook interface to life. It is rammed full of ‘real-time’ messages, notifications, chat features and goodness knows what other kinds of rich user interfaces which, while not aesthetically to my taste, have a huge impact on the web and its citizens.
Under the radar and hidden beauty
I have to confess that even though I’m a sucker for a shiny new visual effect or a crafty piece of library code (that second one is what really gets the girls), what I enjoy the most is subtlety, craft and a thoughtful use of technology. These last few examples fall into that camp.
Github is full to the brim with interesting user interactions and thoughtful attention to detail. From the navigable code tree, which smoothly swooshes you through the directories in a project while taking care of the page address so that your location is correctly bookmark-able, to the in-line code editor which enables code commits from the browser (powered by the Cloud 9 editor, as it happens). Look-ahead searching, stunning popup menus and interface elements, a code network visualiser built in Canvas, the list goes on and on. Bravo Github. Bravo.
17. Google Doodle
18. Nike Better World
19. Mobile Beetle
20. Twitter mobile site
The fact that there are so many good Twitter clients for mobile devices means that many of us didn’t notice the rather excellent mobile-optimised web client that Twitter rolled out this year. The Twitter engineering team took many of the UI conventions of leading iPhone Twitter apps and recreated them in their own web framework. The result is a very impressive, app-like feeling in the browser on your smartphone. Android and iPhone do particularly well here. Lovely work.
…and that’s 20