clock menu more-arrow no yes mobile

Filed under:

Web design as troll: how The Verge Fanboys piece taunted the internet

By drchae

How do you speak to a group of extremely passionate people? What kind of design would speak to them? When Joshua Topolsky approached us about creating three different layouts in the style of three mobile UI’s we were initially torn. Something about mimicking the UI of phones didn’t feel original. But more importantly, it presented a problem of presentation. There was an inherent a UX problem to solve: do you offer presentation options or do you trick the user? We decided to troll.

Speaking to our audience

Guillermo Esteves, the developer on this project, had the explicit insight of serving up specific layouts based on the visitor’s user agent. A user on a Mac would see the world through the eyes of iOS. On an Android device you’d see the world through Holo. In the spirit of the piece, we all decided to stay mum about this aspect of the experience, and just let the fanboys argue. What allowed us to risk such a move was a strong understanding of our audience. That is a major point of pride at Vox. We have passionate readers and we do our best to engage and delight them in a language familiar to them.

The Challenges

The challenge of this build was two-fold. First, we had to design 3 fully-responsive feature layouts. This meant looking at the three separate UIs, extracting the unique visual design elements and applying them to the parts that make up a feature layout (lede cover, body text, pull quotes, blockquotes, and photography).

We started looking at UI conventions on Windows phones, my Nexus 4, and in iOS 7. Then we decided how to translate elements into layout. The tweets became message bubbles; the PQs would be more generic tiles or app icons. We mixed the various app icons and used them as graphic elements.

The second challenge of this project was to complete it in a week and a half. We’re used to fast turn around times at Vox, but this was made more demanding because Guillermo and I had just spent a grueling week at CES in Las Vegas.

Mixing metaphors

The biggest and most thoughtful design process was selecting which UI elements to mimic and how to retrofit them to function like they might within in a passage of text. The PQs, headers, even the tweets were pretty obvious. The blockquote was the most challenging.

A blockquote is inherently a tricky thing: it’s function is two-fold, as it has to reference as well as quote. We played with using dialog boxes as a UI element, but since a blockquote has no inherent call to action, this seemed off. We tried just a regular popup alert, but that felt context-less and generic.

Josh Topolsky suggested the idea of using the copy/paste interface, and we knew we were halfway there. A lot of sites are beginning to adopt this single quote convention. I’m not normally a fan of this, as it turns a grammatical element into a decorative graphic element, but when applied in our layout it made sense. It now felt like we were translating the elements of the UI correctly without being too heavy-handed.

Making it responsive

Chorus has a "chromeless" layout option that provides us with an empty canvas to work with, consisting of little more than basic navigation, comments, and a few default styles. This gave us a good starting point in which to build the feature, writing markup and responsive styles for each of the three different designs, which was in itself our biggest challenge given the short timeframe we had to work with. In this regard our decision to not offer an explicit option to toggle designs helped us, since we didn’t have to worry about getting each of the designs perfect in every platform, and instead focused on making them as good as possible on their respective platform. This simplified our work because it meant that we didn’t have to worry about implementing each platform’s fonts on the others (which might not even have been possible, due to licensing limitations), and greatly reduced the amount of testing we needed to do on a variety of devices.

The reception

On publish day we were all ready to go, and were anxious to see the response. Twitter started blowing up immediately; the fanboys were ready to respond, but people were definitely confused. Why was this piece in iOS? We were right to mimic the lock screens, as people were a bit set off by them.

It took about an hour and a half for someone to catch on that we had separate layouts. But the fascination, surprise, frustration, and delight did not stop after this discovery; I think people also got a kick out of trying the layout on different devices. Guillermo did a great job in crunching the layout down so that the mobile experience was extremely smooth and elegant.

Some comments:

someone who didn’t like the design

guy who opened it up in terminal

1065 total comments

Risk and reward

This was an ambitious design and build. We spent a lot of effort in pulling off an elaborate trick. Sure, we could have achieved something similar by using one layout that mixed all three UI’s, but we knew that wouldn’t complete the story, since the whole point was to see the world through the eyes of a fanboy.

We were ambitious with this project because we were confident we had the design and technical chops to pull it off. More importantly, we felt we understood our audience (fanboy or not) well-enough to see that this effort would enhance their experience with the piece, and the conversation surrounding it. At Vox, we believe that design is content. In this case, were willing to risk infuriating our own loyal readers to underscore the Fanboy experience.

Sometimes, trolling makes for great content.

The Latest