For decades WRAL has delivered top local news content to North Carolina’s Raleigh-Durham area, serving as its most popular and trusted news source. Our Durham-based team was thrilled to help WRAL update its web presence, creating a news experience that is responsive, dynamic, and even more engaging.

Not Your Average Local News Site

Many local TV news web properties have limited market share when it comes to traffic and reach. WRAL is quite the opposite. A trusted news source for decades, wral.com gets over 175 million visits per year, and is surpassed only by the likes of Google, Facebook, and Youtube from a market share standpoint. With average users spending 28 minutes on the site, it's obvious that WRAL is a trusted news source for the Raleigh-Durham area.

Going Responsive

From day one WRAL wanted their new site to be responsive, which prompted an important question: what does going responsive mean for WRAL’s legacy and third-party content (like partnership and promotional content)? Working closely with the WRAL team, we conducted a thorough content inventory. We learned that the content was primarily widget-based, which meant it existed in variably-sized components that were too inflexible to flow across all devices. As a result of this discovery, we further refined our goal: We’d need all content to be both standardized (with a baseline size of 300 pixels) and flexible, so that it could increase or decrease in size depending on the viewing device.

Advertising within a Responsive Design

In our early research phase, we also discovered another fascinating piece to the puzzle: the concept of the right rail. This is something of a holdover from the days when newspapers printed on physical newsprint. The layout convention placed news stories in the center column and reserved the right-hand column—known as the right rail—for advertising. This meant that the reader’s eye would land on an ad just as the reader paused during or between news stories to turn the page. While today’s digital readers scroll, click, or tap for more news, the convention of the right rail has persisted.

Since news sites are one of the few sites that require a right rail, the challenge was a unique one for our team. In our research, we saw that other sites with a rail often do one of two things: drop the rail content beneath other content as it responds to other devices, or stack and interleave the rail content. We opted for a combination of those two options. WRAL’s ad content reflows from the right rail either beneath the news content or stacked within the news content. This allows us to deliver content with the appropriate importance on all devices while preventing gaps in the design.

Flexible Design System

WRAL is a mammoth of a brand, with many subsidiary companies, activations, divisions, and organizations. And while WRAL represents the top tier of journalism organizations, invariably offering high-quality content, they lacked a visual consistency to their branding elements. Promotional branded content was often presented in various sizes and styles and lacked the uniformity and polish of the overall brand. We designed a flexible system that could display these promotions with the proper presentation and distinguish them from other ads on the page.

Transport: A Responsive Ad Framework

To deliver on our blended reflow strategy for advertising content within the responsive design, we needed to build a framework that would accomplish several tasks simultaneously. It needed to identify and execute content hierarchy and placement, and achieve fluid resizing of both dynamic news content and advertisements. To meet these goals we created Transport, a flexible system for moving elements between containers. It allows for custom content placement at any screen size.

Scalable Components

Knowing that WRAL need to create templates, modules, and pages in the years to come, we provided them with flexible, scaleable components that support templates in any layout and size. We implemented SVG images and icon fonts to deliver scalable, crisp imagery for mobile, desktop, and retina-displays alike. To account for legacy browsers, which are a significant portion of their traffic, we used Grunticon to automate conversions from SVG to PNG files.

A New Home for New Media

The new WRAL.com delivers the same high-quality reporting its community has come to expect, but now in an online environment that is easy to navigate, intutive to use, and that maintains its visual integrity no matter what device it’s displayed on. WRAL’s advertisers can have confidence that their messaging remains visible and relevant across a variety of platforms, and WRAL itself has the site framework and design tools to keep their online home fresh and dynamic well into the future.

WRAL Homepage
WRAL Homepage major news event takeover
WRAL Homepage major news event takeover
WRAL Homepage major news event takeover
WRAL Story Page
WRAL Sportsfan Homepage

Portfolio & Case Stories