The Deep

Real Species

The one thing this demo did not invent is its subject. Real animals, correct binomial names, and conservation figures credited to the IUCN Red List, FishBase and WoRMS at the foot of the page.

Designing around real material is a different job from designing around a placeholder. The content sets the constraints, and the layout has to earn its place beside something it cannot edit.

Four Waters, One Page

The site offers a tropical reef, the bathypelagic deep, a polar ocean and a freshwater lake. Choosing one does not load anything new. The same page restyles itself around the choice.

Colour, background, the wording on the button and the line the loader shows all change per zone. It is one template wearing four identities, which is cheaper to build than four pages and harder to get right than it sounds.

The Descent Loader

Nothing is reachable until a loader has finished, and the loader says where you are going rather than how far along it is. Descending to the reef, and a different line for each of the other three.

The wait is doing something other than covering a load. It puts you somewhere before it shows you anything, which is a thing an aquarium has and a web page usually does not.

Depth as Progress

A meter runs down the left edge and reads out how far you have descended. It moves with the scroll, so the length of the page is expressed as water rather than as a percentage.

It is a small device doing a section heading's job better than a section heading would. You always know roughly where you are, and the unit it counts in belongs to the subject instead of to the browser.

The Specimen Card

Opening a specimen slides a panel in from the right carrying the photograph, the common name, the binomial name, the family it belongs to, and a block of figures for size, lifespan, diet, range, water temperature, acidity and pressure.

It also prints a conservation status. That is more than most product pages attempt, and it is also where the borrowing shows most plainly, because the status and the photograph sit inside the same frame.

The Photography Credit

The photographs came from Wikimedia Commons. We chose them and rehosted them on our own domain, and we neither took any of them nor edited them.

The site credits the lot with one line at the bottom naming Wikimedia Commons and calling the work CC licensed. It names no photographer, no licence and no source for any single picture. That line is also the only provenance anywhere on the site, which never mentions us and never says it is a demo.

Borrowed Weight

The site is one document, with its styles and its script written inline, no framework and no build step anywhere. Measured as something we wrote, it is small.

Nearly everything a visitor actually waits for is the photographs, which we did not take. It also pulls its icon set from somebody else's CDN, so it stops looking right if a server we do not own goes down.

Worth knowing about a page built this way: when the content is the weight, a small build is not the same thing as a light page.

A Gallery, Not a Catalogue

The whole build is a frame around material that already existed, and the discipline was to add nothing to it. No invented statistics, no dramatised copy, no facts improved for the layout's benefit.

That is why the devices carry so much of it. The zones, the descent, the depth meter and the card are doing the work a catalogue would have done with adjectives, and the animals are left to be what they are.