Optimizing for text-mode browsers

I still use text-mode browsers (mostly w3m, sometimes Lynx), especially on old computers, because they're fast, use little memory, and don't take up much disk space. They also aren't funded by ad cartels, but that's not my primary motivation.

While the prior version of this site was functional in text-mode browsers (thanks to minimalist design and static HTML), I wanted to try optimizing for text-mode (and old) browsers first , both so that the site works great in those browsers and also as an exercise in simplicity.

Issues with the old design

While I liked the CGA palette of my previous blog theme in graphical browsers, it was unwieldy in Lynx and w3m because:

You had to scroll past a list of tags to get to the main content

The article list took up too much vertical space

The publish dates of articles weren't visually obvious

See for yourself:

Screenshot of the old design in Lynx

It was better than most of the modern web, but I didn't enjoy it.

Fixes

Header

The obvious way to ensure text-mode users don't have to scroll past branding and navigation links is to put those features last in the HTML and have CSS display those items up top (CSS is generally ignored by text-mode browsers).

But I took a simpler approach and just dropped branding from all but my landing page and then moved the tag list to the end (and kept it there, even for modern browsers) on most pages.

Now, when you open the site in Lynx, you get to the content right away:

Screenshot of the new design in Lynx

(I also added an introductory blurb, but for the landing page I'm counting that as content.)

Article list

To simplify the article list, I decided to group articles by year, align their publish dates, and just not bother to show a (usually redundant) blurb. The result looks great in monochrome w3m:

The new, concise article list, as shown in w3m

Syntax highlighting

Pushing beyond reasonable affordances, I decided to use old school and tags for syntax highlighting, to ensure syntax highlighting was applied both on text-mode browsers as well as older graphical ones.

Here's functional syntax highlighting in Internet Explorer 6 (on Windows XP):

Syntax highlighting even works in IE6!

Dark mode

Unrelated to text-mode browsing, I took this opportunity to finally implement both light and dark mode:

:root {<br>color-scheme: light dark;<br>--lighter: color-mix(in srgb, currentColor 70%, transparent);<br>--bg: color-mix(in srgb, currentColor 12%, transparent);

That's it. Rather than torture myself with choosing colors for both light and dark color schemes via media queries, I decided to try taking advantage of modern browsers' default stylesheets and then just crank up/down the amount of color (via transparency). I had toyed with this approach before, but Safari on iOS had a broken dark mode default stylesheet for many years (resulting in dark blue-on-black links). Fortunately, that issue finally got resolved, so I can unleash this questionable design upon the web!

Bonus benefits

One side effect of optimizing for text-based browsers is that older and more limited browsers benefit as well. In fact, the new site looks only marginally worse with CSS disabled entirely:

This site with CSS completely disabled

The acid test of old browsers is NCSA Mosaic. I doubt anyone still uses it for anything more than historical curiosity, but it's nice to see my site render fine on a roughly 30 year old browser:

This site works OK in NCSA Mosaic

Compromises

I doubt that deferring color decisions to browsers' default stylesheets is going to catch on. Maybe I'll eventually decide to choose my own colors (perhaps from the EGA palette, this time). Relying on default colors and transparency might introduce issues with low contrast.

I also opted to switch the tag list from a semantic list into just a bunch of links separated by "|" characters. I'm sure this is suboptimal from a semantic web (and perhaps accessibility) perspective, but I didn't see a simple and obvious solution to collapse the list onto a few lines in text-mode browsers without this sacrifice.

Regardless, if you notice any egregious problems, send me an email.

Conclusion

Is this a good idea? I think keeping sites simple is a good idea, but optimizing for rarely used browsers is, at best, probably not a good use of time. Additionally, fiddling with CSS feels a bit silly when most readers would best be served using their browser's reader mode anyway.

But the great part of having a personal web site on The Indie Web is that you can do crazy experiments like this. I hope you enjoy my creation.

If you like this theme, possibly because you have analysis paralysis around color schemes, I will be integrating it directly into the luasmith static site generator (the code is in the repository, but I haven't cut a new release yet). Feel free to copy any portion of the design.

Credit

While brainstorming new ideas and tweaks, I was inspired by the design...