
Show HN: A minimalist blog based on Tufte CSS - Eiriksmal
https://lawler.io
======
ordinaryradical
I have to say it is refreshing to see someone actually thinking about things
like line length when it comes to how their content is portrayed. To me, this
is not just being persnickety, it's about intention. If you want me to
resonate with your idea, the more clearly it is communicated (writing and
typography) the easier it is for me to get invested.

Look at the simplicity of articles on The New Yorker, for example, which are
very long but very readable because there's very little cruft to distract you
and the design is so simple. My experience there is almost interchangeable
with a "reader view" of the page, a feature that by its very existence should
communicate that the modern web has lost its way in thinking about these
things.

It's not that every site needs to be minimalist, but if you're writing essays
or text of substance, _caring_ about this kind of stuff goes a long way.
"Engagement" is not just how long I stick around but the mental investment I
put into what's there, and when it comes to writing, less design is often
more.

~~~
killjoywashere
I don't do webdev, so my primary use for the inspectors built into browsers is
to right-click-inspect-element and delete offending elements. I find myself
doing this especially on Wired articles.

~~~
vimslayer
Just a tip in case you don't already know: uBlock Origin would allow you to
permanently delete elements by a selector.

------
mirimir
> Why doesn’t this website fill 100% of your 1080p or 4K monitor’s screen with
> text? There’s a very specific reason, and that is text measure.

>> A block of text or paragraph has a maximum line length that fits a
determined design. If the lines are too short then the text becomes
disjointed; if they are too long the content loses rhythm as the reader
searches for the start of each line.

>> Wikipedia entry on “Measure (typography)”, 2019

> The optimal width of a paragraph of text is anywhere from 50–80 characters
> per line, depending on which of the many studies you cite. If a paragraph is
> too wide, your eye loses its place when tracking back to the beginning of
> the next line. This decreases reading comprehension—and increases my
> irritation when I realize I’m re-reading the same line.

OK, so have the text flow into multiple columns on wide displays.

