Vax 2.0 Day 2: Vox <3 NPR

Friday, October 4th marked the first official hack day of Vax 2.0. Huzzah! Last month people began pitching their projects in a shared Google Doc, writing a few sentences about what they hope to accomplish and what kind of resources the project might need — designers, developers, etc. As Vax approached, we fleshed out project descriptions, and various Hired Guns joined projects they found compelling. Even once hacking began, people have hopped between groups.
NPR’s Tech Team Drops By

Continue reading…

Product Team All-hands 2013/ Return of Vax

It has been 7 months since all members of the product team descended upon Austin, Texas for our first hackathon. We are happy to report that many of the tools that were developed during our first Vax is still in use — like Beacon, Binder and Moxie. In fact, Moxie is being developed into a tool that’s going to take Ad Products at Vox to the next level, and Beacon is a core part of Product Team planning.

Our team leaders decided to attach Vax 2.0 to our 2013 Product Team All-hands gathering at our DC office.

Continue reading…

Guest post: Chartbeat, hacking on digital ad measurement with Vox Media

Our guest blogger today is Wes Chow, CTO at Chartbeat.

One of the reasons why I enjoy working at Chartbeat is that every six weeks we get to take a week to hack on anything we want, so long as the hack forces us to learn something new or partner with a teammate we don’t normally work with. It’s part of our culture of continuous improvement — we want to learn new ways of doing things and expose ourselves to outside ideas as often as possible.

Diving into Data

While Hack Weeks always tend to be fun, instructive, and impressively productive, things got really interesting last month when we were lucky enough to have a few Vox team members come and hack with us and our data for a few days.

Chartbeat recently applied our key metric, Engaged Time, to advertising , and have been tracking time ads spend in view for a few clients. The difference between Engaged Time on view and ad impressions is fundamental and significant. Viewers recall ads better when engagement is high, which more closely aligns with content quality and reading experience. As a content creator, why would you ever want to optimize for clicks?

Continue reading…

Vox Coffee Confessions Ep 1: Sharon Wong

I’m Sharon Wong, a designer at Vox Media and this is my coffee confession.

I am a coffee-addict, but only for the good, creamy, not-so-acidic liquid-gold kind. I never liked coffee until my barista friend showed me the glorious tastes of a cup of well-made coffee— and now I am ruined. I can only drink the best.

Where do you get your coffee? I rarely make coffee at home for the reason that I live and work near coffee shops that make to-die-for flat whites.

Continue reading…

Bigger, faster, leaner: The Verge 1.8 brings many improvements to its front page

Written by Brent Laverty, Steve McKinney, and Guillermo Esteves

Our recent front page redesign can trace many of its roots to the CES 2013 hub we launched in January to cover all the developments out of the show. We used the hub, more or less, as a testbed to experiment with some new front-page functionality which we would eventually roll into a refresh of the homepage proper. These new features included video integration for archived and live feeds, new interstitial hero slots for pinning big news and longform pieces, and new ways to present and contrast multiple StoryStreams. The additions yielded some great usage statistics, the most significant of which was a large spike in video views. Refreshing The Verge front page would prove to be a bigger challenge than creating a one-off hub for an event. The general look is really iconic, so it was vital that we avoid disrupting the lively newspaper spirit of it all.

Continue reading…

Re-inventing the Polybar

Written by Tyson Whiting, David Zhou & Jake Lear

When Polygon.com launched, the original design of the main navigation bar - nicknamed the Polybar - presented a unique challenge. After a number of design iterations, front-end prototypes and an 11th-hour consensus just before Polygon’s site launch, we settled on a simple bar with a dropdown menu that contained links to Polygon’s main hubs.

Among other things, the original Polybar included search, user login, and social links for Twitter, Facebook and YouTube.

As the site began to grow, we realized that this navigation was limited, and not easily expanded. The editorial team was creating a lot of great content that wasn’t being surfaced on the Polybar. For example, feature series like Human Angle and Polygon’s daily recap show, Speed Run, were difficult to find once they’d fallen off the homepage.

We suspected we could do better. And after investigating performance metrics in our analytics data for the Polybar, we knew we had to do better.


We had added Google Analytics event trackers to the Polybar shortly after launch. And as we accumulated data, trends supported our suspicions that the links in the dropdown nav were not performing the way we had hoped; fewer than 1% of users clicked any of the links in that dropdown. We attributed this to a couple of factors: the primary hub links were hidden from view unless the user hovered the site logo, and the links that we did offer accurately representing the breadth of content on the site.

In short, we weren’t making it easy for users to find content they wanted.

