Show HN: A minimalist blog based on Tufte CSS

by Eiriksmal • 7 years ago

260 74 7 years ago

Tomte2• 7 years ago

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.

Eiriksmal9• 7 years ago

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.

Tomte2• 7 years ago

Unfortunately, I cannot give you any tips, because my practical design skills are non-existent.

For my own web site I gave up for the time being and am living with DokuWiki's default theme. But I'm planning to give it another try over Easter.

laszlokorte• 7 years ago

The lead ins are really hard to read: different font-size + capitals + not clear how they are chosen. I would just remove them.

h3 seems to similar to body text. Maybe because the top and bottom margin is almost identical

Maybe reduce/remove the paragraph gaps inside the block quotes and brighten up the citation.

kevingrahl4• 7 years ago

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

velcrovan2• 7 years ago

The content at the link is simply a poor adaptation of Tufte CSS. The text block has been made too narrow, lots of bloggy little headers and footers have been sprinkled everywhere, and marginal notes are used in a frenetic way that competes with the text.

The original design of Tufte CSS is good, but even that won’t convince a reader to take a super bloggy blog seriously (and I’m a fan of super bloggy blogs). The design has to match the ideas and the writing.

For comparison, here’s a one-off article of mine that I published using Tufte CSS: https://thelocalyarn.com/excursus/secretary/posts/web-books....

It’s my own thing, so obviously I’m biased. But I can say objectively: A) I didn't dick around with the original Tufte design, B) I rewrote it for a year until I felt it was telling a coherent message, C) to me it is much easier to look at than the above (why would that be?) D) it was very well received E) in the 3 (?) years since I wrote it, I haven’t written anything else for which I felt like Tufte CSS would be a good fit.

(Another thing to consider: the ET Book font in Tufte CSS just doesn't look very good on low-DPI displays.)

NikolaNovak• 7 years ago

That is fascinating, impressive, inspirational - thank you for the link & the article.

And yet, it's also demotivating to the point of being depressing. Clicking through the chain of links culminating with Polen and Racket, the sheer depth of the stack required, the learning & work, to create beautiful digital+printed books, feels like it has much to be desired :-/

7192DF8F• 7 years ago

Aside:

Your header interacts unexpectedly with the sidenotes and some of the images -- https://imgur.com/a/bgLRcvD

I tested on Safari 12 and Firefox 66; The book flipping video did not demonstrate that behavior.

kibibu• 7 years ago

I also find that all the pseudo-print fonts that people choose for Tufte-style sites are either blurry or have wildly inconsistent stem widths. Maybe it's a Windows thing.

weego• 7 years ago

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.

Eiriksmal9• 7 years ago

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• 7 years ago

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

bill_rr2• 7 years ago

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

jacobedawson2• 7 years ago

Yo - this could be a good idea but I wouldn't be able to tell (apparently) since I can't view any of the content without either downloading an app or signing up.

It might be a better policy to show visitors the top e.g. 5 - 10 trending articles on readup to get them 1.) to get a taste of what's shared and 2.) see if that's any better / different to what they'd find on hacker news (which can be read freely).

Anyway, good luck!

kevingrahl4• 7 years ago

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.

wildmindwriting• 7 years ago

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/) as I redesign my website. You may find it helpful as well. Another inspiration is Craig Mod's (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'.

ordinaryradical• 7 years ago

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.

dmix2• 7 years ago

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.

Most people (rightfully) are letting the frameworks handle this. The creators should be experts at typography, which includes line-heights and various rules. It's not a pure science though, so there will always be variation.

bill_rr2• 7 years ago

Well said!

The New Yorker is indeed pretty solid, but it's funny that that's the standard because - as you say - it's still not quite as good as most "reader modes." The margins contain ads and I feel like I'm seeing "suggested articles" (aka pictures of AOC) every 5 minutes - which is a lot of AOC since some of the articles take up to an hour.

killjoywashere• 7 years ago

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• 7 years ago

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

pmiller2• 7 years ago

Reminds me in spirit of https://thebestmotherfucking.website/

lordgrenville• 7 years ago

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

q-base• 7 years ago

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.

jacobedawson2• 7 years ago

Nice article and a very pretty blog :)

I've found 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.

dmix2• 7 years ago

Outline has a great homepage.

kevingrahl4• 7 years ago

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• 7 years ago

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.

lenova• 7 years ago

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

