---
name: html-presentations
description: "Build responsive, single-file HTML slide decks with CSS Scroll Snap. Use for mobile-readable presentations, visual briefs, or branded decks that should open in a browser without a slide framework."
---

# Mobile-first HTML presentations

Recommended default for a deck people will read on a phone: one HTML file, native CSS Scroll Snap, and slide height `100svh`. Use Reveal.js instead when projector presentation, speaker notes, fragments, or its print workflow matter more than mobile readability.

## Layout contract

```css
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
:root {
  --bg: #f7f7f4;
  --ink: #202522;
  --accent: #137a66;
  --border: #d8ded8;
  --font: system-ui, sans-serif;
}
.deck {
  height: 100svh;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.slide {
  min-height: 100svh;
  scroll-snap-align: start;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 5vw, 80px);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}
.slide h1 { font-size: clamp(2rem, 7vw, 5.5rem); line-height: 1.04; }
.slide p { font-size: clamp(1rem, 1.7vw, 1.35rem); line-height: 1.45; }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
@media (max-width: 600px) { .cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .deck { scroll-behavior: auto; } }
```

Use the same `100svh` unit for deck and slides. On mobile, `100vh` can include browser chrome, clipping the bottom or preventing a clean snap to the final slide. Shorten copy or split a crowded slide, but allow it to grow when zoom or large text needs more space. Never clip content to preserve a slide height. Test short phone viewports as well as wide desktop screens.

## Editorial defaults

- Put one idea on a slide: small context label, one claim, then one paragraph that earns it. Read the deck top to bottom as an argument.
- Use cards only for genuinely parallel items. A grid of boxes is not a substitute for a story.
- Lead with the concrete problem; show evidence or an example; close with the decision or next action. If there is unresolved work, say so plainly.
- Keep a predictable footer and sequential slide numbers. Default to a light theme and introduce a dark slide only when it serves emphasis.
- Use `clamp(min, preferred, max)` for main type and spacing. Collapse multi-column sections around phone width.

## Assets and branding

Read the organization's own brand-token skill when available. Map its background, ink, accent, type, and border tokens to CSS variables, then check contrast. Web fonts are optional; retain a system-font fallback for offline viewing. Use a verified public or bundled image URL in an `<img>` for a logo, never improvise an SVG path or copy another company's logo from memory. Keep charts and simple diagrams as editable HTML or SVG when useful.

If an image URL is relative to a site, resolve it to an absolute URL before putting it in a standalone HTML file. To keep a deck both single-file and offline, embed permitted assets as data URLs and test without network access. Colocated images or fonts make it a multi-file package. A single HTML file that loads remote fonts or images still needs network access.

## Verification before delivery

Open the file in a browser at phone and desktop widths. Check every slide for clipped text, missing images, legible type, sufficient contrast, and correct numbering. Swipe and scroll to the last slide on a mobile viewport. If you add JavaScript for keyboard navigation, syntax-check it and respect reduced-motion preferences. Save a final single-file HTML deliverable, or a format the user explicitly requests.