Building the Vox Media Video microsite

We're often presented with interesting combinations of constraints and opportunities in marketing design. Leading into this year's Newfronts work, we were tasked with building a landing page for our video content. The only key requirements identified were that the site house the most important videos at full screen width and that they autoplay on scroll. And that it be done within a week.

That's a tight turn around, but also a lot of creative license to build out a smart, interesting page to highlight this content. When we started the project, the only requirements I was given were that it be a one page microsite and that the main videos be full screen width and autoplay on scroll. To supplement this interactivity, I knew I wanted to incorporate some subtle CSS or SVG animations that would work well alongside the videos.

Since we hadn’t even decided on what the visual direction would look like, I started by building out a small framework for the layout, adding in content types I knew would exist (two video headings, a paragraph of copy, and the actual fullwidth videos). Because it was a fast turnaround, I also wanted to start by building this outside of Chorus, Vox Media’s CMS, as it would be faster for me to change layout and interactivity without having to contend with Chorus’ own CMS publishing features and highly specified CSS. I also knew I could work much faster compiling SCSS files together using Terminal and Sublime Text than using the CSS editor baked into Chorus.

After building the basic layout, I wanted to start with some animations, especially in the header area, and experimented with transitioning in the heading letters with a randomized y-axis translate.

Basic flexbox grid SCSS

$m: 700px;

@mixin flexbox() {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@mixin layout-justify {
  $justify: start, end, center, between, around;
  @each $value in $justify {
    .layout-justify-#{$value} {
      -webkit-justify-content: #{$value};
      -ms-justify-content: #{$value};
      justify-content: #{$value};
    }
  }
}

@mixin flex-basis {
  $widths: 25, 30, 50, auto;
  @each $width in $widths {
    @if $width == auto {
      .layout-width-auto {
        -webkit-flex-basis: $width;
        -ms-flex-basis: $width;
        flex-basis: $width;
      }
    } @else {
      .layout-width-#{$width} {
        -webkit-flex-basis: percentage($width/100);
        -ms-flex-basis: percentage($width/100);
        flex-basis: percentage($width/100);
      }
    }
  }
}

@supports(display: flex){
  @media screen and (min-width: $m) {
    .layout-container {
      @include flexbox();
    }
  }
  @include layout-justify();
  @include flex-basis();
}

After incorporating the assets from the visual direction into the microsite (thanks Jessica Paoli & Dayna Lee), it became clear that SVG line animations were the way to go.

SVG Line Animation SCSS code

$l: 300;

@keyframes line-offset {
  to { stroke-dashoffset: 0; }
}
.svg-line {
  stroke-dasharray: $l;
  stroke-dashoffset: $l;
  animation: line-offset 1.5s ease forwards 1s;
  &-long {
    animation-timing: 4s; 
    &er {
      animation-timing: 6s;
    }
  }
}

From there, it was just a matter of making small updates and moving content around until we reached a layout everyone was comfortable with.

Things that worked:

• Updates centralized on a google doc. This has always worked especially well for me as a remote employee, as I know when updates were made and if anyone is currently editing the document. It also keeps these updates from being spread out over multiple channels (Slack, Asana, and email), making it easier to follow. (Thanks Regina!)
• Defining as a problem rather than a solution. Since this was a short turnaround project and had very few initial requirements, it became more of a fun creative challenge to solve rather than executing on a laid-out vision.
• Doing an initial build outside of chorus and then incorporating it in later. This meant I was able to focus on designing in the browser without limitations first instead of battling with an existing CSS framework and CMS. Because I’ve built pages in Chorus before, I had a pretty good grasp of the limitations upfront. Starting in the browser also meant I didn’t need to wait on a visual direction to be established, which sped up the front-end build time.
• Ad-hoc check-ins, not scheduled daily ones. I generally prefer these. They’re supported rather easily in Slack, and as long as people are communicative and sharing work, projects move fairly smooth. Set check-ins tend to take time out of the work by carving out general meeting time that could be otherwise spent making.

Things I’d do (slightly) differently:

• Don’t assume the videos would be hosted on multiple platforms. I spent a lot of time coding up a JS solution for videos coming from multiple sources to be autoplayed on scroll, and while I have that code now, that time could’ve been spent doing other things.
• Getting stakeholder feedback earlier. It might have been valuable to know which items were more of a priority than others. Originally, Vox Creative videos and sponsored content was scattered throughout the page, but from stakeholder feedback we moved these to the bottom to place more emphasis on the full videos.
• A little more testing. There was one bug with overflow scrolling that I didn’t catch on my phone and wasn’t fixed until after launch.

Overall, this was a very smooth project that launched on time, considering the short time frame. I felt incredibly supported by my whole team, who was ready at a moment’s notice to get me assets, feedback, or additional help.

Thanks to:

• Jessica Paoli
• Dayna Lee
• Carrie Ruby
• Josh Laincz
• Josh Larson
• Corri Skinner
• Regina Zaremba