The Redesign

Our goals with the redesign were fairly straightforward: make it easier for users to find what they want, and provide a more robust interface for adding new content as needed. We needed a strong way to guide users through everything great Polygon has to offer as the site grows.

The challenge when you present more information to the user is to keep the experience both beautiful and functional. Additional content shouldn’t overwhelm, but needs to remain easily discoverable. To that end, we created a hover dropdown to push content to the forefront without making it feel like each menu is a can of sardines exploding at the seams.

As you can see we sketch all over the doors and walls of our little office. We kept these drawings up for most of the process; you never know when you need to look back and pull from the good parts of a bad sketch.

And there was a lot of sketching, as we worked to find the right organizational balance. It was a struggle to keep things from looking just like a standard dropdown — visual flotsam that savvy eyes have been trained to ignore. We wanted the Polybar dropdowns to act as starting points, miniature hubs that would sample of all the content that exists on Polygon. We landed on a aesthetic leaning on large thumbnails with high fidelity imagery, extending the UI found on our hub and article pages,.

In our recent article redesign, one seemingly minor addition that had a big impact was the social bar under the lead image. On each article, users have the opportunity to like Polygon on Facebook and follow Polygon on Twitter and Google Plus. These links previously existed in the main navigation, but they performed significantly better once added to the article page (to the tune of 10,000 new Twitter followers and 8,000 new Facebook likes). Because of this, we felt comfortable removing these links from the main navigation to free up real estate for more content.

Front End

From a front-end development standpoint, the new navigation is significantly more complex than the old one. Where the old nav was one of the simplest things on the site to make responsive, the new nav is one of the more complex features in terms of adjusting for different breakpoints.

Over the last year, Vox Product’s front end devs finalized our style guide for markup and stylesheets, based around SMACSS. In addition to crafting of markup and styles, this navigation project included a rewrite of everything in a new, less-bloated structure. In the initial buildout of Polygon, we used a lot of deep nesting in our SASS to create specific selectors. As a result, our final compiled CSS was much larger than necessary, including slow, overly specific selectors.

Here’s an especially heinous example of some of the styles from the old Polybar:

#nav_social {   float: right;   margin-right: 50px;  
  & > ul {     position: relative;     border: none;  
    & > li {       display: inline-block;       padding: 0 10px;       font-size: 16px;  
      &.fb {  
        .fb-like span, .fb-like iframe {           min-height: 20px;           min-width: 74px;         }  
        & > a {  
          &:before {             background: url(/images/polygon/sprites/icons.png) no-repeat -7px -108px;             content: "";             display: inline-block;             width: 22px;             height: 36px;             position: relative;             top: 10px;  
            @media             only screen and (-webkit-min-device-pixel-ratio: 2),             only screen and (   min--moz-device-pixel-ratio: 2),             only screen and (     -o-min-device-pixel-ratio: 2/1) {               background-image: url(/images/polygon/sprites/icons@2x.png);               background-size: 108px 1043px;             }           }         }       }     }   }

Our new best practices helps cut down on bloat and make our selectors more efficient. We define a module class name for the top level component, in this case “.m-site-nav,” where M stands for module and ‘site nav’ is the component name. From there, we build explicit classes for each item. This way, we don’t need to worry about nesting or selector depth getting out of control, and we use extends and includes to pull in other styles or functionality if need be.

In the following example you can see how explicit selectors let us do away with nasty nesting:

$m : '.m-site-nav';  
#{$m} {   @extend .clearfix;   @extend .-font-gotham;   position: relative;   text-transform: uppercase;   width: 100%;   z-index: 35;   height: $sticky_nav_height;   background: #fff;   border-bottom: 1px solid #CCC;   &.pinned {     position: fixed;     top: 0;   }   @media(max-width: $break_medium_small) {     position: static;   } }
  #{$m}__wrapper {   border: 1px solid #ddd;   border-width: 0 1px;   height: $sticky_nav_height; }
  #{$m}__loader {   @include image-replacement(30px, 30px, "/images/polygon/loader-small.gif");   height: 50px;   background-position: center center;   margin: 0 auto; }

Beyond this style refactor, the navigation redesign provided all the regular challenges that come with responsive features. We use percentage based widths, and drop items off at specific breakpoints. We actually duplicate markup for the mobile drawer-style menu, but since all content in the desktop version is lazy loaded, the performance impact and extra page weight is minimal.

Back End / Lazy Loading

Throughout the redesign process we were adamant that the new Polybar should not be any slower than the previous version. Extra content is good, but not at the cost of a more sluggish experience. After some experimentation, we decided that lazy-loading every dropdown at runtime was an easy and relatively robust way to reach that goal.

