Harvard Magazine

Harvard Magazine brings to life the work of students, faculty and alumni and delivers the latest university news to over 360,000 readers around the world. We were brought on board to design and build a tablet and phone version of the publication with the goals of better serving the lifestyle needs of these on-the-go readers and opening up new advertising and revenue channels. And we of course also needed to integrate with an existing CMS and editorial workflow.

With these goals in mind, we set about creating a powerful web-app, one that could support a fantastic reading experience and allow Harvard Magazine the ability to easily explore multiple business, paywall and registration models.

Crafted For Readers

The web app we made combines the elegance and readability of the best print design with the enhanced reading features of a device-native app. These features include slide-out navigation, font size control, the ability to save any article to a custom reading list and dynamic pagination.

Built For Anywhere, Anytime

We knew that our very busy group of highly mobile readers couldn’t always depend on having a solid Internet connection. So we made sure to bake in the ability to save an article, an entire issue or a reading list for offline consumption.

All Screens Welcome

We made darn sure that the magazine looks and performs wonderfully on just about all mobile device types and screen sizes, from phones to phablets and tablets.

Intelligent, Personalized Recommendations

Not only can readers assemble articles one-by-one into custom reading lists, they can generate custom versions of the magazine by sharing their interests, graduating class or even house. These custom magazines are born of both current and archived content.

Easy Integration

The idea was to avoid disrupting the existing editorial workflow of the Harvard Magazine team, so we used their existing Drupal CMS and developed custom modules that cleaned and updated the data and markup for compatibility with the new web app. We then extended Drupal’s Services and ImageCache modules to create a custom web service layer that uses JSON, including Base64 encoding of images, to communicate with the front end. We also tied into Drupal’s user and role management capabilities so that web app users and sponsors could all be managed from a central interface.

We built the front-end on the Knockout framework and leveraged offline storage APIs used in modern browsers to allow for caching of articles and issues. And we took advantage of SASS for extending CSS and a custom icon font to enable quicker loading. Finally, we integrated with third party advertising and analytics platforms, Cybersource’s payment gateway, and Harvard University’s alumni authentication system.