# Shorthand — 5 Excellent Examples of Longform Content

- Source: https://shorthand.com/the-craft/longform-content-examples/index.html
- Captured: 2026-07-11
- Publisher: Shorthand
- Content archetype: editorial showcase and product education
- Responsive class: **recomposed** — split-screen showcase chapters and large media stages become ordered, single-column scenes on mobile.

## Evidence key

- **Observed** records what was visible in the captured page or inspectable DOM/CSS.
- **Inference** is a design interpretation or transferable lesson, not a claim about the publisher's intent.

## First impression

**Observed.** Shorthand treats an article about longform design as a working demonstration of longform design. The opening desktop viewport is an editorial poster: a black product bar, a lilac split hero, an oversized dark-green serif headline at left, and a playful illustration at right. The mobile opening deliberately changes the order—illustration first, headline second—rather than compressing the split layout.

**Inference.** The strongest idea is not “use big visuals.” It is to alternate reading and looking in clearly authored beats. Each featured story gets enough visual territory to feel like a chapter, then a concise rationale explains why it works.

## Content anatomy

1. Compact sticky Shorthand product navigation.
2. Illustrated split hero with title and editorial identity.
3. Myth-busting introduction, author/byline, and an initial contents list.
4. Practical framing for planning and creating longform content.
5. Five example chapters, each built from a named example, a large showcase scene, a short description, and a numbered “Why it works” analysis.
6. Examples include Lit in Colour, an internal communications manual, UNSW's desert-restoration story, and Honda's Cafe Racer Revolution among the observed chapters.
7. Definition and benefits sections that convert inspiration into product education.
8. Related-content cards, newsletter conversion, “Top” utility, and Shorthand attribution/footer.

**Inference.** The repeated chapter grammar is crucial. The visual treatment can vary, while the reader always knows the next intellectual step: see it, understand it, extract the pattern.

## Desktop presentation

- **Observed.** At 1440 px, the hero divides the viewport into two approximately equal halves. The headline occupies a 720 px field while the illustration fills the right half.
- **Observed.** The sticky black navigation is only about 46 px high, leaving most of the viewport for editorial material. It retains product links and calls to action on desktop.
- **Observed.** Explanatory copy frequently narrows to a centered column of roughly 600 px, while showcase media expands to much larger, sometimes viewport-scale scenes.
- **Observed.** Mid-article scenes use sticky or scroll-activated media: for example, a device mockup displaying Lit in Colour occupies a large gray stage before the centered “Why it works” text resumes.
- **Inference.** Width changes are the pacing engine. Narrow text asks for concentration; wide media releases that concentration and creates a chapter boundary.

## Mobile adaptation

- **Observed.** At 390 px, the black header retains the Shorthand mark but removes the desktop link cluster from view. The captured state did not expose a visible mobile menu control.
- **Observed.** The hero image becomes a full-width upper scene and the title follows below it. The H1 drops from roughly 59/59 px to about 33/37 px.
- **Observed.** Body text shifts from approximately 23/39 px in a 600 px column to about 19/32 px with 25 px side gutters.
- **Observed.** Wide showcase scenes are reauthored into a vertical sequence. The Lit in Colour device image sits above its analysis instead of remaining beside or pinned against it.
- **Observed.** Large chapter titles reduce substantially but remain visually distinct from the “Why it works” subhead and numbered rationale.
- **Inference.** The mobile order protects narrative causality: encounter the example, then read the interpretation. That is more important than preserving desktop geometry.

## Typography and reading rhythm

- **Observed.** Passenger Serif drives display headlines, while Circular Web carries body copy and interface labels. The expressive/contemporary pairing gives the page editorial character without sacrificing utility text clarity.
- **Observed.** The desktop H1 is approximately 59/59 px and some major H2s reach about 73/73 px. “Why it works” is notably smaller, around 32/39 px, producing a clear three-tier chapter hierarchy.
- **Observed.** On mobile, major display headings converge near 33/37 px, “Why it works” near 25/30 px, and body copy near 19/32 px.
- **Inference.** Shorthand uses scale shifts as scene cuts. A derivative system should define explicit display, chapter, rationale, and prose roles rather than choosing large type ad hoc.

## Color and imagery

