[How it was made] The Verge's OS-responsive exploration of "Fanboys"

Each Fanboy is like a snowflake, no two alike, says The Verge’s excellent story this week by Lessley Anderson, though each is as passionate as the snow is cold. The story’s crisp design has a nifty twist: the piece responds not only to device and browser size, but to the user’s OS. The ultimate fanboy nod.
Lead designer James Chae and developer Guillermo Esteves answered some of SND’s questions about the story, The Verge and longform storytelling.
Did the story hit a nerve? So far it has logged more than 800 comments only a day after it went live.
SND: The OS-sensitive design is a really cool extension of responsive thinking — how did it come about?
James Chae: This was an idea that was presented to us by our editor-in-chief, Joshua Topolsky. We had done multiple layouts before, like this Ghosthunting piece (also written by Lessley Anderson). However, we had never attempted three different layouts. Initially, we were thinking of offering the option to choose a layout based on your preference. That was when Guillermo stepped and came up with the brilliant idea to serve up different layouts based on the user agent.
At Vox, we pride ourselves in knowing our audience and having vocal readers. That was why we put some much effort into this particular piece. We knew that this story was something only we could write as techworld natives.
Guillermo Esteves: Since this particular piece was about “Fanboys,” I suggested to James that instead of being able to toggle layouts with a button, we simply detect the reader’s platform and style it accordingly. I felt that styling the piece after the reader’s platform was a reflection of the “fanboy” mentality of seeing what they want to see and wanting validation for their choice of platform. We also felt it was important to not even mention the fact that we had multiple designs, and just let the readers figure it out in the comments. This also simplified the work a little bit, since we wouldn’t have to worry about making every layout work perfectly in every platform.
SND: What were the challenges of designing this way?
JC: Obviously, designing three fully responsive layouts was a lot of work. During the design process we were constantly checking our various devices to make sure our UI analogies were correct. On that note, we definitely debated a lot on what design devices to use. For example, for blockquotes we initially started out referencing popup alerts. However, they strongly conflicted with how a blockquote is read. That’s what drove us to the copy / paste UI. Again, Guillermo brought his keen eye for detail and suggested morphing the handles into quotes.
GE: From a technical point of view, the biggest challenge was simply the volume of work, since this required designing and building three different responsive layouts over the course of a week, and making sure each of them was as good as possible in different devices and browsers for each platform.
SND: The overall look and feel of the package has that dynamic tech look, but is also a calm reading experience — what was your thinking about what it looks like and how the story behaves?
JC: One thing I’m proud of is that our feature designs have a lot of respect for the text column. Our designs used to be more scattered and we’ve worked hard to exercise some restraint. Chromeless or fullscreen features are a challenge because you need to really capture the readers attention and time. If you create the right mood and encourage readers to actually read, they will stay.
For this piece, we knew we had to trick the readers by mimicking the lock screens of the different platforms. Once we established that, then we could just go about or normal approach of composing the story in a vibrant yet focused way.
SND: The Verge does some really inspiring longform work, tell us a little about the site’s process and how design fits in?
JC: Design is an integral part of the process at the Vox Media. We are involved very early on in the development of a story and we work very closely with the editorial and video teams to create a holistic experience. This partnership is something that we highly value. I think everyone at Vox understands that great things come from close collaboration. We are constantly collaborating with editors, developers, and our ad team. This piece was a perfect example of this. The editorial team trusted us to understand the story and carry out a vision that was pretty outrageous. We were also given license to make this a more powerful idea (different layouts based on user agent).
GE: Our Product Team has worked hard to empower our editorial teams and feature designers, and we’re very proud of the suite of tools we’ve developed in Chorus, which affords us the flexibility to build custom editorial features like this very easily.
SND: Longform is reaching — or maybe has already reached — buzzword status with a lot of investment in this type of storytelling, what do you think about this trend?
JC: I have a long love affair with magazines from a design and editorial standpoint. I prefer to read things at the length and depth found on our sites and in magazines. So, in this sense I’m really happy to see a growing place for this kind of writing on the internet. I know longform is a controversial word, but I think it’s a good thing. At the end of the day, if people investing in longform creates more great writing, then I’m for it, whatever you call it.
In regards to our work, I just find it slightly limiting. This isn’t just about writing a long article — it’s about leveraging technology, design and device capabilities to create a deeply engaging experience.