1
2
3
4

The best way to read the Enchiridion.

The Enchiridion is a fascinating, easy read filled with valuable insights. Unfortunately—even with multiple public domain translations—reading it is often a bad experience.

Between old and sometimes confusing language, hard to find and even harder to download files, and outdated websites, there are too many barriers between an interested reader and the book.

The Manual  addresses these issues trough a carefully crafted web experience, enabling frictionless reading of a variety of translations.

Design direction

While the content is the focal point of the site, its presentation is how we solved the problems listed above. Balancing the tension between the simplicity of “just text on a page” and the limitless possibilities of the web, I choose to take inspiration from print and offer an almost “Just text” experience, where interactive elements fade in as you reach for them but don’t disturb your reading.

The “Reading progress” flow best exemplifies these interactive elements; Nothing is said as the user reads a translation, but when they visit the homepage again, a subtle text indicates their reading progress. If they choose to read the same translation, an option to continue from where they left off appears. My goal was to make this a “wow moment” inspired by video games that sets the tone of the site, “things will work without getting in your way”.

The recent dark theme update follows the same “show, don’t tell” pattern by choosing a theme based purely on system preferences, and a “highlights” feature is planned in the public roadmap .

Visual design

The visual design of the site exaggerates the print aesthetic and feel by heavily borrowing defining characteristics and working within carefully built constraints:

  1. Links have directional arrows, going to translations is represented by pointing to the right, and going towards the landing page is represented by pointing to the left, mimicking the turn of pages in a book, forward to the content, and back to the index.
  2. No “HUD-y” menu, the site needs navigation but it felt right to put links along the body of the document, contextualizing them and allowing users to explore “paths” through the book.
  3. No “button-y” buttons, clickable elements with clearly defined borders and backgrounds felt out of place in a book. Instead, I made deliberate use of underlined text for links and icons for various interactions.
  4. No pure black or white, shades of tinted gray feel more real, and with a grainy overlay achieve a paper-like look.
The landing page mimics a book cover.
The chapters borrow from actual books with generous line heights, chapter numbers and drop caps.
The “compare” pages were inspired by newspapers’s approach to dense information in using columns, adapted to the infinite scrollable canvas of the web to include more whitespace and wider columns.
The About and Sources pages use layouts inspired by magazines with their horizontal spread and use of whitespace.

Technical details for nerds

Before writing any user-facing code, I spent some time playing with golang to transform 8 translations into 424 markdown files . Then, wrote other scripts to bulk-edit these files and their metadata as needed .

I approached development from a static-first angle, the site is usable with javascript disabled and on pretty much any device, it even . Leveraging Astro  I generated hundreds of pages for translations, chapters, and comparisons using data from the markdown files to populate a few templates.

For the interactive bits, I used islands of Solid.js  and scripts with no framework. Deploying on Vercel  meant sub-minute build times even with 490 pages, including the monstrous “compare all translations” page  with 13200 DOM elements. Additionally, tailwindcss  allowed me to colocate styles and markup without sacrificing functionality.

Other relevant technical details include: Prefetching of next pages based on user interaction, resulting in snappy navigation for an Multi Page Application, relocation of analytics script to web workers via Partytown , and build time image optimization to speed up the site.


For further details, refer to the source code available on GitHub .

Type of work

  • FrontEnd Developer,
  • UX/UI Designer
Project type

Personal

Tools

  • Typescript,
  • Astro,
  • SolidJS,
  • TailwindCSS,
  • Partytown,
  • Golang,
  • Vercel
Date

2022