0

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…
0

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…
0

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…
0

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.

Analytics

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.

Success?

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.

0

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

Written by Brian Anderson, Software Engineer

image

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…

image

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.

image

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.

image

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).

image

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.

0

Going to SIGGRAPH

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…
0

The lesson of Valiocon

Last month, around 10 Vox designers descended upon San Diego to participate in a design conference called Valiocon. Our mission was three-fold:

  • Go to a cool conference. Learn new things. Connect with new people.
  • Give a talk, on the designing of our newest Vox vertical, Polygon.com. Do Vox proud.
  • Go forth and bond with thy team.


The Conference

Valiocon, (billed as the FUN design conference) is set in beautiful San Diego at the Catamaran Resort. The lineup of speakers ranged from letterpress experts to designers-turned-surfing-acai-smoothie-evangelists to talks on magazine publishing for web designers - bookended by good food, and time in the Southern California sun June Gloom. All-in-all, an engaging and well-balanced event.


Our Talk

Team Polygon Design gave a 45 minute presentation called Polygon: Design at Scale - where we mapped out our process… touching on typography decisions, moodboard development, and responsive design. If you read this blog regularly, we’ve been over much of this stuff here, on the product blog. But *do* take a gander at the deck we put together if you’d like more!



The Bond

While it was awesome to share our process with other folks in the design community, and the talks were thought-provoking - it turned out the bonding was the best part of this excursion. Though we had hoped (even planned) for some solid team-building time, we may not have been prepared for what a week together would come to mean. Over tacos, and beer, and the dancing (oh my god the dancing), and some potentially misguided late night swimming… some team fires started to re-ignite.

I’m sure I don’t have to explain to you what it feels like to make meaningful connections with other human beings - but I did want to underscore the value of this sort of thing.

We, as colleagues, were able to double-down on relationships. We shared laughs, stories, and generated a shockingly large number of new inside jokes. If you want to look at it from a company angle, we strengthened trust and goodwill amongst team members. It will - no doubt - leave a long-tail of increased interest in collaboration, and improved culture.

But there is more to it than that. When you step back and look at your life, and the decisions you make about where to spend your time, and what you spend your time doing… it’s nice to feel like you’re among kindred spirits. It’s nice when those kindred spirits turn out to be the people you work with.



0

Color Theory

Written by Ted Irvine, Design Director, and Sharon Wong, Lead Designer

You might notice a new green-toned Vox Product logo on this blog. We’re not celebrating Earth Day, St. Paddy’s Day, or Bruce Banner Day. We’re simply flying some new colors within the Vox Media family.

To accompany the launch of our corporate website, voxmedia.com, we’re rolling out our new branding system. Why bother implementing a new branding system, you ask? Well, the dirty secret is that to grow a media company it takes a talented set of folks with a diverse range of abilities, many of which do their work behind the scenes and out of the spotlight.

We have grown to three verticals, but the teams that build the properties, sell the advertising and develop brand stories have grown as well. As things have hit critical mass this year, we’ve needed to both formalize existing groups within Vox and create new ones that satisfy our organizational needs.

We wanted to provide these organizations with an identity that was unique and identifiable, yet still clearly a part of Vox Media. Our new system relies on the Vox brand mark and logotype to anchor each of these divisions — color becomes the main differentiator here. We decided to stay within the existing color conventions of the Vox mark and focus on tones within each color family.

With this is mind, we developed color explorations for each organization. We explored not only the conventions around branding and color theory but also chose the color family that best represents each organization’s personality and service.

Vox Advertising

Blue was ultimately chosen for the sense of authority, success and security that the color family evokes. Those values represent what our sales and ad operations folks at Vox Media are all ‘bout - the business side of Vox. We swear it had nothing to do with suits.

Vox Product

Green was chosen for the sense of life it represents and is also reflective of the essence of our Product culture and what we create. Ultimately, this is the greenhouse where our products are conceived, produced, developed, modified and iterated on. Everything we do is homegrown in our laboratory for the fresh consumption of our audiences, editorial and advertising folks.

Vox Creative

Bright pinks and magentas were chosen for the sense of imagination and innovation that those colors can evoke. It is a good representation for the in-house group of creative designers, developers, directors and storytellers that help make our ads and our brands beautiful, compelling and unique.

Vox Studios

Reds were chosen for the feelings of passion, vibrancy and punch that this color family is renowned for, representing the dynamic folks who produce highly engaging video content for our passionate audiences.

With all that being said and done - we can’t wait til we roll out the colored jumpsuits so everyone is clearly identified. I guess we know who gets a red shirt.

Older Page 2 of 7 Newer

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

Follow us on Twitter

Flickr

view all

    Dribbble

    view all

      Vox Product Stats

      • 0Verticals Launched
      • 0Communties
      • 0Comments in the Last 24 Hours
      • 0Git Commits to Chorus
      • 0Product Team Members
      X
      Log In Sign Up

      forgot?
      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,

      Spinner

      Authenticating

      Great!

      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.