CertBrain and Finance Brain lessons used to be one long page. They now show one section at a time, and every lesson and blog post has an Aa button for text size, spacing, width and font. Both changes came out of reading the research on learning from text, and both had to work for every lesson already written.
Why steps
A meta-analysis of 56 studies found that splitting instruction into parts the learner moves through gives small-to-medium gains in what people remember and can apply, and lowers how heavy it feels. The cost is more time spent learning. We treated that as acceptable, and decided not to read longer time on a lesson page as a problem.
Splitting without rewriting
Every lesson is Markdown, already written with ## sections. So the sections were already there; we only had to show them one at a time.
The lesson renderer already turns Markdown into a sanitised tree and reads the headings off it for the table of contents. We split that same tree at its ## headings, so the step a heading lands in and the contents link pointing at it always agree. Text before the first heading joins step one. A lesson with fewer than three sections stays on one page, because two steps is just a page break.
The current step lives in the URL as ?step=. Refreshing, or pressing the browser’s Back button, keeps the reader’s place. A link to a heading, from the contents list or anywhere else, opens the step that holds it and scrolls there. Focus moves to the new step, so a screen reader announces it. Show all puts the whole lesson back on one page for anyone who prefers to scroll.
Text settings without a flash
The Aa button sets four things: size, line spacing, width, and either the site’s font or the device’s own. The choice is saved in the browser; there’s no account setting and no database change.
The tricky part was load time. A setting read by client-side code after the page loads would show the default size for a moment, then jump. Instead, a small inline script in the page head reads the saved choice and writes it onto the <html> element as data attributes before anything is drawn. The stylesheet maps those attributes to CSS variables on the article text. The page’s first paint is already at the reader’s size.
We left out a “dyslexia font” option on purpose. Wallace et al. (2022) found people read at very different speeds in different fonts, and that the font they prefer doesn’t predict the one they read fastest in. OpenDyslexic gave no improvement for children with dyslexia compared with Arial. Adjustable size, spacing and width in a plain font is what the evidence supports.
See it in a CertBrain lesson.