As seems to be the case with many of the case studies I'm writing for this CBS News section of my portfolio, the story of the article & liveblog redesign is a long and twisted tale, but thankfully one that did result in a finished product.

I started at CBS News in late 2016, after the creative director had completed a comprehensive redesign of the website. I assisted by polishing and refining the Sketch files and documentation, and working with engineering on the launch. But over the next few years, the article and liveblog templates were never quite satisfactory. They conflicted with each other, the article had legibility issues, the content was well below the fold, video ad revenue suffered, and the liveblog was particularly buggy.

I participated in several efforts to redesign the templates over the years, and I collected a huge number of abandoned Sketch files on my hard drive (and eventually, in Sketch Cloud and then Figma). There was much disagreement over direction, and corporate issues were an additional hurdle. Long story short: the CBS News design team was absorbed into the larger CBS Sports team, there were numerous rounds of punishing layoffs, and increasing bureaucracy dramatically slowed projects like this down to the point of inaction.

The poor state of the CBS website caught the eye of Nilay Patel of The Verge and John Gruber of Daring Fireball. Their primary concern was a specific bug that was eventually fixed (an adblock detector was mistakenly firing inside iframes), but their larger point stood: the CBS News web article was a poor experience.

By late 2024 and early 2025, the News web team had stabilized, and there was a renewed interest in refreshing the website. The internal codename for the project was Story Streamline, and I was able to leverage much of the work I had previously done. Some of the goals included:

• Create a single template for previously disparate article types: standard article, branded article, sponsored article, liveblog, and gallery
• Improve video experience, primarily for ad revenue. One critical issue with the "old" templates is that the video would scroll out of view, and then re-initialize as a floating panel, obscuring content
• Lay groundwork for an eventual merging or convergence between the CBS News and CBS Sports websites (this was one of the biggest roadblocks, as the needs for Sports and News often conflicted, and Sports made more money)
• A new app-like recirculation unit (this was a specific request of one particular executive)
• Modernize typography and color, in part to prepare for an eventual support of device light/dark mode

Below are side-by-side comparisons between the original and redesign article templates, with identical content. Some of the improvements you can see at the smallest breakpoints include:

• the previous designs' dark header is gone
• video: A vastly improved scrolling experience. The video loads in this state, and never leaves the page as the user scrolls.
• flags/topics: an improved treatments for topic links such as "Politics", and support for new flags such as "Exclusive"
• Typography: a new font: TT Norms Sans and Serif, and a newly comprehensive system of sizes and line heights
• "Top Takeaways": a new feature requested by editorial. Text is now well above the fold on load, when no skybox banner ad.
• improved treatment for branding and metadata (in this example: CBS News Baltimore, timestamp, and multiple authors and editors)

The new template was of course responsive. At wider widths, improvements included:

• video: the same video instance no appears in a right-hand column, and sticks
• recirculation unit: a progressive enhancement for wider widths. Requested by an executive who was a fan of app news aggregators like Apple News
• the article body is now well within view on load

One small but important detail I really fought for: the body copy in the prior template maxxed out at 980px at the widest breakpoint, which well exceeded the WCAG guidelines. I insisted on a max-width more body copy in the redesign, and meet a surprising about of resistance from CBS News product and editorial. In my years of experience as a web designer, I have found that stakeholder reticence can be in part explained for a resistance to change, but also to a fear of whitespace, thinking it signals waste. But I am relieved to say that the final template does include a more comfortable and accessible line length:

A key source of revenue for CBS News web was the ad unit at the bottom of article pages, typically served by Taboola or Flipp. Contractural obligations stipulated the vertical spacing between the end of the article and the top of the ad unit, and from the very top of the page to the top of the ad unit. These restrictions naturally often came into conflict with editorial needs (such as the journalists' and editors' bylines)and SEO needs (such as topic links and recirculation).

The CBS News web product person handled most of the negotiations between Taboola and CBS News editorial, and I made numerous attempts to visually condense the article footer material. Taboola was resistant to us making any changes at all to our templates, but was placated when we presented them with full-page mocks of a typical article. The improvements at the top of the template recovered literally hundreds of pixels of vertical space at wider breakpoints, and optimizations at the bottom of the template improved the situation further.

Below are can see side-by-side comparisons of the old template and new, scrolled.

My Figma file and the prototype each supported device dark mode. This feature was not scoped for production, but was a "freebie", so I included it as proof-of-concept.

The new template was flexible enough to apply to liveblogs, a must for any contemporary news website. Below are before-and-after screenshots of the prior liveblog template, versus the new:

Below are screen recordings of my prototypes. I unfortunately can't archive them here on my porfolio, as they include webfonts I don't have the license to publish. I built these in HTML & and CSS, with Less.js. The first demonstrates the persistent video, which never leaves the page.

These templates launched in 2025, and I think it was largely viewed as a success, across the company. I have a few lingering gripes, personally:

Issue: Brand Chips

I strongly dislike the treatment for the brand "chip" (CBS News Baltimore in the examples above). In the final, approved designs that launched, the chip is positioned below the headline at the smallest breakpoint, aside the article metadata (authors and timestamp), where I believe it belongs. At wider breakpoints, it jumps to the top of the right column, orphaned by itself. This nonsensical outcome was the result of stakeholders seeing two distinct treatments, and choosing both. Not only does it not make any sense, it was also extraordinarily difficult to prototype (I wound up building a complex CSS Grid system, with the chip as a distinct grid item that could switch columns responsively). Below are four representative examples in Figma form, of the dozens of extant CBS News brands I had to account for:

Issue: Lead Images

lead images: CBS News editorial strongly did not want a feature/lead image. I still think lead images are table stakes for article templates as a whole, and in this specific case, would aid in the visual structure at wider widths. I do grant that including a lead image does push the text content well down below the fold. See mockups below.

Issue: Recirculation

I personally dislike news aggregators such as Google News and Apple News, finding them full of sponsored content, algorithmic garbage, and sources I do not trust. I do not believe that a primary source such as CBS News should present its own content in such a style.