-
Notifications
You must be signed in to change notification settings - Fork 0
Navigation and Interaction
PutOut gives your readers a polished reading experience out of the box. All of the features below work automatically — there's nothing to configure.
Every chapter page has a sidebar listing all your chapters. On desktop, it sits on the left side of the page. On phones, it's hidden behind a hamburger menu button (☰) in the top-left corner. Tap the button to slide it open; tap outside or press Escape to close it.
The sidebar highlights which chapter the reader is currently on, making it easy to jump between sections.
A colored bar runs across the top of each chapter page, showing how far the reader has scrolled through the chapter content. It reaches 100% when the reader gets to the end of the chapter text — not the bottom of the page. The bar uses your chosen accent color.
Readers can navigate between chapters using the keyboard:
- Left arrow (←) — Go to the previous chapter
- Right arrow (→) — Go to the next chapter
These only work when the reader isn't typing in a text field.
On phones and tablets, readers can swipe left or right to move between chapters — just like flipping pages in a book. The swipe needs to be at least a small horizontal movement to avoid interfering with normal scrolling.
A button in the footer lets readers switch between three modes:
- Light — White background, dark text
- Dark — Dark background, light text
- Auto — Follows the reader's operating system preference
The reader's choice is remembered between visits. Your accent color automatically adjusts for each mode — lighter shades are used for text on dark backgrounds.
After scrolling down a chapter, a floating button appears in the bottom-right corner. Clicking it smoothly scrolls back to the top of the page. It stays out of the way until the reader has scrolled far enough to need it.
On phones, a fixed bar sits at the bottom of the screen on every chapter page. It has three elements:
- Previous chapter link (left side, with the chapter title)
- TOC button (center) that opens the sidebar
- Next chapter link (right side, with the chapter title)
Chapter titles are automatically shortened if they're too long to fit.
As the reader scrolls through a chapter, PutOut quietly loads the next chapter in the background. By the time the reader finishes and clicks "Next," the page is already cached and loads instantly. This happens behind the scenes — readers just notice that page transitions feel fast.
All of these features are built in and work the same way regardless of your theme, fonts, or chapter setup. You don't need to enable anything — just write your chapters and your readers get a polished experience.