# 07 - UNSW: Meet the family on a mission to restore the desert ecosystem

## Source and capture

- **Source:** [UNSW Newsroom](https://news.unsw.edu.au/en/meet-the-family-on-a-mission-to-restore-the-desert-ecosystem)
- **Captured:** 2026-07-11
- **Desktop viewport:** 1440 x 1000
- **Mobile viewport:** 390 x 844
- **Article archetype:** Documentary feature inside an institutional news shell
- **Responsive classification:** Recomposed. The words stay in the same order, but navigation, crops, type scale, sticky media, and image arrangements are deliberately changed for a narrow screen.
- **Capture state:** Optional cookies were declined. The page was scrolled once before each full-page capture so lazy media could load.

`[Observed]` marks rendered or measured behavior from this capture. `[Inference]` marks an interpretation of why the design works or what the team likely intended.

## Visual evidence

### First viewport

![UNSW desktop hero at 1440 by 1000](../assets/references/07-unsw-desert-ecosystem/desktop-hero.png)

![UNSW mobile hero at 390 by 844](../assets/references/07-unsw-desert-ecosystem/mobile-hero.png)

### Full-page traces

![UNSW desktop full-page capture](../assets/references/07-unsw-desert-ecosystem/desktop-full.png)

![UNSW mobile full-page capture](../assets/references/07-unsw-desert-ecosystem/mobile-full.png)

### Representative article body

![UNSW desktop article body showing a sticky fieldwork scene](../assets/references/07-unsw-desert-ecosystem/desktop-body.png)

![UNSW mobile article body showing the same fieldwork scene and overlaid text](../assets/references/07-unsw-desert-ecosystem/mobile-body.png)

The full-page images are intentionally downscaled overview strips: they show total pacing and section order, not readable detail. They also flatten sticky and fixed Shorthand layers into one static trace. The body captures preserve the requested viewport resolution and show a live scroll-controlled fieldwork scene at reading scale.

## First impression

- `[Observed]` The page communicates **remoteness before explanation**. Aerial footage places one small homestead inside a vast desert, then the headline names the human and ecological stakes.
- `[Observed]` My eye goes first to the UNSW masthead, second to the isolated homestead, and third to the large white headline. The intended hierarchy is legible within one glance.
- `[Observed]` The opening viewport contains two different systems: a bright, formal UNSW header and a dark, cinematic story hero.
- `[Inference]` That contrast is useful. The university shell supplies authority, while the embedded story surface earns emotional attention.
- **One-word verdict:** Documentary.

## Ordered anatomy

1. **Institutional utility strip.** `[Observed]` News, Events, myUNSW, Alumni & Giving, and Contact Us sit above the main navigation on desktop.
2. **UNSW primary masthead.** `[Observed]` A white navigation slab is set against the university's yellow field, with Study, Research, Engage with Us, About Us, and a black search block.
3. **Full-viewport aerial hero.** `[Observed]` A drone video and fallback image fill the story viewport. The headline and later standfirst are set directly over the landscape.
4. **Identity and premise.** `[Observed]` The standfirst, publication date, linked names, and introductory paragraphs move into a quiet white reading column.
5. **Human entry point.** `[Observed]` “An outback romance” and “Family life in the outback” introduce Bec, Reece, and their children through prose, portrait photography, and domestic details.
6. **Work and mission.** `[Observed]` “Rolling up their sleeves” and “An extraordinary mission” widen the lens from one family to species reintroduction, fieldwork, maps, embeds, and animal photography.
7. **Hardship as a scroll scene.** `[Observed]` “Hitting hard times” uses a near-black canvas, fixed or sticky full-viewport media, and text cards that arrive as the reader advances.
8. **Environmental turn.** `[Observed]` “The rains are here” shifts the visual atmosphere with night-sky, storm, wetland, and landscape imagery.
9. **Resolution and looking forward.** `[Observed]` A lighter reading section and a dense photo gallery return the story to people, evidence, and future work.
10. **Credits and institutional footer.** `[Observed]` Media credits, contact links, a back-to-top control, Shorthand attribution, UNSW navigation, partners, social links, and policy links close the page.

## Desktop composition

- `[Observed]` The desktop story alternates three widths: 1440px full-bleed scenes, a 1100px hero text field, and a 600px prose measure.
- `[Observed]` The H1 is 70px with a 70px line height across an approximately 1100px field. Chapter H2s are 48px with a 72px line height and normally align to the 600px article spine.
- `[Observed]` Core paragraphs are 20px/34px at 600px wide. That is a generous 1.7 line-height ratio and roughly a conventional long-form reading measure.
- `[Observed]` Portraits, paired photographs, panoramic frames, embedded media, and full-viewport videos interrupt the reading column at different scales. The rhythm is not “paragraph, image, paragraph” repeated mechanically.
- `[Observed]` Several narrative sections use sticky canvases and fixed media at the full 1000px viewport height. Text advances through the scene while the background remains spatially stable.
- `[Inference]` The page treats image scale as narrative grammar: small domestic images feel personal, while full-screen desert and weather scenes make systems and distance feel larger than the family.

## Mobile adaptation

- `[Observed]` The institutional header becomes a compact white slab with hamburger, centered logo, and black search control. Desktop utility links and the full primary navigation leave the first viewport.
- `[Observed]` The hero uses a portrait composition at 390 x 844. The homestead remains visible above the headline instead of relying on a blind center crop from the desktop frame.
- `[Observed]` The H1 changes from 70/70 to approximately 29.75/32.73. Chapter headings become 32/48 and use a 340px field.
- `[Observed]` Body copy becomes 17/28.9 at 340px wide with 25px side gutters. Captions drop to approximately 13.6/16.32.
- `[Observed]` Wide image pairs and editorial compositions stack or adopt new crops. Full-viewport story media continues to use the 844px viewport height, while sticky card canvases shrink to about 295px where appropriate.
- `[Observed]` The mobile DOM trace is slightly taller than desktop, about 45,621px versus 44,188px, because horizontal compositions reflow into a longer sequence.
- `[Inference]` This is not a shrunken desktop. It preserves the alternation between reading, immersion, and evidence while changing the spatial device used for each beat.

## Typography

- `[Observed]` **Clancy** carries the hero and chapter headings. Its broad, friendly shapes keep the institutional identity present without making the feature feel like a standard press release.
- `[Observed]` **Roboto** carries article prose at 20px desktop and 17px mobile. **Roboto Mono** appears in supporting or utility roles.
- `[Observed]` Hero scale is intentionally separate from article scale: 70px headline, 30px standfirst, 20px prose, 16px captions on desktop.
- `[Inference]` The type system succeeds through size, line-height, and placement more than through a decorative display face. That lets photography remain the signature.

## Color and imagery

- `[Observed]` The recurring interface colors are UNSW yellow (`rgb(255, 220, 0)`), white, black, article ink (`rgb(51, 51, 51)`), near-black story fields (`rgb(24, 23, 22)`), and a muted desert tan (`rgb(204, 184, 127)`).
- `[Observed]` Color changes signal narrative mode. White supports explanatory reading; near-black supports weather, night, drought, and high-emotion passages.
- `[Observed]` The document contained 123 image elements, four videos, four objects, and six iframes in this capture. These counts include lazy placeholders and duplicated responsive sources, so they are a complexity signal rather than a count of unique editorial assets.
- `[Observed]` Imagery spans aerial landscape, documentary portraiture, domestic life, fieldwork, species, satellite/map material, weather, and a closing gallery.
- `[Inference]` The visual system keeps returning to a useful scale contrast: the tiny human dwelling versus the desert, the family portrait versus the regional ecosystem, and one animal versus population recovery.

## Interaction and motion

- `[Observed]` The opening and later story scenes use full-viewport video or images with fixed positioning.
- `[Observed]` Shorthand `BackgroundScrollmation` and `CardCanvas` layers crossfade media and text as scroll position changes. Image opacity transitions commonly run for 1s; background scene transitions include a 0.7s opacity change.
- `[Observed]` Eleven “Click to enlarge” controls open story media in a lightbox. A fixed full-viewport lightbox layer is present in the rendered DOM.
- `[Inference]` Motion is doing spatial work, not simply decorating section entrances. The background holds place while the evidence or testimony changes.

## Article utilities

- `[Observed]` A visible-on-focus skip link, institutional search, desktop and mobile navigation, linked people/projects/species, captions with credits, lightbox enlargement, contact links, and top/back-to-top controls support use around the story.
- `[Observed]` The page includes direct links to source concepts and related research within the prose instead of moving all evidence to an endnote wall.
- `[Observed]` No article-level table of contents, reading-progress indicator, estimated reading time, or persistent share rail was evident in the captured surface.
- `[Inference]` The design prioritizes uninterrupted immersion over rapid chapter navigation. That choice suits a single-session feature, but it is costly for return visits to an 8,000-plus-word DOM.

## Accessibility and performance

- `[Observed]` The page provides a skip link, semantic H1/H2 chaptering, visible institutional navigation, descriptive alt text on many editorial photographs, and large lightbox targets.
- `[Observed]` Examples of useful alt text name the people and action, such as Bec and Reece outside their homestead or Reece working under a vehicle.
- `[Observed]` The automated pass also found many empty image alt values. The raw count was 55, but it includes lazy placeholders and hidden responsive duplicates, so it should not be treated as 55 unique failures.
- `[Observed]` Inline links are about 25px high on desktop and 21px high on mobile. They do not provide a 44px touch box even though major navigation controls do.
- `[Observed]` Mobile captions render around 13.6px, below the 16px article body floor and potentially difficult for low-vision readers.
- `[Observed]` A single headless load measured 3.256s to the load event. This is a time-bound lab reading, not field performance.
- `[Observed]` The console reported repeated Roboto WOFF2 decode failures, a Shorthand warning about `overflow-x`, a missing Slick function, and a sandboxed-frame script block. The main story still rendered in this capture.
- `[Observed]` The current preference query returned `prefers-reduced-motion: false`; the presence and quality of a reduced-motion alternative were not verified.
- `[Inference]` The editorial payoff is high, but the media and embed budget makes this a premium pattern that requires strong lazy loading, poster frames, error fallbacks, and device testing.

## Transferable patterns

1. **Establish scale before exposition.** `[Observed]` The aerial hero lets the reader feel isolation before reading a statistic about distance. `[Inference]` Use an opening image to answer “where are we?” before asking the introduction to do all the work.
2. **Alternate reading modes, not just block types.** `[Observed]` The story cycles through quiet prose, paired portraiture, maps, full-screen media, scrollytelling, and galleries. `[Inference]` A long article stays fresh when each mode matches a change in the story's job.
3. **Make chapter backgrounds semantic.** `[Observed]` Dark fields cluster around hardship, night, drought, and high-stakes fieldwork. `[Inference]` A background change should mark a narrative turn, not serve as arbitrary zebra striping.
4. **Use the same content with different mobile staging.** `[Observed]` Mobile keeps the chapter order but changes crops, widths, type, stacking, and sticky heights. `[Inference]` Define responsive art direction at the story-block level.
5. **Credit media where it appears.** `[Observed]` Captions repeatedly name photographer, institution, or source adjacent to the asset. `[Inference]` Attribution becomes part of trust instead of a legal appendix.

## What not to copy

- `[Observed]` Do not copy the 44,000px scrollytelling footprint without an internal navigation or resume strategy. The original has no visible chapter index or progress control.
- `[Observed]` Do not copy the mobile caption size or undersized inline touch areas.
- `[Observed]` Do not assume a full-page screenshot can validate a sticky story. Fixed layers need real scroll QA, keyboard QA, and reduced-motion QA.
- `[Inference]` Do not borrow the UNSW yellow, crest geometry, Clancy typeface, or the specific documentary image language. Borrow the separation between institutional trust and story immersion.

## Implementation notes

- Model the page as ordered story blocks: `hero-video`, `intro`, `prose-media`, `portrait-pair`, `embed`, `sticky-scene`, `gallery`, `credits`.
- Give each block explicit desktop and mobile art-direction fields, including crop focal point, media aspect, text width, sticky height, and background tone.
- Use `picture` sources or an image service with per-breakpoint focal crops. The mobile hero demonstrates why `object-position: center` alone is not enough.
- Keep the prose token close to `600px / 20px / 34px` desktop and `340px / 17px / 28.9px` mobile. Treat captions as a separate accessibility review item.
- Build sticky scenes as progressive enhancement. The underlying article order must remain readable when JavaScript, autoplay, or motion is unavailable.
- Supply posters for every video, dimensions for every media slot, lazy loading below the fold, and a `prefers-reduced-motion` route that replaces scroll-controlled transitions with a stable sequence.
- Test full stories by scrolling through actual viewports. Static full-page rasterization cannot prove that fixed media, sticky cards, and lightboxes behave correctly.

## Evidence limits

- Measurements come from one headless Chromium session on 2026-07-11. Personalization, network conditions, browser font decoding, and future publication changes may alter the result.
- DOM media and missing-alt counts include responsive duplicates, placeholders, footer assets, and the surrounding UNSW shell. They indicate implementation complexity, not a clean count of unique story assets.