Magazine Website Templates

What a magazine or long-read site has to do

A reader who has arrived at a long piece wants to know what it is, how long it is and where they are in it, and then to be left alone to read. Most publishing templates answer with a card grid and a hero image. The templates here are built around typography: a real reading measure, proper columns, drop caps, pull quotes and folio details, with animation saved for the moments that help the reader follow the story.

The magazine template is a five-page site for an independent print magazine. The current issue lies on a stone tabletop and visitors drag it open to thumb through its spreads, with a contents page, a reusable story page, a table of back-issue covers and a subscription builder. It suits zines, journals and small presses as well as quarterlies.

The tech news template is a nine-page news and reviews site on true black, cut by slanted colour bands, with CSS duotone photographs and headlines that run the width of the window. It carries a filterable story wall, a score wall that sorts by score, price or repairability, a draggable comparison of two phones and a long read whose redaction bars lift as you scroll, and it suits gaming, science, finance and local news as well as technology.

The scrollytelling template is a finished piece of investigative journalism for any long-form story that argues from evidence. Three locked stages hold a media column in place while the reporting scrolls past, crossfading photograph to photograph step by step, and in the evidence section the redaction bars on three documents wipe away under the reader's scroll. It comes with the newsroom furniture: masthead, byline rule, numbered findings, exhibit stamps, a right-of-reply block and a method note.

The news and magazine template is a ten-page site for a regional paper: a giant nameplate on a colour band, a numbered rail, a lead story and a running Latest feed, with a section page, an article, an author page and three long reads, about forty written stories in all, and five palettes that repaint the whole site. Readers can draw what they think a price did on a chart and then see what it did. The editorial one-page template takes its identity from print discipline rather than a publication: a cover that exists twice, chalk on top and an ink negative beneath, revealed through a soft aperture that follows the cursor, and it suits a studio, a personal site or a manifesto as well.