00 / 06Workflows

A website is the best presentation you can give

People do not think about using a website as a presentation, and it is one of the best things you can do for a room.

Show up to present a breakdown to a client, or a new marketing strategy, and it is all in one immersive, responsive, animated HTML file. You can send it ahead, pull it up in any browser, and walk them through it. Marcel Patillo does this for clients: the deck lives in one file that works everywhere.

7 min
03 figures
02 links
In depth
Updated Oct 2026

Fig 01One file, three screens: the room, the laptop on the table, and the phone it gets read on afterward.

Inside

01Why it beats slidesFigureListTable
02How to brief itCode
03The structure that worksFigureList
04The walkthrough on the day
05What to avoidList
06Do this today

01 / 06

Why it beats slides

A slide deck is a stack of fixed rectangles.

Fig 02A deck is a stack of fixed rectangles. A page is one argument that reflows for the screen in front of it.

A page is one continuous argument. The differences show up fast in a meeting:

One fileNo app, no login, no export. It opens in the browser that is already on every laptop, phone, and TV.

Any screenThe same file reflows for the boardroom display, the laptop on the table, and the phone someone reads it on in the car afterward.

Motion carries the argumentA number that counts up, a diagram that draws itself, a before and after you can drag. In slides this is decoration. On a page it is the explanation.

The client keeps itYou send the file and they scroll it again on their own time, with every chart still working.

Table5 rows

	Slide deck	HTML presentation
Works offline	Yes, in its app	Yes, in any browser
Any screen	Fixed 16:9, scaled	Reflows for the screen in the room
Motion	Transitions between cards	Scroll-driven, interactive, part of the point
The client keeps it	An export, often flattened	The same file, still live
Editing after the meeting	Reopen the app, re-export	Change the file, resend

02 / 06

How to brief it

The brief decides whether you get a presentation or a brochure.

Text

AUDIENCE
Who is in the room, and what they already believe.

THE DECISION
The one thing this presentation should move them to do.

CONTENT
[the strategy, the numbers, the quotes, the work, in order]

FLOW
One idea per screen. Scroll-driven. Arrow keys also advance.
Cold open, problem, proposal, proof, plan, ask.

RULES
Readable on a phone. Works offline. No autoplay sound.
Respect reduced-motion settings.

Notes

Start with the audience and the single decision the deck should move. Then hand over the real content, the numbers, the quotes, the work, before you say a word about design. Direction comes last, and a design skill such as the one in the four skills we reach for every week keeps it from looking like a template.

Pacing is the part most people skip. One idea per screen. A flow that moves by scroll or by arrow keys, never both at once. And one hard rule: everything has to read on a phone, because that is where the client will open it the second time.

03 / 06

The structure that works

Six screens, in this order, cover almost every pitch we have given:

Fig 03The six screens that carry almost every pitch, in order: cold open, problem, proposal, proof, plan, ask.

Cold openOne image or one line that sets the stakes before anyone sees a logo.

The problem, in one screenWhat is not working, stated so plainly the client nods.

The proposalWhat you are recommending, in one sentence, then the shape of it.

ProofThe work, the numbers, the comparison. This is where motion earns its keep.

The planPhases, dates, who does what.

The askThe decision you want, and what happens the day after they say yes.

04 / 06

The walkthrough on the day

Present from the browser, full screen, with the tabs and bookmarks hidden.

Notes

Move with the arrow keys or the scroll wheel, whichever you rehearsed with. Have the file in three places: on your laptop, on a USB stick, and in the inbox of the person who booked the room. Arrive early and open it on the screen in the room, because the screen in the room is never the screen you tested on.

05 / 06

What to avoid

Autoplay sound. The first thing the room hears should be you.

Heavy video that stalls. Compress it, or use a short loop that is already on disk.

Anything that needs the internet. Fonts, images, and data belong inside the file or beside it.

Text sized for a laptop. If the back of the room cannot read it, it is not on the screen.

Motion that cannot be turned off. The file should honor the viewer's reduced-motion setting and still make sense without animation.

06 / 06

Do this today

Take your last slide deck. Pick the three slides that mattered, and rebuild them as one scrolling page with the brief above.

Notes

Open it on your phone, then on a TV. If it reads on both, you have a presentation that travels.

02 links

Resources

Every link this breakdown leans on, in one place.