Not your average local news. Many local TV news web properties have limited market share when it comes to traffic and reach. WRAL is quite the opposite. WRAL.com was already providing the most trusted and current local news content––the site gets over 175 million visits per year. With average users spending 28 minutes on the site, it's obvious that WRAL is a trusted news source for the Raleigh-Durham area. But a lack of visual consistency between news and promotional content often caused the popular website to feel cluttered and difficult to navigate, particularly on mobile devices. We knew we needed to craft an online news experience for WRAL that was responsive, dynamic, and even more engaging.

  • Challenge

    What does going responsive mean for a news site that requires a right rail (a layout convention that places news stories in the center column and reserves the right-hand column for advertising) as well as support for legacy and third-party content (like partnerships and promotional content) with a significant portion of traffic from legacy browsers?

  • Solution

    In a word: Standardization. We needed to update the design so all content, including ads and promotions, has a standard width (with a baseline size of 300 pixels). Content also needed complete flexibility, so that it could increase or decrease in size and display in different places on the page depending on the viewing device.

  • Results

    A high-quality reporting in an environment that is easy to navigate, intuitive to use, and that maintains its visual integrity no matter what device it’s on. Advertisers can have confidence that their messaging remains visible across a variety of platforms, and WRAL has the framework and design tools to keep their online home fresh and dynamic well into the future.

How we did it.

  • Research

    In our early research phase, we discovered 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.

  • Content Strategy

    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.

  • Visual Design

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

  • Front-End Development

    Some design strategies called for custom content placements at various breakpoints -- the kind of flexible placements where CSS alone is not a realistic or responsible solution. While we knew JavaScript would be necessary, we wanted to create a framework that non-JS developers could easily use.

  • News sites are one of the few sites that requires a right rail (a right-hand column reserved for advertising.) In our research, we saw that other sites with a rail either drop the rail content beneath other content as it responds to screen width, or stack and interweave the rail content. We opted for a combination of those two options. WRAL’s ad content reflows 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.

  • To deliver on our blended reflow strategy for advertising content, we built Transport, a responsive framework for moving elements between containers. It identifies and executes content hierarchy and placement, and achieves fluid resizing of both dynamic news content and advertisements. This allows for custom content placement at any screen 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.