~~~
larkeith
Columns don't really work well with scrolling, unfortunately. You can do
multiple pages of multiple columns or one scrollable column for longer content
- personally, I prefer the latter (and it's simpler technically), but either
works.

~~~
fian
Multiple columns don't work well for vertical scrolling. They should work fine
if you horizontally scroll to see more columns (for example to the right for
writing in English).

This would allow more content to be displayed for users with larger screens
without overly penalizing users who could only view one column at a time.

The challenge would be to convert the normal vertical scroll to a horizontal
scroll in an intuitive way (ie not too jarring for the user).

~~~
larkeith
That's a good point. I might have to try some experiments with side-scrolling
columns, see how it works out for longform reading.

------
gjstein
Love the Tufte style. One real limitation, however, is the "mobile view" in
which the margin notes collapse into clickable superscript numbers. I don't
think it's clear to most readers that one is supposed to click on those to
expand them, meaning they aren't likely read by perhaps 50% of your readers.
One thing I've seen, and adapted for my own site [1], is inserting these
margin notes beneath the paragraph in mobile mode; this way, the notes do not
go unread.

[1] [http://cachestocaches.com](http://cachestocaches.com)

~~~
Eiriksmal
Gregory, your margin notes look great in the mobile view. I'm using mine as
"frenetic" textual additions (thanks for the great description, HN
commenter!), which would be too messy to inject straight into the content
without a click-to-reveal.

It's a nice reminder, however, that search engines suck up the margin notes
and inject them in the text where they find them. I noticed my site is indexed
in Bing/DDG with the circle-cross icon in the middle of the text. I've been
placing them so they line up nicely with the paragraph they're found in, but
that doesn't lend to a very mobile-friendly reading experience.

A solution where I use eg cornflowerblue underlined icons, as suggested in the
sibling comment, would be a solid solution for my personal use-case.

~~~
xixixao
For me it was weird having to tap around (to open and to close) in such a
fluid article. It was distracting in a way. I would suggest trying to simply
insert them into parentheses on mobile, perhaps heavily grayed out if you want
to deemphasize, or if they're not that important drop them altogether.

------
Tomte
I love minimalist design, but have never understood the point of Tufte CSS. I
find it baroque, without a clear design idea (just look at all those font
sizes, combined with their apparent non-relationship to padding, for example
at those Hacker News quote notices), and quite hard to read.

~~~
Eiriksmal
I'm still struggling to get the <blockquotes> to look right. There's not
_quite_ enough of an offset from the body text. Do you have any suggestions
there?

In regards to font sizes, there are 5: H1s, H2s, H3s, body text, and captions.

Edit: Ahhh, and the paragraph lead ins makes 6 different sizes. That should be
adjusted.

~~~
kevingrahl
For blockquotes I personally favor a small 3px border-left thats preferably
colored. It provides a clear visual separation from the main content and most
people are accustomed to seeing a border-left as a quote from their usage in
email reply’s (quote level).

Here’s a link to one article on my blog as an example:

[https://tardis.digital/article/i-fucked-
up](https://tardis.digital/article/i-fucked-up)

------
wildmindwriting
I like your site design (and the most recent article), particularly the
side/margin notes. I had done a similar thing on a previous incarnation of my
own site but eventually decided to keep them in the footnotes section so that
the focus would be kept on the essay. But seeing them here makes me rethink
that decision.

I am slowly working my way through Web Typography by Richard Rutter
([http://www.book.webtypography.net/](http://www.book.webtypography.net/)) as
I redesign my website. You may find it helpful as well. Another inspiration is
Craig Mod's ([https://craigmod.com](https://craigmod.com)) site (of which I
took more than a few suggestions from).

Looking forward to reading your other articles! Good luck with the writing
practice.

Edit: Change 'first article' to 'most recent article'.

------
tills13
What's with this trend of blogs putting the full post in the catalog / archive
view? It makes it hard to scroll through to find something worth reading - I
just want to see titles and a snippet (a hook). If it's interesting, I'll
click in.

------
jez
Nice! I really like Tufte CSS. It makes using side notes really easy, even on
mobile. And it gives a very crisp look to the text.

I put together a project to be able to make new Tufte CSS sites with Jekyll:

[https://github.com/jez/tufte-pandoc-css](https://github.com/jez/tufte-pandoc-
css)

It makes it easy to use Tufte CSS with markdown (including side notes!)

~~~
Eiriksmal
Excellent! I'm positive I saw your plugin while researching the design for my
site. It looks like a great package of tools. In the end, I decided to stay
away from Rails and use Pelican + Python3. I needed an excuse to brush up on
my Python.

Regardless, we've implemented almost identical end-results (I also chose
Solarized light, heh) for two different languages' static site generators. All
we need is the creator of the Lisp equivalent to chime in...

Edit: Oh, I used Solarized Dark. Thought I swapped that for light at one
point, as there's not quite enough contrast across all display qualities.

------
meerita
I like fluid layouts because i like to control the width of every window I
open in my computer. I hate those 80-line & fixed designs so much. I enjoy the
freedom of setting the content the way I want.

------
jacobedawson
Nice article and a very pretty blog :)

I've found [https://outline.com/](https://outline.com/) to be great for
reading content on the net regardless of the original layout, as it basically
extracts the text and places it in a centered page with really legible line-
height, letter-spacing, font-size & family. Evernote used to have a similar
extension but it was sunsetted a couple of years ago.

~~~
kevingrahl
I love Outline but it seems to me that more and more websites are being
excluded from it.

Does anyone know if there’s a preferably open source alternative available
that I could host on my own server?

~~~
gyvastis
Hm, that's weird. They should be able to go around it easy enough.

I would love to know as well if there's an alternative.

~~~
kevingrahl
I‘m assuming Outline is blocking domains (nytimes.com comes to mind) when
those publications ask to be excluded.

------
lordgrenville
A similar idea is Athena[1], also based on Tufte CSS. It's a static generator
like Jekyll with a minimalist look. Pretty easy to set up and get going, and
integrates well with hosting on Github Pages.

[https://github.com/apas/athena](https://github.com/apas/athena)

~~~
q-base
Thanks a lot for this! I am really wanting to change my WordPress site to
something more simple. Been fascinated for a while about different minimalist
static sites, but never found a good way to get started. This looks like an
easy way to start, with something that is close to what I am after.

------
AndrewStephens
I really like the Tufte CSS style, so much so that I adapted it for my own
blog. In my opinion it suits the longer, more thoughtful posts that I was
trying to create.

Tufte-style presentation really shines when trying to convey very complex
ideas that require a lot of text. For example, this is my attempt at
explaining HTTP from the ground up[0]. The side-notes really help to add
additional information without breaking the flow of text.

That said, I don't think it looks that great on mobile devices in portrait
mode. I still haven't found a good solution to this.

[0]
[https://sheep.horse/2017/10/how_you_are_reading_this_page.ht...](https://sheep.horse/2017/10/how_you_are_reading_this_page.html)

------
weego
I wouldn't have guessed that those circles were clickable annotations on
mobile had I not looked at desktop view and wondered where they'd. I like it
as a principle but it's badly signposted as it doesn't feed into any existing
experiences.

~~~
Eiriksmal
This is a solid point, thank you. I'll see if I can think of a better way of
delineating the mobile margin notes. Maybe Stratechery or Wikipedia have good
examples of this.

~~~
gwern
I would just leave them as superscripts. Everyone knows what a footnote
superscript means and that they are hyperlinks you click on.

------
combatentropy
What do you all think of the @font-face font? In other threads, many people
here normally dislike web fonts (for example,
[https://news.ycombinator.com/item?id=19607169](https://news.ycombinator.com/item?id=19607169)).

Usually I'm with you, except for a few fonts like Google's EB Garamond
([https://fonts.google.com/specimen/EB+Garamond](https://fonts.google.com/specimen/EB+Garamond))
and the one used here, ET Book. I think these are better than Times New Roman
or Georgia, the two serif fonts I have to choose from if I don't go with web-
imported fonts.

~~~
JoshuaRLi
My opinion (not a web designer): don't let fonts define design, let them
compliment it later on - I know sometimes I would be choosing fonts even
before making the layout or content. For most sites, chances are web safe
fonts are perfectly fine. If there is a specific and justified design vision,
then choose wisely. Try and pull in one serif and one sans-serif font, at
maximum. I've seen sites that slap on a bunch of fonts and quite frankly, it's
not ideal. If possible, see if you can serve woff2, from a fast (or popularly
cached) CDN.

------
lenova
Took me a while to find out how to grab the code:

"Pelican static site generator config for Lawler.io":
[https://github.com/Eiriksmal/lawler-dot-
io](https://github.com/Eiriksmal/lawler-dot-io)

~~~
Eiriksmal
Thanks for correcting that omission.

My favorite feature is the one-click deployments. Through the power of SSH
keys, the site is deployed with a simple `make rsync_upload`. No Chef scripts,
no AWS CodeDeploy pipeline, just plain ol' rsync over SSH.

------
indigodaddy
I guess I assumed this was a blog engine or SSG of some like kind. After
reading the article I guess I gather that I assumed incorrectly. Good article
though and nice looking blog actually.

------
fouc
The text measure / line length argument probably makes sense for paperback
books, and that would likely extend out to mobile/tablet as well.

But perhaps it doesn't make sense when reading on the desktop.

In desktop, you can easily scroll the page to keep track of your spot. You can
also use the mouse cursor for to keep your spot in difficult areas. The gains
of having long line lengths likely outweigh the occasional difficulty in
keeping your spot. The eye reads across faster after all.

------
pmiller2
Reminds me in spirit of
[https://thebestmotherfucking.website/](https://thebestmotherfucking.website/)

------
lazyjones
> _The In both typography- and computer-speak, a character is an individual
> letter or typographic mark. optimal width of a paragraph of text is anywhere
> from 50–80 characters per line,_

So... Why does the blog format the main text body to be around 40 characters
per line on my default window size? If you want to put the focus on this range
of line lengths, you'll have to be more flexible with font sizes.

------
mattbgates
I saw Tufte CSS and loved it too. I'm glad to see someone putting it into
action. I loved it so much I wanted others to be able to use it. So I created
this nearly complete project to allow anyone to write Tufte essays, blogs, or
articles.

[https://writetufte.com](https://writetufte.com)

------
lucisferre
Kind of excited you like The Goal as much as I do. I had not heard of The
Phoenix Project though, so thank for that.

------
bradley_taunt
If you want to hit the ground running with a Tufte-based blog of your own, I
created an open source theme for Jekyll (easy to setup with Github Pages)

[https://et-jekyll.netlify.com/](https://et-jekyll.netlify.com/)

------
pwenzel
Tufte CSS works great for tabular data and print stylesheets too. I used it
for Instant Pot Cooking Times
([https://cookingtimes.info](https://cookingtimes.info)).

~~~
Eiriksmal
Nice! That does make for an extremely-classy table. My only suggestion is
that, at 1080p, there's an eye-water 330px gap between the text in the 1st and
2nd columns in the first table. This makes it a bit difficult to tell if
quinoa is 1:1.25 or 1:6-1:7. Perhaps there's an elegant way to clamp the
maximum table width that works for all 4 tables?

------
lichtenberger
Wow, really love it :) If I'd ever start writing a blog, would it be okay to
copy the CSS? :-)

~~~
Eiriksmal
Of course! Everything you need is in here:
[https://github.com/Eiriksmal/lawler-dot-
io/tree/main/theme](https://github.com/Eiriksmal/lawler-dot-
io/tree/main/theme)

~~~
eatplayrove
Thanks for myself too! :-)

------
megous
You can keep the rhythm and still fill the monitor by using multiple columns.
Newspapers do it.

~~~
kqr
How do you flow text from one column to the next, using as many columns as
there is room for?

~~~
Eiriksmal
kqr, there are a lot of usability problems that come from stretching columns
across the screen. There's a thread talking around some of them here on this
post:
[https://news.ycombinator.com/item?id=19621284](https://news.ycombinator.com/item?id=19621284)

My thinking is that most programmers love information-dense displays. But
designers have shown that empty space is vital to creating a truly _usable_
design.

If a website used some minor CSS to add a bit more line-height and slightly-
larger font than most browsers ship with, then fills 3840 pixels with wall-to-
wall-text, you'll successfully achieve the most information-dense possible
site, but utterly sacrifice readability.

Again, I don't think it's accidental that books don't use multiple columns of
66 characters in a landscape-style aspect ratio.

In true HN fashion, commenters are searching for a local maximum (use more of
my big monitor) that defies how ordinary people interact with the written
word. :)

~~~
kqr
Thank you for the kind advice. Don't worry, I won't use it on any sort of
content-heavy websites!

------
bill_rr
Three cheers to this!

I think you'd love what my best friend and I have been building for the last
two years. It's like Hacker News except no commenting on articles you haven't
read (and no skimming allowed!)

Check us out: readup.com

~~~
kevingrahl
I liked the idea but have to say I’m not a fan of your design. It just feels a
little rough. Also I expected comment chains to be collapsible. I also
experienced long load times for articles (>5s, some >15s) which is way to
long. The first article I read only showed a completion of 77% although I read
the whole thing. Not sure how you determine how much has been read but I
assume I’m just reading faster than what you’re used to.

