C40 Cities

2012

A front-end development on top of Ruby on Rails project

for The Barbarian Group

The C40 Cities project was the complete re-launch of the C40 Cities Inititive (one of the Bloomberg Foundation’s programs) website. I was primarily responsibile for front-end developement on top of the Ruby on Rails back end.

Responsive Design

C40 was one of the first responsive websites at the Barbarian Group. Videos and the dynamically generated infographics are viewable across a wide range of screen sizes. Together with the designer on the project, we made sure the experience of the site was equally engaging for users visiting the site on their phones. As such, videos and images were optimized for mobile devices, as well as the size of the typography [1].

Dynamic Infographics

Instead of using static images (and thus making the client wait for the turnaround on infographics whenever there was a change), I used Raphael.js [2] to generate infographics (per the design) from the statistics entered by the client into the CMS.

WebGl

I also contributed code for some UI elements for the 3D/WebGL infographic. It was a delicate balance betwen code that controlled DOM elements and code that controlled the 3D models.

Notes

  1. For the most part, images and videos were resized according to browser width using CSS or a plugin (for the videos). However for the slideshow, on smaller screens, images are not shrunk but re-centered within the “window” of the slideshow container.

  2. Why did I choose SVG over <canvas>? I made this decision because of support for IE 7 doesn’t support the <canvas> element at all. So while, SVG mark-up is uglier and slower to render, it was better than using non-dynamic static images (or worse figuring out how to tie Flash into a Rails backend) as a fallback.