Vocativ is a groundbreaking news organization for people in their 20s and 30s that uses a combination of proprietary technology, advanced methodology and fearless journalism to tell stories that matter to millennials around the globe. The company navigates the Deep Web to make sense of the 80 percent of the open Internet that search engines don’t reach, including public social media posts, open databases and records. Vocativ, which is headquartered in New York City, was founded by Mati Kochavi. The company has a staff of more than 50 analysts, engineers and journalists from news organizations, including The Wall Street Journal, Vice, ESPN, The Huffington Post, The New York Times, ABC News, Fox News, Newsweek/Daily Beast, The New York Daily News, NBC News, RAI, CNN and Reuters.
We joined the Vocativ team in mid 2013. At that point they had a site in development on a different CMS but it was not meeting their requirements. We worked with them and their developers on a new build from scratch on WordPress. The Vocativ site presented us with a challenging and technical project requiring some unique, bespoke developments.
For a media site communication and sharing is key to success. Content must be portable to the different social networks. Vocativ wanted a high quality sharing experience with full content available via the sharing medium, not just a link back to the Vocativ site. This put higher demands on the integration with the various sharing media in term of the amount of information that needed to be passed over. API were developed for Facebook, Twitter, Tumblr, reddit, Digg and Google+.
The Vocativ site has strong style and high visual impact with an emphasis on photo and video content. The site had to look great, be equally accessible across all platforms and every piece of content had to be optimised for sharability. This posed some issues for the media content and created some of the main technical challenges.
Vocativ has a dedicated video production team who can upload videos directly into WordPress, and then embed them in articles. They wanted to make sure that the site videos were optimised for playability across a variety of devices and platforms. This involves transcoding each video file into multiple formats. Editors upload raw files to the WordPress site which are then transcoded for different devices using Amazon Elastic Transcoder in conjunction with Amazon S3. This includes several different video formats such as MP4, WebM and H264. The videos are also encoded at various bitrates and delivered via the HTTP Live Streaming (HLS) protocol.
The whole video experience lives within the WordPress admin which allows editorial to add video annotations and build the video poster images alongside writing content for the articles.
The Vocativ site has a strong brand image in terms of style and typography. The homepage is composed of a mosaic of images with common style elements in order to maintain the visual consistency. In addition, the whole site is totally responsive for the full range of device and optimised for sharing on social media.
We built a Style Editor for image editing within WP Admin; an interface leveraging the WordPress 3.5 media UI to crop, style, and overlay text on images. Editorial staff can create a variety of highly sharable annotated images that can be reused and edited as many times as required. They can apply monochrome, saturated, and an interlaced video filter to images. The styles include different background colors, different fonts, and different sizes, all on different positions on the image. Transformation is done with ImageMagick. The style and typography overlay is done at the server level so that it is embedded into the image itself.
With so much multimedia content to deal with, it was important to have a smooth, seamless workflow inside WordPress for editorial staff. Editorial staff upload videos which are automatically transcoded. They can customise image and video branding via the Style Editor and annotate videos, adding captions etc. As well as the technical issues this also posed scope challenges. We had to striking the right balance of freedom versus prescription in the Style Editor functionality to fulfill the client’s needs.
We also developed Template Manager, another editorial tool providing an interface to manage articles in a queue. Everything is drag and drop, with the ability to drop an article in between other articles, the ability to lock articles to specific positions, and the ability to swap the position of two articles.
Another unique feature of the site is the development of post-items. Rich media is embedded in articles using a custom post type which stores structured data about the rich media. The idea is to allow editorial staff to produce more atomic units of content, which can be reused and more easily searched. The blocks of content, such as photos, video, gallery, set of Tweets can be inserted into post articles, edited and re-used between multiple posts.
The site went live in November 2013 and work with Vocativ remains ongoing as the site continues to grow and develop.