Option C, shown for real

What a page preview actually looks like

The option sheet showed option C with a drawn stand-in, which was a description of the idea rather than the idea. Below, the previews are the real thing: each card renders an actual page of this prototype at full width and scales it down inside the card. Nothing is illustrated. What you see is the page.

Read the thumbnails as a mechanism, not as content. In production each card previews its own service page. Only one service page exists so far, so four of the five cards below borrow other real pages from the prototype purely to show five different previews rather than the same one five times. The titles and summaries are the real ones.

Side by side

The drawing, and the real page

Same card, same size. Left is what the option sheet showed. Right is a live render of services-A-v1.html.

Drawn stand-in

Contract Negotiation and Maintenance

Real page, rendered

Contract Negotiation and Maintenance
C · live

The section with real previews

Five real pages, each rendered and scaled into its card. This is the effect option C is aiming at: the eye reads five pages before it reads a single word.

Related

Other ways we work with growing companies

C · as it ships

What goes live is a screenshot, not an iframe

Five live iframes are fine on a prototype and wrong on a real page: five whole documents load before the section can paint, and a page inside a page is a poor experience for a screen reader even when it is hidden. The production build generates one screenshot per page and serves it as an ordinary image, so the section costs five images. The look is identical to the row above.

Related

Other ways we work with growing companies

The catch

Three things to decide before choosing this

Screenshots go stale. Edit a page and its thumbnail elsewhere on the site is out of date until it is regenerated. Either it regenerates automatically on publish, or somebody owns it as a task. A drawn stand-in never goes stale, which is the one real argument for the version in the option sheet.

A shrunk page is unreadable by design. At this size the words are texture, not text, and that is the point: it reads as a page without being read. If a thumbnail has to be legible, it is a different device.

Every service page must look distinct. Five previews of pages built from the same patterns will look like five of the same picture. It works here because the borrowed pages differ; it needs checking once the real service pages exist.