Lazy-loading is the practice of not loading an asset until it is needed (hence, the “lazy” descriptor). On Polygon, we already lazy load images - pictures down past the visible portion of the window are not loaded until they are scrolled into view.

The new Polybar takes a similar approach, not loading dropdowns until a user hovers over a menu item. This cuts down on the amount of data and markup going into the dropdown considerably. Though the fully loaded navigation would contain over thirty entries — each with its own set of images and text — lazy loading cuts that down to zero. Content is loaded into the dropdowns as needed. If a user never hovers over the Polybar, that additional content is never fetched.


The new Polybar has been in place for a relatively short amount of time, but we’ve already seen evidence of significantly more users interacting with the main navigation items. Our old navigation saw about 0.5% of users interacting with the dropdown, where now we have 14% of users doing some sort of interaction with the dropdown menus.

Additionally, we are able to surface much more of the great content that Polygon is producing, and our navigation has room to grow.

We’re still working out some of the kinks, but we hope that this new Polybar will carry the site for a long time to come, and help users find all the great content that Polygon offers.


What’s on your desk? - Episode 7: Brian Anderson, Software Engineer

Written by Brian Anderson, Software Engineer


I recently started working as a developer for Vox Media. I work remotely from the lovely city of Ames, Iowa – which in case you didn’t know, is the birthplace of the The Atanasoff–Berry computer, the first electronic digital computing device. (Don’t worry that was a TIL for me too). I’ve lived here for 7 years now, after moving from Silicon Valley in 2006. At that time my wife and I just had our first child and we were ready for a slower life and to experience tornadoes up close.

I spend most of my day sitting at my desk, and supporting the editorial team with quick fixes to Chorus. If you sent a nasty, hilarious, or hilariously-nasty email about our platform, chances are it gets assigned to me. The rage is slowly building…


Let’s start with the most important thing on my desk — coffee. I am pretty particular about it. The beans are locally roasted by Burgies Coffee, I grind and brew 32 ounces of it in a Chemex coffeemaker every morning. After 4 years of this, I’ve converted my wife into a coffee snob too! The funny thing is I used to make fun of elite coffee drinkers while pouring loads of creamer in my coffee then a few years ago, I worked with a guy who brought in the most marvelous coffee. A few weeks later I was hooked, and I just HAD to purchase my own setup.


Back to what is on my desk, I work on a 13“ MacBookAir (2013). The Air has a silly fast SSD, which reduces sleep/wake time and load time compared to regular hard drives. I also like the flexibility of grabbing the light-weight Air and heading down to a local coffee shop to get a fresh perspective (and fresh coffee). The battery lasts 10 hours, which is freakishly long—probably longer than my brain can focus on writing software.

A couple of years back I switched to using an Apple Magic Trackpad full time. The multitouch gestures come very natural to me.

I constantly have Chrome, Safari, Textmate and a handful of terminal windows open, and that’s not easy on the 13” screen of the Macbook Air. To supplement that, I have a simple Dell UltraSharp U2412 24” monitor.

I have a small light behind the monitor, to reduce the strain on my eyes from staring at the display all day. I bought a small desk lamp ready to house my programmable LIFX Kickstarter-backed LED I am desperately waiting for. Eight months of delay seems to be normal for ambitious Kickstart projects, or so I tell myself. I plan on using the LIFX to light my office with the colors on the most recent animated gif in our Campfire room, soothes the eyes and the humor bone.

I try to drink enough water to balance out all the coffee I drink; so I put an empty cup on my desk. The desk itself is an old Ikea desk paired with an old Staples office chair. Neither are all that great. The older my body gets, the more I contemplate getting something nicer. Possible building a custom standing desk from old schoolhouse doors, or recycled barn lumber. Sometimes I sit on a yoga ball because people say it would help my flabby core – I haven’t seen any improvement.


On the way to get coffee, I often end up waiting for the train.

I usually listen to dance, house, or electronic music while I am working. I like music that I am not tempted to sing along to and provides upbeat, driving tracks. Soundcloud consistently has the best remixes and mash-up music. At least once a day, I listen to one of the monthly Funky House London mixes.

To get those happy songs into my ear-holes I am currently using a pair of Bose On-Ear headphones. They seem to provide a nice mix of noise isolation (from my 5 & 7 year old boys) and breathability for my overly-sweaty ears. Personal confession: sometimes I find myself sitting for an hour, or more, with the headphones on without music playing, which is really embarrassing. I think this is because I’ve played through an hour long mix and I don’t realize that the track stopped. (Or possibly, I paused the music to watch some random youtube video).


