Advertising on the Internet is often considered a necessary evil, but at Vox Media we believe that advertising can be as good as an experience for readers as our content - engaging, seamless, and beautiful. The Interactive Advertising Bureau (IAB) has struggled to keep pace with the types of experiences available to both readers and brands, so we decided to take matters into our own hands.
The ad products we build in-house are far superior to other high-impact units that can be found on the Internet. We draw inspiration from gorgeous full-page magazine ads—well-designed, elegant, and a cohesive part of the experience of visiting one of our sites. What we leave out matters as much as what we include: these products never automatically play video or audio, and they are integrated on the page seamlessly, never covering up or blocking our great content.
At Vox Media, we are passionate about our advertising the same way we are passionate about all of our media properties. Just like SBNation,The Verge, and Polygon, Advertising Products has its own cross-functional team of developers and designers on our Product team, and this team has built some pretty great ads for some pretty great brands. Each has challenged us to design great interactions within front-end responsive constraints.
EVE Online came to us with an opportunity to build some custom advertising for the launch of their newest expansion, EVE Odyssey. They wanted to share their game trailer and showcase their awesome imagery for the expansion pack, especially the spaceship you can see in on their site. We have a new ad product we are rolling out called the Fishtank that we thought would be perfect for this use case.
There are some lovely details to this advertisement, from a subtle zoom that indicates traveling through space to the clouds that drift across the screen to give a sense of depth. Ads like this perform extremely well, and are fun to build given the great assets video game companies share with us.
Samsung Galaxy S4
Samsung came to us with an opportunity to promote their new Galaxy S4 which has many interesting features, such as the large screen, the camera, and the ability to navigate without having to touch the phone.
Building this was quite a technical challenge. There is a cool animation on each click that gives a sense of depth; our designers and developers had to come together to create both it and the moving bokeh in the background.
Oftentimes our editorial teams will come up with a great series that a brand wants to be aligned with. The Polygon crew did exactly that, building a series called “Human Angle”. This original series tells the stories about great games and the people that influence and are influenced by them. When Microsoft heard about this editorial series, they wanted to sponsor it, aligning their brand with our great Polygon content.
The great thing about the Human Angle fishtank is how much it feels like a Polygon experience, from the placement on the homepage to the styling to the great content. Our readers love this ad product because it collects great content for them and Microsoft loves this product because it aligns their brand with Polygon quality editorial - everyone wins!
Our Product Team is just getting started on these challenges, and we relish the opportunity to make advertising on the Internet better. If you’re interested in joining the good fight, we’re hiring!
Written by Guillermo Esteves, Front-End Engineer
Tuesday is normally a very special day for us at Vox: it’s our weekly team lunch, which we’ve come to lovingly call Bertuesdays. Originally, this was a weekly Bertucci’s pizza delivery, but it has since expanded to include a variety of delicious food.
With last week falling on America’s birthday, our awesome office manager, Lauren Williams, treated us to an incredible Fourth of July Bertuesday, which included a variety of the best all-American food D.C. has to offer: half-smokes, burgers, chili, potato salad, and corn muffins from Ben’s Chili Bowl; ribs and chicken from Hill Country; fresh fruit and veggies; and fried chicken, crab cakes, baked beans, and mac & cheese made by Lauren herself.
She also went the extra mile and appropriately decorated our office in red, white and blue.
For dessert, senior accountant Katie Richman (who you may know as the mastermind behind Vox Baking) contributed delicious Lofthouse-style frosted sugar cookies. “They’re the homemade version of the big soft frosted sugar cookies found at nearly every grocery store,” Katie said, without the “unpronounceable mystery ingredients.”
All in all, it was a pretty fun day for our team, even for those of us who weren’t born in the United States, such as yours truly, seen here with support manager Cory Williams (you can probably guess who’s who).
Of course, none of this would have been possible without Lauren’s hard work. Thanks, Lauren!
Do you want to come enjoy our Bertuesdays, and more importantly, build some really cool stuff? Come join us, we want you.
Here at Vox Product, our Campfire rooms are overflowing with team members sharing ideas, jokes, news and interesting websites. There was a ton of great discovery over the past few days, so please join us on a journey through our favorite internet things for the week of June 24, 2013.
Face to GIF: A site created by Horia Dragomir, Face to GIF allows anyone with a working camera on their computer to make an animated GIF without the difficulties of actually knowing how to do anything.
Here’s Polygon’s Support Manager, Cory Williams, having some fun with Polygon Designer Tyson Whiting.
No designers were hurt in the making of this GIF.
Here’s Senior Front-End Engineer Dan Chilton showing off his mad Zippo skills.
Nifty Modal Window Effects: The Verge’s front-end engineer, Guillermo Esteves, shared this gem on Wednesday. There are apparently endless ways to style your modals through CSS. Which one is your favorite?
Finally, here’s a magical GIF of a ton of Pokemon who look a lot alike.
See you next week for another edition of “Cool internet things we’ve discovered this week”!
The Polygon product team spent the last two months building a new article experience that utilizes PJAX, keyboard navigation, along with many other bells and whistles.
We’ll have a lot more on the Polygon article redesign in the next week or two, but for now, go ahead and check it out for yourself! There’s a write-up of what the article page offers at Polygon.
Vox Media is excited to announce that we have worked closely with Google to integrate Google+ into Chorus and across all of our properties — SB Nation, The Verge, and Polygon — in several different ways.
First, new users to any of our 300+ brands will be able to create a new account using Google+ to authenticate. This makes it quick, safe, and secure to sign-in and start interacting with the community. On both the iOS and Android apps for The Verge, users can also sign-up for an account using Google+ as an authentication option.
If you already have an account on one of our properties, you can easily associate your Google+ accounts with your existing Chorus account by visiting your Account Settings page.
Once you’re authenticated with Google+, no matter which Vox Media site you’re on, you will have the option to quickly share a story (including FanPosts, FanShots, and Forum Posts) with your circles of friends using Google+. Look for the Google+ Share button.
Finally, new users that sign up for an account on The Verge using Google+ authentication will get a special feature. If they’ve previously registered an Android device with Google, during the sign-up process on The Verge, they will be prompted to install The Verge’s Android app over-the-air with the click of a button. Pretty cool.
From the very beginning we have provided our users with choices about how they signup and sign-in to our sites by offering the ability to signup with OpenID, Yahoo and then Facebook. Adding Google+ is another high quality authentication option that we’re excited to introduce to the platform. We’ve been impressed by how Google+ is being developed not only as a destination but a broad communication layer across the Google ecosystem. This evolution of Google+ provides opportunities for strong integration with Chorus for an improved user experience across all our sites.
This is just the first wave of Google+ integration, and you can expect it to deepen over time.
We’re excited to have been invited by Google to participate in the Google+ Developer Sandbox at Google I/O, their annual developer conference in San Francisco. Along with a wide-range of other companies who have worked closely with Google, we’ll be showing developers what we’ve built and answering questions about how we approached our implementation. Stop by and say hello if you’re attending this year. Each day of the conference we’ll be highlighting the Google+ implementation of one of our properties - The Verge on Wednesday, SB Nation on Thursday and Polygon on Friday.
Vox Media is moving into a new office space in Washington DC, leaving behind a humble rowhouse in Dupont Circle (Editor’s note: you can catch glimpses of the space in episode 2 and episode 9 of Polygon’s Press Reset series).
The vast majority of the product team have had their Vox experience shaped by the time they’ve spent in the place we’re about to depart, and we asked our coworkers for their thoughts on the beloved office.
When reached for comment on the final days of the fabled workspace, Chief Product Officer Trei Brundrett mused, “can I just send you my tears?”
Senior front-end engineer Dan Chilton remarked, “I’m going to miss the ol’ girl. With her nooks and crannies; her yesteryear elegance and charm; her thin-walled unisex bathrooms. But then again, what do I care? I work from home!” Even all the way in Missouri, we can tell he truly cares.
"I’m definitely going to miss the current office," product manager Niv Shah added. "It had a lot of character."
Do you see the Fathead of our CEO, Jim Bankoff, on the wall above?
Trei fondly reminisced about “Tiger Room”, the original workspace for the product team when Vox Media relocated to the rowhouse in 2009.
"We called it the tiger room because there was no door, and so I ordered a bamboo-beaded curtain," Brundrett said. "I selected one with a white tiger because they are sports elegant."
Jokes aside, Tiger Room was where the product team developed SBNation.com, paving the way for several huge breakthroughs in the company’s history, including the launch of both The Verge and Polygon as new verticals to complement the flourishing sports network.
The original usage of the “Tiger Room” name back in 2009 during SBNation.com development sessions.
"It makes sense that our office is a townhouse because in so many ways it felt like home for those of us who worked here over the years," said product manager Chris Haines.
"It’s a beautiful building," remote designer Warren Schultheis opined. "The first time I visited, it seemed like the whole company could fit in the conference room."
When Vox moved in, there were only six employees on the product team. Four years later, there are 41. Who knows what the next four years will bring?
The process, which was hugely collaborative, included writers, designers and developers. “We have a flat organization, and we find that building great products absolutely requires cross-team collaboration,” he said.
An excerpt from a recent piece on SND.org featuring our Director of UX (and Vox old-timer), Ryan Gantz. Read the whole thing here.
At the old Verge offices, not all of us had desks— or chairs for that matter. I’m happy to report that in our new office, not only do we all have our own desks, the product team even has our own room!
On my desk, I have a monitor propped up by an empty hard drive box. Please excuse the tape, it didn’t quite make it back from CES in the best shape. I think it adds character.
Resting on my monitor is a Pokemon toy I got from McDonalds. Oshawatt the otter Pokemon is always smiling and it makes me happy. I know that a lot of the DC bros have bobbleheads. I have my little wobbly Oshawatt.
For my computer, I use a 13-inch MacBook Air propped up on a Rain Design Stand. I choose this computer because I’m more comfortable with the Mac operating system. I love the portability of the Air, and how fast the SSD is. It’s a great on-the-go machine. Not shown: a Lenovo Yoga 13-inch running Windows 8 for quality assurance work on The Verge.
My headphones are by V-Moda. I’ve been exclusively using V-Moda since 2007. I love all the different models of headphones they make. The one shown on my desk is the V-Moda M100s. I also have a pair of M80s with custom plates.
I charge all of my devices at work—including my special Pikachu edition Nintendo 3DS XL.
My iPhone 5 was stolen 3 days ago, so now I’m getting by with a loaner phone. Because of my line of work, I also have a Samsung SIII, a Blackberry Z10, a Nokia Lumia 920, and a Droid Razr M.
Being a journalism nerd, I’m really into my pens and notebooks. I have an Action Book that I use to manually track our editorial features and long term projects. I have a to-do style notebook from Muji that helps me with my day-to-day task tracking. I also have 2 Rhodia notebooks that I use to take meeting notes. I also use a Post-it system to enhance my Action Book. I love orange post-its and the special Shiba-Inu stickies from Muji. I love pens made by Sharpie. The ones with the silver caps are my favorite pens.
Also on my desk, I have a giant bottle of seltzer. At the new office, we treated ourselves to a seltzer machine because it was going to be a lot cheaper than the amount of canned seltzers we drank per month.
Because we just moved in, there is still a lot of potential for decorating my desk. My desk neighbor Scott Kellum and I are looking into purchasing a cat-a-day calendar to share. I’d love to get some posters or comic panels to tape up at my desk but I haven’t found anything amazing yet.
This week, the Vox Product team released a brand new video browser on Polygon. Response has been positive thus far, and I reached out to some of our Polygon team members to learn a bit more about the effort and process from design to development to testing for this great new feature. I asked developer Jake Lear, support manager Cory Williams, and designer Tyson Whiting a few questions, and their responses give a great insight into working on Vox Product.
What was the overall process from getting the video browser from thought to on the site?
Jake Lear: For Polygon in 2013, one of the things that the editorial team wants to focus on is highlighting the incredible content that our video team puts out. Polygon is rapidly ramping up video reviews, as well as video series such as “Today I Played” — getting these videos in front of more users is top priority.
The product team took that requirement (among others) and began thinking about solutions. Eventually, we will build a full scale video hub for Polygon as a place users can look to find all of the amazing video content, but as a short term solution, we came up with the idea of a compact video browser that could feature many videos in a low-impact way on the homepage.
After we established that idea, we cut Tyson loose on what would be his first major feature as a Polygon designer. Over the course of a few days, he developed a visual design with feedback from creative director Ted Irvine and designer Warren Schultheis. After a few rounds of feedback from the editorial team, we reached a design that everyone was happy with and started the development.
Tyson Whiting: The team and I spent a lot of time really thinking about the functionality; The functionality ultimately ended up driving design. We talked a lot about what makes a good video player, what makes a bad one, and what makes a confusing one. We wanted something that was easy to navigate and simple. “Here watch a sweet video” … ‘nuff said. I did sketches ‘til my fingers were bloody and eventually convinced myself I had an idea that met the criteria and could potentially look really badass.
Then we moved onto actually getting Polygon’s content in there and started moving things around. Things would start to look pretty good, and then I would show Jake, DZ [David Zhou] or Warren a mock or two and they would tell me I’m crazy. I would tweak a few things and share mocks again. There were a lot of rounds of making sure the functionality was fluid, or that it met the look and feel of Polygon’s brand. From a design standpoint I wanted to really make something that was special to Polygon. I utilized that corner notch and color overlays to make a video player that you’ll never find anywhere else. It was a blast to work on, and people really seem to enjoy it.
How did you ensure that the design was reproduced on the site as closely as possible and were there any major obstacles to that goal?
JL: We have a fairly robust visual library on Polygon that allows us to quickly develop new features without worrying too much about betraying the soul of the site’s visual design. Tyson, Ted, and Warren worked tirelessly to ensure that the visual design fit successfully into the Polygon aesthetic, and we wanted to give that effort the respect it deserved in the development of the feature.
Tyson and I worked closely together during development, reproducing the design as closely as possible. During the design phase, Tyson had not fully explored how the video browser would respond at smaller browser sizes, such as tablets and mobile, so together we fleshed out ideas in markup and CSS to make the feature fully responsive.
What is the most interesting part of the video browser from a design standpoint? A technical standpoint?
Cory Williams: I think that creating a brand new addition to the front page of your site is a rare opportunity. Tyson and the design team were able to create a look that fit naturally into the Polygon front page, while standing out as a fresh new piece of the Poly puzzle.
From a technical standpoint, we had to figure out the best way to curate the content that feeds into the browser, which came with its own challenges. Fortunately, we were able to overcome the issues and deliver a quality product.
JL: Shortly before the Polygon team launched the video browser, The Verge team implemented the concept of video channels into our modern media stack, Chorus. It turned out to be the perfect tool for driving Polygon’s video browser.
This collaboration is a perfect example of the benefits of having a custom media stack driving our networks. The product team is broken up into small vertical-specific teams, but there are often times like this where one team can leverage the efforts and features that another is building. Additionally, developer and drink enthusiast Dusty Matthews had, just weeks before, completely overhauled the video pipeline within Chorus, allowing us to much more easily implement quick loading of all the videos without needing to have dozens of flash (or HTML5) players on the page at one time.
TW: I think one of the coolest parts of the design is that it acts as one cohesive unit. There aren’t really a lot of players out there that play this well with their video library. The relationship between the video that is playing and other video to watch on the left is a good balance, which looks great. Also the responsiveness of the player is awesome.
What was the testing process like for this project?
CW: I grabbed every device available to me and set down to work on a sandbox environment of Polygon. After populating the video browser with content, I began by playing with it in Chrome on my MacBook. You check to make sure videos play without crashing, that clicking another video seamlessly works, that hover states are consistent, and that the carousel arrows work.
After that, I tried other browsers, including Safari and Firefox, all the while logging weird bugs in FogBugz for Jake to fix. From there, it’s onto a Windows 7 PC, where Internet Explorer awaits, like Shredder at the end of the original Teenage Mutant Ninja Turtles arcade game.
Of course, you also want to ensure that tablet experience is up to scratch - that’s why a Nexus 7 and an iPad are you best friends for testing. Fortunately, David and Jake did a great job of developing the browser so there were not too many bugs to iron out.
In the end, the final result turned out great! Check out the final version on the front page of Polygon.
We’re building great things, and we need your talent! Check out jobs.voxmedia.com for our current job listings.
We came at you with a bunch of dogs in December. Check out what the cat dragged in this month.
Scott Kellum, Designer
Name: Mr. Pickles
What kind of animal is this?!: Cat?!
Location: Brooklyn, NY
Fake Job Title: Seat warmer (he is passionate about his job, if you get up he will take your seat)
Favorite Memory: At the adoption show he was under the table refusing to leave his carrier. When we got him home and he finally left his carrier he purred continuously for hours and wouldn’t let us stop petting him.
Constance Watkins, Designer
Name: Sir Tiberius Rex of Birdington, aka Rex
What kind of animal is this?!: Bird! (Cockatiel)
Location: New York, NY
Fake Job Title: CFO (Chief Feather Officer)
Favorite Memory: Moving Rex to Manhattan was an adventure. At one point during the trip I was on the subway with him and had someone ask me, “But what does he do?! What does he eat?!” Answer: Bird stuff, and bird food (respectively).
Guillermo Esteves, Developer
What kind of animal is this?!: Cat (Felis Catus)
Location: Washington, DC
Fake Job Title: Curmudgeon in Chief
Favorite Memory: He runs into things while chasing the red laser dot. It is quite amusing.
Jesse Young, Developer
What kind of animal is this?!: Cat
Location: San Diego, CA
Fake Job Title: CFO (Chief Fluffy Officer)
Favorite Memory: Exposing her belly and purring is her natural state.
Jake Lear, Developer
Breed: English Springer Spaniel
Location: Paris, VA
Job Title: Vice President of Snuggle Division
Favorite Memory: All of them
Names: Samson and Delilah
Breed: Great(est) Danes
Location: Paris, VA
Job Title: Security Detail
Favorite Memory: When they were smaller than Gracie
Joe Grossberg, Developer
Names: Miju and Peeps
Breeds: Domestic longhair, domestic shorthair
Ages: 13, 14
Job Title: Existential philosophers
Location: Boston, MA (but Washingtonians at heart)
Memory: How they helped me win over my wife; nice assist, guys.
Ted Irvine, Director of Design
Breed: Boston Terrier
Age: 7 years old
Job Title: Company therapist
Location: Arlington, VA
Favorite memory: Best dog to have a hangover with