In-Depth: The Flying Peanut

The Flying Peanut

It’s no secret that design and constraints go hand-in-hand – often great work is born of having to work within the constraints that are put on us. Budgets, timetables, legal requirements are all parts of being a working designer. But sometimes client work comes with constraints that are practical from a business perspective, but can mean less investment exploring an idea that is really interesting, and it’s not always FUN to work within those kinds of uber-practical constraints. So what happens when there is just one (rather large) constraint, no client, and free reign to design and develop anything within that constraint?

In late 2010, I was sitting in an airport terminal reading a magazine. From the glossy cover photo, to the high quality photography, to the diverse and creative typography, it was everything a good print magazine should be. Each article grabbed your attention in a new way, but there was still a visual theme that connected one article to the next.

Later in the next week, I went to the website of that magazine in an attempt to remember something from the issue, and was dismayed (to say the least) to find what was basically the magazine content splattered haphazardly across the screen, in what was probably a standard WordPress template. How was it that a for-profit magazine with a full editorial design staff could have such a great looking magazine and such a terrible looking website?

Leading surf magazine websites
A couple of columns under a slideshow seems to be the surf magazine de facto standard.

This was the genesis of the idea to build an html magazine: a responsive website that focused on typography, interesting layouts, and high quality photography. There wasn’t much of that available those days: web fonts were in their infancy, Flipboard was only a few months old, the iPhone 4 was brand new. I didn’t even own an iPad at the time, which at the time I figured might be the biggest target device for this kind of thing. I didn’t even know what I wanted to write a magazine about, but I knew that I wanted to explore the possibilities of telling stories with editorial design on the web.

Fast forward to late 2012, when I’d moved to San Diego and been viciously bitten by the surfing bug. I now had a topic, and launched the first version of The Flying Peanut: A Drupal-powered site, featuring side-scrolling navigation on any device larger than a phone, and continuous reading from one article to the next. It was, for the most part, not good, but it did teach me a ton. There was too much focus on making it ‘work’ like a magazine (side-scrolling) and not enough focus on making it FEEL like a magazine. The layouts were also incredibly complex nests of media queries, that frequently broke based on strange line lengths.

This, however, proved to be the biggest takeaway from the first iteration: each page, no matter the orientation, was a block of text and a related photograph. That information architecture ‘a ha!’ moment led to the structure of version 2. Powered this time by Concrete5, the current version of The Flying Peanut setup pages as collections of blocks, each with text and a photo, and the ability to design custom layouts for each block. By removing the side-scrolling interaction, each block now only had to focus on the vertical dimension of laying out the photo with the text. It also meant that it was much easier to create new layouts if a given article demanded it, and then reuse those layouts in the future. It continues to be a place where I can challenge the biggest constraint of creating a web-based magazine: the web itself. Bandwidth, story-to-story navigation, great editorial design: small improvements in these areas can drastically change the UX of the entire site. It’s a constant struggle to deliver big stories at small cost to users.

The Flying Peanut editing interface
The current editing interface for The Flying Peanut shows the root of the information architecture: a block with its related image and optional caption, handled by the Concrete5 interface.

The space, however, is ripe for people investing in the web. The top surf magazines all have terrible, truly awful websites. Even those with great print design seem to rest far, far too heavily on the laurels of minimalism for their websites. While I may not make the rapid progress I could if this was my full time job, or if I wasn’t the sole writer/photographer/designer/developer, the investment in telling stories in visually interesting ways will hopefully pave the way for more focus on editorial design in the space.

(I’d be remiss if I didn’t mention Surfing Magazine’s recent full-screen features as pushing in exactly the direction I’d like to see and do more of).

So what’s next for The Flying Peanut? 2016 brings a continued exploration further into the same themes that brought it to life. A switch to Jekyll, the static site generator, for easier deployment of articles, easier creation of new layouts with increased focus on editorial design, and faster page loads (which means more photos, which means happier users). In a twist, it also includes a total rebrand, along with capping out the year with a long-planned print piece to accompany it.

The Flying Peanut full screen slideshow
More bandwidth means more options like full screen image galleries, which is the kind of user experience building this thing was always about.