UNSW NewsroomDocumentary Feature

Meet the family on a mission to restore the desert ecosystem

The UNSW shell establishes institutional trust, then a Shorthand story surface takes over with aerial video, portraiture, maps, sticky scenes, and a closing evidence gallery. Mobile preserves the narrative sequence while changing crops, type, stacking, and sticky heights, so the result feels recomposed rather than merely reduced.

Open the original article

First viewport of the original UNSW Newsroom page, captured 2026-07-11.

A documentary feature that makes ecological scale emotionally legible by alternating calm reading with full-viewport field evidence.

Evidence limits. Measurements come from one headless Chromium session on 2026-07-11 and may differ with network, browser, personalization, or later publication changes. Media and empty-alt counts include responsive duplicates, lazy placeholders, footer assets, and the surrounding UNSW shell.

Responsive argument

What changes, and what merely resizes.

This evidence pair keeps the first viewport constant enough to compare hierarchy, media priority, and the cost of adaptation. Classification: recomposed.

Desktop first viewport showing the original page hierarchy and composition. — Desktop, 1440 × 10002026-07-11

Mobile first viewport showing how the original page adapts its hierarchy and composition. — Mobile, 390 × 8442026-07-11

Story anatomy

How the article spends attention.

01 Institutional shell
UNSW utility links, primary navigation, search, and yellow brand field establish identity before the story.
02 Aerial hero
A full-viewport drone scene places the small homestead inside the desert before the headline explains the stakes.
03 Premise and attribution
Standfirst, date, linked names, and opening paragraphs move into a restrained white reading field.
04 Family chapters
Romance and remote family life are told with a 600px prose spine, documentary portraits, and domestic details.
05 Mission chapters
Species restoration expands the story through fieldwork photography, maps, embeds, and animal evidence.
06 Hardship scene
Near-black sticky and fixed media scenes hold place while drought, distance, and work testimony advance.
07 Environmental turn
Night sky, storms, rain, wetlands, and landscape imagery mark the change in ecological conditions.
08 Resolution and credits
A lighter conclusion, dense gallery, media credits, contact links, back-to-top control, and UNSW footer close the story.

Viewport behavior

Two compositions, one editorial promise.

Desktop observations

The page alternates 1440px full-bleed scenes, an approximately 1100px hero text field, and a 600px prose measure.
The rendered H1 is 70px/70px, chapter H2s are 48px/72px, and core paragraphs are 20px/34px.
Image scale varies with the narrative job: small domestic portraits, paired images, panoramic fields, embeds, and full-screen environmental scenes.
Several story layers use fixed 1000px media or sticky canvases so the background remains spatially stable while text changes.

Mobile observations

The institutional navigation becomes a compact white header with hamburger, centered logo, and black search control.
The portrait hero keeps the homestead visible above the title instead of applying a blind center crop to the desktop image.
The H1 becomes approximately 29.75px/32.73px, H2s become 32px/48px, and body copy becomes 17px/28.9px at 340px wide.
Wide compositions stack or adopt new crops, while full-viewport story media remains tied to the 844px viewport height.

A representative reading beat

Representative desktop article body showing the source page's reading rhythm, media, and local hierarchy. — Desktop article body2026-07-11

Representative mobile article body showing how the source page adapts its reading rhythm, media, and local hierarchy. — Mobile article body2026-07-11

Design language

The system behind the mood.

Typography

Clancy carries the hero and chapter headings; Roboto carries prose; Roboto Mono appears in supporting utility roles.
Desktop hierarchy separates a 70px headline, 30px standfirst, 20px prose, and 16px captions.
The mobile prose settings are reading-first, but captions reduce to roughly 13.6px and deserve accessibility review.

Color and imagery

The recurring interface palette is UNSW yellow, white, black, #333 article ink, near-black story fields, and muted desert tan.
White sections support explanation; near-black fields cluster around hardship, night, drought, and high-stakes fieldwork.
Aerial landscapes, portraits, domestic life, species, weather, maps, and galleries repeatedly contrast human scale with ecosystem scale.

Motion and interaction

Full-viewport video and fixed images provide spatial continuity across long scenes.
Shorthand background and card-canvas layers crossfade media and testimony as scroll position changes; image opacity transitions commonly run for about one second.

Reader utilities

Orientation is part of the story.

01: The page provides a skip link, search, desktop and mobile navigation, contextual inline links, credited captions, media enlargement, and back-to-top controls.
02: Eleven enlarge controls open editorial media in a full-viewport lightbox.
03: No article table of contents, visible reading progress, reading time, or persistent share rail was evident in the captured surface.

Tradeoffs

Access, weight, and reader trust.

Accessibility

Semantic H1/H2 chaptering and a visible-on-focus skip link support orientation.
Many editorial images use descriptive alt text, but automated empty-alt counts also surfaced placeholders and responsive duplicates that need manual triage.
Mobile inline links and captions fall below ideal touch-size and text-size thresholds.

Performance restraint

A single headless run measured 3.256 seconds to the load event; this is a lab snapshot, not field performance.
The media-heavy page uses lazy placeholders, but console output included font decode errors, an overflow warning, a missing Slick function, and a sandboxed-frame block.

Readability 4/5

Orientation 3/5

Narrative pacing 5/5

Responsive adaptation 5/5

Media integration 5/5

Accessibility 3/5

Performance restraint 2/5

Transferability 4/5

Transferable patterns

Borrow the mechanism.

Establish scale before exposition

Let the opening image answer where the reader is before the introduction explains distance or consequence.

Alternate reading modes

Cycle through prose, portraiture, maps, full-screen media, sticky scenes, and galleries when the story's job changes.

Make chapter backgrounds semantic

Use a surface change to mark a narrative turn, not as arbitrary visual striping.

Keep content order, restage on mobile

Define crop, stacking, type, and sticky behavior for each story block rather than scaling the desktop composition.

Do not copy

Keep the lesson. Leave the signature.

A roughly 44,000px scroll journey needs a chapter index or resume strategy if return visits matter.
Do not copy the undersized mobile captions and inline touch areas.
Sticky stories require live scroll, keyboard, fallback, and reduced-motion QA; a full-page raster cannot validate them.

Implementation

What this asks of the frontend.

01: Represent the narrative as typed blocks such as hero-video, intro, prose-media, portrait-pair, embed, sticky-scene, gallery, and credits.
02: Store desktop and mobile crop focal points, media aspects, text widths, sticky heights, and surface tones per block.
03: Use art-directed picture sources or an image service with per-breakpoint focal crops.
04: Keep sticky behavior as progressive enhancement so the source order remains readable without JavaScript or motion.
05: Provide video posters, intrinsic dimensions, below-fold lazy loading, and a stable reduced-motion sequence.

Read the dated learning file for the full observation log.

Full evidence

The entire scroll, preserved.

Show desktop full-scroll overview

Compressed full-scroll desktop overview of the original UNSW Newsroom page, showing overall pacing rather than readable text detail.

Show mobile full-scroll overview