Layout demos

Side-by-side comparison of four how-to guide layouts using the same IPO content.

Option 1

Encyclopedic

Wikipedia-style: sticky TOC sidebar, right-floating key-facts infobox, dense single-column prose. Best when guides also serve as reference.

Option 2

Step cards

Numbered cards with prerequisite checklist at the top. Optimised for someone following along, not reading.

Option 3

Docs sidebar

Persistent left nav with the full guide tree, centred content, right on-this-page rail. Best for browsing laterally across many guides.

Option 4

Tutorial with screenshots

Hero image plus alternating screenshot-and-text rows. Heavy visual hand-holding for UI-driven guides.