- **Observed.** The recurring palette includes near-black navigation, dark green, lilac, soft gray, darker gray, and pale mint. Large flat color fields separate chapters.
- **Observed.** The hero illustration is editorial and playful; later media is documentary evidence of the showcased stories, often presented inside device frames or immersive crops.
- **Observed.** Some apparently “blank” dark-green regions in the full-page strips correspond to stateful sticky scenes whose active media is visible only at particular scroll positions.
- **Inference.** Color works as chapter architecture rather than decoration. Reusing a small set of background fields helps a 30,000+ px page feel intentional.

## Motion, navigation, sharing, and related material

- **Observed.** The page uses sticky media, scroll-triggered activation, and animated transitions to stage examples. Computed styles exposed multiple transition/animation states on both viewports.
- **Observed.** A reduced-motion override was not detected in the accessible stylesheets inspected during this session.
- **Observed.** Orientation comes from the initial contents list, repeated numbered examples, large chapter titles, and consistent “Why it works” blocks. A persistent article progress indicator was not visible.
- **Observed.** The global product header remains sticky. Related reading and newsletter conversion are deferred until the explanatory arc is complete.
- **Inference.** The scene system should degrade to a complete linear document when sticky positioning, animation, or JavaScript is unavailable.

## Accessibility and performance

- **Observed.** Text contrast is generally strong and the narrow prose measure is readable. The numbered rationale lists preserve meaning independently of media.
- **Observed.** The hero image's inspected alternative text appeared semantically mismatched to the visible illustration, and the author portrait did not expose useful alt text in the inspected DOM. Later related images included more descriptive labels.
- **Observed.** The article is extremely deep and uses large image stages, device mockups, sticky layers, and lazy-loaded/animated assets. No page-weight or field-performance measurement was performed.
- **Inference.** A production version should audit alternative text against the final art, ensure every pinned scene has a logical source order, provide reduced-motion behavior, and reserve media dimensions to avoid shifts.

## Transferable patterns

1. **Demonstrate the subject.** Let the form of the article embody the guidance it offers.
2. **See → explain → abstract.** Show a case, describe it, then enumerate why it works.
3. **Elastic reading width.** Alternate narrow prose with wide visual stages to create rhythm.
4. **Repeated chapter grammar.** Keep structural expectations stable even when art direction varies.
5. **Mobile narrative order.** Reorder split scenes into the sequence that makes the argument easiest to follow.
6. **Color as wayfinding.** Use a controlled set of full-bleed backgrounds to signal transitions.

## What not to copy literally

- Do not reproduce Shorthand's illustration, Passenger/Circular pairing, proprietary product framing, or dark-green/lilac signature.
- Do not add scroll effects merely to make a page feel “premium”; each effect should clarify a chapter or comparison.
- Do not hide essential argument content inside a scroll state that screenshots, print, assistive technology, or reduced-motion users cannot reach.
- Do not let a minimal mobile header become a navigation dead end; provide an accessible route to site navigation even if it was not visible in this captured state.

## Implementation notes

- Model chapters as structured data with fields for title, dek, media, rationale points, background theme, and mobile order. Render the same semantic source into different layout compositions.
- Use a narrow prose token (about 38–42 rem) and separate full-bleed media containers. Avoid hard-coding widths per chapter.
- Implement sticky scenes with CSS first, then add `IntersectionObserver` only for state changes. Preserve complete content when scripting is disabled.
- Respect `prefers-reduced-motion: reduce` by disabling pinning/parallax, shortening transitions, and showing the chapter's representative frame inline.
- Test mobile source order, keyboard traversal, zoom to 200%, print output, and screen-reader landmarks—not just responsive screenshots.
- Give large media intrinsic sizes, responsive sources, modern formats, conservative preloading, and lazy loading below the first chapter.

## Evidence limits

- This is a design inspection, not analytics evidence; traffic, completion, conversion, and user satisfaction were not available.
- Full-page captures flatten sticky/scroll-driven states and may show large flat-color or white regions. Use them for overall pacing only; the hero/body captures and live viewport inspections are the detail evidence.

## Visual references

- [Desktop hero](../assets/references/05-shorthand-longform-examples/desktop-hero.png)
- [Desktop full-page pacing strip](../assets/references/05-shorthand-longform-examples/desktop-full.png)
- [Desktop body detail](../assets/references/05-shorthand-longform-examples/desktop-body.png)
- [Mobile hero](../assets/references/05-shorthand-longform-examples/mobile-hero.png)
- [Mobile full-page pacing strip](../assets/references/05-shorthand-longform-examples/mobile-full.png)
- [Mobile body detail](../assets/references/05-shorthand-longform-examples/mobile-body.png)