Popular Science Chrome App

Popular Science


Front-End Developer


Design Director: Jeff Anzulewicz
Director of Technology: Brian Jeremy Kupetz
Web Developer: Matthew Kosoy


Popular Science decided to get a presence in the Chrome Web Store by releasing one of their issues in an app form. Aside from big full-screen images and HTML5 video, they wanted a level of interactivity that would closely mimic an app on the iPad.

Popular Science Cover

The Challenge

This project involved a lot of Javascript that I was not familiar with at the time, and I leaned heavily on a more experienced developer for their expertise. Some of the details that don't come through from the still images:

  • A lot of the articles would animate in with a video, and then transition smoothly into a still image.
  • Users could use their keyboard's left/right keys to navigate articles, while also being able to scroll up and down to read the article and trigger animations.
  • Pressing spacebar at any time would bring up a table of contents, presented in a "coverflow" view where they could navigate through the articles. Each article was also represented by a bar which would be a different height depending on the length of the article (this was dynamic).
  • Double-clicking to hide all the content and showcase just the images on an article.
Chrome App Store
The Chrome App Store, with the Popular Science Magazine under "New & Noteworthy"
Chrome App Store Detail
Prompting the users.
The table of contents/navigation that could be brought up at any time, letting users easily navigate through the magazine to any article.
One of the articles
One of the articles

Solving the problem

The project required a lot of collaboration with the designers because not all of the interactions could be conveyed easily in written form. Rules on how the social sharing aspects would work to link users into a Chrome app, embedding video using proper codecs for Chrome, and even understanding how a user would use their mouse vs their keyboard to read the magazine. I asked a lot of questions when needed to ensure the final product matched what was originally envisioned.