0:00 / 7:03
Chapter 1 · Above the fold
Chapters
Keyboard
- Space Play or pause
- ← → Back or ahead 5 seconds
- [ ] Previous or next chapter
- C Captions · M Mute · F Full screen
Transcript
Notes for class
- Watch beside Image Performance. Its Lazy Loading demo is the page in this film: open the Network panel and scroll.
- Every photo on screen is one of the section's own files, and every byte count is that file's real size. The waterfall timings are illustrative, not a measurement.
- Metric thresholds from web.dev: Largest Contentful Paint (good is 2.5 seconds or less) and Cumulative Layout Shift (good is 0.1 or less), both at the 75th percentile of visits.
- Perceived stability is one of the design principles in Apple's Human Interface Guidelines (1987).
- Photographs: “Lake Mountain Landscape”, Bonnie Moreland; “A tuxedo cat looking at the window”, Punkressph; and “Macro flower wallpaper”, Free Nature Stock; all CC0, from Wikimedia Commons.
- The narration is a synthetic voice (ElevenLabs). Timing follows the narration track, so a recorded voice-over can replace it cue for cue using the transcript.
- With Reduce Motion turned on in the operating system, the film keeps its fades and drops the sliding motion.
- Set in Atkinson Hyperlegible Next and Mono, typefaces the Braille Institute designed for readers with low vision.
Take it with you
- Video (MP4, 1080p, 7:03, 11 MB), with English captions built in
- Captions: WebVTT or SRT, for Canvas or YouTube
- Narration script (plain text) with chapter timecodes, for recording your own voice-over