Skip to content

← Guides

Design for constrained devices

Start with a lean foundation, measure bundle cost, and defer heavy media until the visitor chooses to load it. Save-Data and reduced-data preferences are yours to honor in application routing and asset selection.

Progressive ladder

  1. 1. Foundation reset

    Load a small, layered reset for predictable sizing and responsive replaced media. Prefer loading=lazy for below-the-fold images and fetchpriority=high only for truly critical hero images.

    Reset

  2. 2. Bundle size

    Measure gzip totals for CSS, optional JavaScript, and icons before adding enhancement. The homepage reports current dist sizes.

    Homepage bundle report

  3. 3. Video-lite embed

    Poster-first video makes no third-party request until the visitor activates it. Captions, transcript, and a durable watch link remain without JavaScript.

    Video and lite embed

  4. 4. Save-Data as app policy

    The Save-Data client hint and prefers-reduced-data are application policies—not library defaults. Defer non-essential media, skip autoplay, and serve lighter assets when the visitor signals reduced data.

    Reset media guidance

Foundation reset

Browser-aware reset retains native form control semantics while inheriting the theme.

Browser-aware reset

Text, media, tables, and native form controls retain their semantics while inheriting the theme.

Read the complete Reset contract

Show code
<article>
  <h2>Browser-aware reset</h2>
  <p>Text, media, tables, and native form controls retain their semantics while inheriting the theme.</p>
  <img src="/icons/svg/image.svg" alt="" width="96" height="64">
  <button type="button">Native button</button>
</article>

Bundle-size reference

The homepage reports gzip totals for complete CSS, optional JavaScript, the icon sprite, and the combined browser bundle. Treat these numbers as a baseline before adding Datastar, behaviors, or third-party embeds.

View current bundle sizes on the homepage

Video-lite embed

No iframe or provider request until activation. Poster, caption, transcript, and watch link remain without JavaScript.

Launch film, 2 minutes. Watch on the media host.
Transcript

Provide the complete authored transcript here.

Read the complete Video and lite embed contract

Show code
<figure class="thin-video-embed"
data-video-src="https://media.example/embed/launch-film"
data-video-title="Launch film"
data-video-allow="fullscreen"
data-video-allowfullscreen>
<div data-video-stage>
  <img src="/media/launch-film-poster.webp" alt="" width="1600" height="900" loading="lazy" decoding="async">
  <button type="button" data-video-activate aria-label="Play Launch film">Play video</button>
</div>
<figcaption>
  Launch film, 2 minutes. <a href="https://media.example/watch/launch-film">Watch on the media host</a>.
</figcaption>
<details>
  <summary>Transcript</summary>
  <p>Provide the complete authored transcript here.</p>
</details>
</figure>

Save-Data as application policy

Thin-Sky documents optional loading="lazy" and poster-first video, but honoring Save-Data or prefers-reduced-data is an application decision:

  • Serve smaller images or omit hero media when the client hint is present.
  • Never autoplay video; require explicit activation regardless of connection.
  • Skip non-essential enhancement scripts when data budgets are tight.
  • Keep essential content in HTML—do not hide critical information behind lazy-loaded widgets.