Two reference diagrams rebuilt as interactive components

Jul 31, 2026

AI Generated ✨

Authgnosis Website

Two diagrams in the business growth guide were flat images. Readers could see the structure but not what any single element meant, because the explanation lived only in the surrounding prose.

  • Both diagrams are now interactive. Hovering or tapping any element opens a short plain language explanation, with the full layout on desktop and a stacked card view on phones.
  • Each runs as self contained HTML inside an auto resizing frame, so the page never shows an inner scrollbar and either diagram can be revised later without editing the article itself.
  • The desktop layouts were keyed to the browser width rather than the column they occupy, which would have shown most laptop readers the phone view. Both now switch on the width actually available to them.
  • A faint hover tint on both figures traced back to a site wide rule written for photographs, inherited through a shared wrapper class. Scoping the wrapper cleared both diagrams and left every other image on the site untouched.