Case study / 07

Hiru News

A national news network at genuine scale, where every kilobyte on the article template is multiplied by a very large number of readers.

Client
Hiru News (via agency)
Year
2023
Role
Design, front-end build
Stack
Agency platform, front-end delivery
Status
Live
Hiru News homepage

01

The problem

News templates carry more competing demands than almost anything else on the web: the story, the navigation, the related reading, and the advertising that funds all of it.

The brief was a front end that could hold ad inventory without the layout jumping under the reader mid-sentence, in three scripts, at national traffic volumes.

02

The approach

Every ad slot reserves its height before anything is requested, and collapses to that reserved space when unfilled. Layout shift on the article template was treated as a hard requirement rather than a metric to improve later.

The type system had to work in Sinhala, Tamil and English without three separate treatments, which constrained the scale more than any aesthetic decision did.

03

The build

Front-end delivery inside the agency's existing platform and process — their tooling, their review, their client relationship.

The article template shipped as a small set of components with the ad slots as first-class citizens rather than injected afterwards, which is the usual source of shift.

▪ Outcome
Scripts supported in one type system
3
Layout shift from reserved ad slots
0
Traffic volume on the article template
National
Delivered inside the agency's process
White-label

Indicative figures — replaced with the client’s own analytics once supplied.