Eiriksmal9• 7 years ago

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.

AndrewStephens• 7 years ago

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...

pwenzel• 7 years ago

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

Eiriksmal9• 7 years ago

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?

gjstein• 7 years ago

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

_bxg1• 7 years ago

I would say just make the links look more like links. Make them a tasteful blue. Hook into that existing visual language everyone is familiar with.

Eiriksmal9• 7 years ago

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• 7 years ago

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.

kqr4• 7 years ago

That they're not visible on mobile is a feature, in my mind. The mobile reader is on the go and wants the short version without flavour text.

At least, that's why I did it the way I did at https://two-wrongs.com.

lichtenberger2• 7 years ago

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

Eiriksmal9• 7 years ago

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

eatplayrove• 7 years ago

Thanks for myself too! :-)

lichtenberger2• 7 years ago

Thanks :)

meerita• 7 years ago

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.

combatentropy• 7 years ago

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).

Usually I'm with you, except for a few fonts like Google's 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• 7 years ago

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.

megous2• 7 years ago

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

kqr4• 7 years ago

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

megous2• 7 years ago

CSS column.

Eiriksmal9• 7 years ago

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

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. :)

mirimir4• 7 years ago

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.

larkeith2• 7 years ago

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.

dfox• 7 years ago

Current Microsoft's UI guidelines seems to prefer viewport height columns and horizontal scrolling, which makes much sense, but the UI which presents sane UX with that idea simply is not there yet.

mirimir4• 7 years ago

True.

But you can get display size, and paginate with ~80 character columns. So there's no need to scroll. As you say, scrolling really only works with one column. When I need to read lots of stuff that's hard-coded with two columns, I rotate my monitor to portrait.

fian• 7 years ago

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).

fouc2• 7 years ago

This line length stuff probably only applies to books/mobile/tablet, but not desktop where it's easy to keep track of where you are w/ scrolling & the mouse cursor.

Eiriksmal9• 7 years ago

I've been thinking that through today, actually. Newspapers don't choose multi-column layouts because it's the easiest to read--it's to make the most of an expensive resource available in a fixed size. Besides that, imagine the UX difficulty in unrolling a pre-Gutenberg scroll to catch up on the day's news!

For a computer, even if you could fit 4-8 text columns on a 5K monitor... What do you do if the content demands a 5th-9th column? You'll have to scroll.

As someone else pointed out in the first iteration of my design here, using non-standard behavior for the margin notes in the mobile view meant it took experimenting to figure out that tapping on a cross-in-a-circle icon would expand additional flavor text. A distinctly un-cool surprise.

When presented with a multi-column text layout, would a user know how to intuitively use the site? They're trained to look for a scrollbar on the right side of the screen to indicate "Hey, friend! More content below." Would you keep adding columns and scroll horizontally indefinitely? There are a lot of challenges to overcome in that design.

The appeal of the Tufte-styled site, for me, is the side notes/margin notes. The whole site is ~1200px wide in three columns. 200px nav, 600px text body, and 315px side notes--the rest is padding between columns. The design takes advantage of the "wasted" space to add in delicious flavor text that I'd otherwise cram in with loads of em dashes and lengthy parenthetical asides.

I designed the page on a/for a 1080p screen, assuming most 4K+ users are used to seeing websites hang out in the middle of their massive TV-sized displays.

Someday, though, it'd be interesting to see if there's a way to combine more information density on a high resolution display without sacrificing readability/usability.

mirimir4• 7 years ago

My display is only 1900 wide, and it annoys me to scroll 80-character columns. Especially when they blow up to 30+ points, and I need to resize the browser window.

If WP for DOS could format multi-column pages, I can't imagine that it's that hard. Scrolling sideways is pretty intuitive. And it's become common for image slideshows. Or one could replace continuous scrolling with jumping to the next page.

anoncake• 7 years ago

Besides that, imagine the UX difficulty in unrolling a pre-Gutenberg scroll to catch up on the day's news!

Bound books (codexes) existed before Gutenberg.

lucisferre• 7 years ago

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.

fouc2• 7 years ago

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.

tills13• 7 years ago

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.

indigodaddy• 7 years ago

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.

jez• 7 years ago

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

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

Eiriksmal9• 7 years ago

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.

lazyjones• 7 years ago

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• 7 years ago

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

bradley_taunt• 7 years ago

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/

Show HN: A minimalist blog based on Tufte CSS

Related Stories