I have a boring iPhone, that I use to tweet, take pictures, and listen to podcasts. Excluding conversations with my mom, I’ve used about 3.52 voice-minutes this year. I am ready for something new. My apple fanboyism is fading, so maybe this is the year to get an Android device. Though I can’t get over the laggy-UI and those horrible pentile displays.

Somewhere in my house is my retina iPad 3, though I suspect my kids have taken it over for Minecrafting. To help manage the various cords for my devices I have a Blue Lounge Sumo preventing things from sliding behind my desk.

I’ve tried so, so, hard to be a digital-only note taker, but nothing beats the ability to scribble, doodle and take notes on paper. I’ve taken a good amount of notes over the last four years, as I returned to school for a Computer Science degree from Iowa State. It is hard to beat the speed and flexibility of paper. I’ve even dabbled with those ridiculous digitizing pens – they are a joke.

I use a Pilot Birdy Mini ballpoint pen and Field Notes Night Sky Edition. Field Notes lets you feel hip, old-timey, and small-business friendly all in one tiny doodle-inducing useful package. I have a bad habit of cruising Jet Pens, looking eye-catching writing tools. I don’t remember how I got into this horrible habit of mindlessly browsing Jetpens, but I am powerless to their monthly newsletter and always end up ordering tiny Japanese pens. Without a doubt, my favorite pen of all time is the Zebra Sarasa Push Clip Gel Ink Pen - 0.4 mm. You can spend a lot more money on a pen, but nothing else places ink more consistently on the paper than this workhorse.

I have a collection of classic computer science textbooks that I am slowly (very very slowly) trying to make my way through. Fundamental Algorithms, by Donald Knuth, is a wonderful text that details the art of creating beautiful algorithms. I believe writing software is an art form where the developer is a craftsman sculpting the ideal solution. The other book is the Dragon book on compilers has come highly recommended. Sadly, I haven’t cracked it open yet. I can’t tell if I actually enjoy reading these types of books or if I just enjoy thinking about reading the books. Maybe I’ll write a follow up post in a couple years and let you know I’ve finish either of these.

Also, I have a fun little radiometer that spins when it is in the sunlight. I am a huge sucker for gadgets, I think it is from trolling the electronic surplus stores that peppered the silicon valley in the late 80’s. Middle School science fairs were a lot of fun where I grew up, it was the golden era of hobbyist-built computers and pvc-plastic based robotic arms. All the dads, with their killer mustaches, giant glasses and plaid shirts competed to out-nerd their children’s classmates’ dads. I guess my son’s science fairs projects will be GMO gene-sequence soy and rhubarb hybrids: rhuhoy!

I work in one of our spare bedrooms, and get to look out my window and admire the wonderful Iowa flora. Sometimes I get to see fox, deer, rabbits, drunk Iowa State students (or professors) and neighborhood children running around back there.

And before you ask: you should also own two grills! It is amazing how resourceful they can be. For instance you can have one rust out, leak gas and be overrun with field mice and still prepare a nice dinner for your family on the other.



There are a plethora of fantastic, web focused conferences out there, but this week, I’m at the 40th annual SIGGRAPH convention.

For those unfamiliar with SIGGRAPH, it is an interdisciplinary conference sponsored by the Association for Computing Machinery, largely focusing on the broad field of computer graphics. This covers everything from Pixar’s computer animated films to low-level GPU programming for Subspace Fluid Re-simulation.

Continue reading…
Older Page 3 of 8 Newer

Home of the Vox Media product team. We help make SB Nation, The Verge, Polygon, Curbed, Eater, Racked, and Vox.com.

Follow us on Twitter


view all


    view all

      Vox Product Stats

      • 0Verticals Launched
      • 0Communities
      • 0Open source repos
      • 0Comments in the Last 24 Hours
      • 0Git Commits to Chorus
      • 0Product Team Members
      Log In Sign Up

      Log In Sign Up

      Forgot password?

      We'll email you a reset link.

      If you signed up using a 3rd party account like Facebook or Twitter, please login with it instead.

      Forgot password?

      Try another email?

      Almost done,

      By becoming a registered user, you are also agreeing to our Terms and confirming that you have read our Privacy Policy.



      Choose an available username to complete sign up.

      In order to provide our users with a better overall experience, we ask for more information from Facebook when using it to login so that we can learn more about our audience and provide you with the best possible experience. We do not store specific user data and the sharing of it is not required to login with Facebook.