User:Ailepet/Web design notes

The following are miscellaneous notes about web publishing principles to adopt before thinking of how to approach web publishing practically

The three main families of read-only digital text

Text is usually read in one of the 2 following mediums:

• on paper: books, zines...
• through a screen:
  • either by browsing an ad-hoc online protocol: WWW, Gemini, Gopher, emails
  • or by downloading a self-containing file: PDF, epub

Some people are proudly "paperless" and prefer reading on screens, either LED or e-ink. Other would rather favor print as the quintessential low-tech medium. Ideally, as writers, we want to express ourselves on both mediums.

If we're thinking of all of these deliverables as text to be read rather than edited, both paper and screen mediums could be adressed through one of three categories of digital text files:

• files made to be printed into paper; e.g. PDF
• files made to be read on an local-first, often-offline, sometimes black-and-white-only device; e.g. ePub
• files made to be read on an online browser, through a 9:16 or 16:9 color screen between 12 and 70 centimeters of diagonal; e.g. HTML/CSS

(do we need a 4th category for slideshows?)

So, how do we get to these 3 formats? Could it be possible that they can be authored all at once from a single source?

From the web to the print

Kinds of websites

We can roughly sort websites on an axis:

• on one side, static websites, in the sense of: text and images that are displayed according to the wishes of its editor (the reader can, of course, alter it using the browser's tools, e.g. by disabling CSS). This is the simplest form of digital text served online: you can read it straight from your browser without downloading a specific file. They can be served by a simple web server through a small webhost such as Deuxfleurs or Neocities or free.fr (or countless others)
• going slightly further to the other side, there are multimedia websites. Those can play animated pictures (GIF or video), or sounds. They can still be static per se but they stop being digital text only: they require more complicated technology to be correctly output (a LED screen opposite to a e-ink slate; loudspeakers or jack output).
• keeping going further to the other side, there are blogs, forums and social websites. Those can leverage syndication feeds, microformats and ActivityPub to connect with each other (see IndieWeb). They need an active internet connection and dynamic server-side content generation to work.
• all the way to the other side, there are the fully interactive websites. Those can be bona fide apps. They require the most computational power on the user's device.

Let's draw a line between the static websites and everything else: we will focus here on static websites as both a deliverable and a suitable basis for the 2 other formats (PDF and epub).

Static websites as digital books

"Digital books should be the best books we’ve ever had" (Matthew Butterick, "Pollen: the book is a program")

Some examples:

• https://livres.louvre.fr/
• https://famicom.party/book/
• https://practicaltypography.com/
• https://hypermedia.systems/book/contents/
• https://mislav.github.io/diveintohtml5/

Static websites as academic essays

See https://www.arthurperret.fr/blog/2025-06-13-le-futur-de-l-edition-scientifique-est-au-format-texte.html

Most teachers ask for PDFs, not for printing the essays (although this is what PDF is designed for), but for its immutable quality, regardless of the bad ergonomics of reading a PDF on a screen (especially a small screen, e.g. smartphone)

However, a lot of papers are already served in a HTML/CSS format:

• Open science platforms:
  • https://shs.cairn.info/
  • https://journals.openedition.org/ (using Lodel and TEI)
• Individual web pages:
  • https://joelgombin.github.io/makingof.html (using R Markdown and probably https://github.com/rstudio/tufte)
  • https://ateliers.esad-pyrenees.fr/pagetypetoprint/demo/esadpyrenees/
  • https://memoire.emma-jade.fr/ (should a thesis count as a digital book?)

Distinguishing between writing and styling

https://www.arthurperret.fr/blog/2020-05-22-ecrire-et-editer.html

https://ia.net/topics/markdown-and-the-slow-fade-of-the-formatting-fetish

https://en.wikipedia.org/wiki/Separation_of_content_and_presentation

Writing alone can be done in a notepad (paper and pen) or a bare-bones text editor (digital). When using a a bare-bones digital writing tool, Markdown allows to add a minimal amount of semantics and hypertext.

Styling can either be made at the same time as writing, or in a later phase

Start from Markdown (always?)

See Data flowchart below

https://johnmacfarlane.net/beyond-markdown.html > https://github.com/jgm/djot

Styling as an option?

"a smolwebsite must be readable without any CSS and JavaScript code" (Adële, "Guidelines for a smolweb")

"If you can show me an e-book format that gives me the same control over typography and layout that I can get in a web browser, I’ll consider it." (Butterick, "Why there's no e-book or PDF" (Practical Typography))

Workflows and tools

https://www.arthurperret.fr/blog/2023-04-03-le-bon-outil.html

We will focus on opensource tools only, with a preference for local-first

All-in-one (or most-in-one) tools

• Zettlr ("From Idea to Publication")
• typst.app ("Focus on your text and let Typst take care of layout and formatting")
• Lodel
• Scenari
• mdBook
• Gabarit Abrüpt
• Pollen
• LibreOffice Writer

Mutable tools

Text editors

Collaborative

• HedgeDoc (public instances)

Individual

General purpose

• Text Editor (GNOME) / KWrite (Plasma) / Mousepad
• Notepad++

Markdown-focused

• Apostrophe (GNOME) / ghostwriter (Plasma)

Static site generators

• MkDocs
• Lichen-Markdown
• Hugo
• PageTypeToPrint
• https://filiph.net/text/the-revenge-of-server-side-includes.html

Converters

• Morphosis

Diagrams

Markdown-first data flow: raw SVG

Tools interactions: todo

To sort

• https://radicalweb.design/ressources/
• https://toolkit.wellgedacht.org/doku.php?id=start