turntrout.comis now at 1.1, after about 1,300 more commits. Some of the commits addressed feedback from your generously detailed comment:
Auto-dark mode!
List indents now consistent (if I understood your point correctly); before I was doing something hacky with a content: override on the list markers.
The mobile table of contents is open by default,
I’ve reduced clutter but haven’t cut many flourishes. Consider the before and after:
At site launch
Now
I removed distracting flourishes outside of the main text (like favicons in the side bar),
removed most underlines outside of the main text (like in the “Tags” section) and from e.g. date superscripts,
tweaked font weights and anti-aliasing,
removed italics from “The Pond” title (just another font variant on the page),
gave elements more room to breathe (like with the “Links to this page” chain-link icon; it now has appropriate margin-right), and
improved alignment along the margins (creating two “gutters” running along the center).
The site is still somewhat busy, granted.
The overall feature diff from the last four months is much longer. I may write another post about it. I haven’t yet gotten to the really fun features on my list, like the ability to listen to AI-generated readings in my voice (for the less math-y articles). I’ve focused on linting and testing the hell out of everything.
Changes not made (yet?)
Smallcaps kept; I personally enjoy them too much to cut them!
I want to do something about the desktop logo animation being distracting. I don’t know what that is, yet. I can’t play/pause the GIF on hover because GIFs don’t allow that (AFAIK). I’ll probably find a way to move it to a WEBM while also making it autoplay across browsers, at which point I can implement the feature.
I still need to make the mobile site “icon” different from the full-size GIF.
I don’t really mind the zeros. If I hear from more people that the slashed zeros bother them, I’ll reconsider.
I think it’s substantially better and calmer—even just the thumbnails look calmer now.
I still think you are going a bit overboard on visual complexity, things like slashed-zeros aren’t bad (I like them), just too much of a good thing and using up your visual complexity budget where there may be a better deal elsewhere: the question I ask myself is, “do I want to look at this for the next 20 years? If I add X, will it ‘look painfully 2025’ in a few years?” Elements which don’t seem excessive in the excitement of implementation may, with the passage of time, gradually come to rub you the wrong and need to be sanded down or removed. If you aren’t careful, you may slowly, one accretion at a time, come to resemble a site like “Agora of Flancia”: encrusted with neat experimental features which are too half-baked to be genuinely useful, but which burden and deter readers. (I try to avoid a reluctance to ‘kill my darlings’ by cultivating the mindset that every addition is an experiment, and thus if I have to remove them, they’re not wasted, they’re just a new ‘Design Graveyard’ writeup, is all.) But I suppose you’ll find out your own preferences on this matter over the next few years as the novelty wears off.
I want to do something about the desktop logo animation being distracting. I don’t know what that is, yet. I can’t play/pause the GIF on hover because GIFs don’t allow that (AFAIK). I’ll probably find a way to move it to a WEBM while also making it autoplay across browsers, at which point I can implement the feature.
I also still think that the logo should probably not play by default, and for animations like this, it’s better to take an Apple-like attitude about them being enhancements, opted into by user actions, to ‘spark joy’, but not to be used by default. What do the worst websites do? They animate tons of stuff gratuitously. How much more delightful it is to discover a website with taste & restraint, where there are easter eggs and features to discover as you surf, where, say, the animated logo plays only when you hover over it… Truly an oasis or quiet little pond amidst the howling desert of the contemporary Internet. (I’m reminded of a Family Guy meme I re-ran into recently: why does Peter Griffin dislike The Godfather? Because “It insists upon itself.” A website animating the logo unasked for insists upon itself.) And this helps instill a design feature: you the reader are in control, and you express this control in part because you can hover over everything to learn more or focus on some things.
However, if you insist upon it, perhaps you could reduce its impact by some sort of limitation. Let it cycle a few times or seconds, and then slow it down or fade it or stop it. If the reader hasn’t appreciated it by then, why keep flickering it in the corner of their eye? Another idea would be a site-wide limitation on animation: on Gwern.net, we have a ‘demonstration mode’ feature which tracks how many times something has happened / been shown, and changes it (usually to disable it) after n times, tracking n site-wide by using a cookie in LocalStorage counting that particular event. We use it to do things like simplify obtrusive text labels, or to disable the educational theme-toggle-bar animation after a few animations.
Also, have you considered animating the dark-mode setting to move the sun/star around? The sun over the pond to the right, then the moon to behind the castle and swap the palette for a ‘night’ palette. (The ‘night’ label can be omitted, typeset vertical, or you can do it by horizontal mirroring of the whole image.) If you don’t do something like that, that would be a real shame. The perfect twist on dark-mode for The Pond.
like the ability to listen to AI-generated readings in my voice (for the less math-y articles)
This sounds like it would make for a better project & writeup than actual long-term website feature intended for actual reader use. Is this something readers want or will use? It never once occurred to me that I might want a spoken version of your articles (human, AI sexy-Scarlett-Johansson, or AI-Turntrout—ok maybe Scarlett). These aren’t poems or autobiographical essays or even fiction, where there can be value to hearing the author read it. (Although even there most of the reasons to want that are ones where an AI can’t substitute: if you want to hear the author’s unique intonations or pacing for subtle insights into the text or the author*, obviously an AI model voicing it is useless.)
On a sidenote, ahem, you might want to rethink how the popups work. I was unaware you even had popups, until I noticed in the network tab that a lot of pages were being prefetched when I hovered over them. It might be an oversight to prefetch if you aren’t doing a popup. But regardless, since I’m on a fullscreen 4k portrait monitor, and I have to zoom out before I can see popups at all, you may have gone overboard in your width requirements.
* when I questioned the value of Dwarkesh Patel et al investing in making a spoken version of our interview, this was given as one of the reasons that people valued audio over the transcript. We split the difference by the voice actor, Chris Painter, having the audio and performing it. It’s uncanny for me to listen to.
I also still think that the [site-wide pond video] should probably not play by default
Per your suggestion, the pond video no longer plays by default:
By using micromorph to preserve the video element, the video doesn’t unload as you navigate through the site. Therefore, the current video frame stays constant until the user hovers over the video again. Since the auto / light / dark mode selector hovers above the pond, “what does the ‘auto’ text mean’ → ooh, the ‘image’ moves!” provides a natural interaction pathway for the user to realize the “pond image” is actually a “pond video”!
But regardless, since I’m on a fullscreen 4k portrait monitor, and I have to zoom out before I can see popups at all, you may have gone overboard in your width requirements.
The desktop view (and therefore, popups) now render at viewport widths as thin as 1305px. Previously, the minimal width was 1580px.
“Auto” has a label, while the others do not—likewise confusing
The “Auto” label is styled just like the sidebar links, but of course it’s not a link at all (indeed, it’s not clickable or interactable in any way)
For #1, I suggest the “black & white cookie” (a.k.a. “contrast”) icon, as seen on gwern.net (this trio of “B&W cookie” / “sun” / “crescent moon” for “auto” / “light” / “dark” is becoming increasingly common for tri-state mode selectors, in my experience).
For #2, you should label all or none. My advice would be “all”, with a compromise: show labels on hover only (and make them a bit less obtrusive, and style them differently: smaller text, put the label off to the left—there’s room, given the shape of the logo—and perhaps set them in smallcaps? or even a different font, perhaps a sans; this would also solve problem #3).
The “auto” icon is the sun if auto says light mode, and the moon if it says dark mode. Though ideally it’d be self-explanatory.
A black-and-white cookie hanging above the pond doesn’t quite have the same charm as a sun or moon, I’m afraid. Therefore, unless UX substantially suffers from lack of a specialized icon, I’d prefer to keep the existing asset. I’m open to argument, though.
The “Auto” label is styled just like the sidebar links, but of course it’s not a link at all (indeed, it’s not clickable or interactable in any way)
This is a good point. That interpretation would have never occurred to me! The simplest solution feels too busy:
Here’s what I’m currently leaning towards for addressing (2) and (3), ignoring potential issue (1) for now:
I found setting it in smallcaps to be quite distracting, so I settled for italics. What do you think?
I was hoping to have the hover-mode animation seamlessly pause and unpause—your proposal would have the displayed image revert back to the first frame on mouseleave IIUC.
your proposal would have the displayed image revert back to the first frame on mouseleave IIUC
Yes, correct.
I was hoping to have the hover-mode animation seamlessly pause and unpause
This SO question has several answers, all of which seem like reasonable solutions to me (if I were doing this, I’d try them all and pick the most performant one, most likely).
turntrout.comis now at 1.1, after about 1,300 more commits. Some of the commits addressed feedback from your generously detailed comment:Auto-dark mode!
List indents now consistent (if I understood your point correctly); before I was doing something hacky with a
content:override on the list markers.The mobile table of contents is open by default,
I’ve reduced clutter but haven’t cut many flourishes. Consider the before and after:
At site launch
Now
I removed distracting flourishes outside of the main text (like favicons in the side bar),
removed most underlines outside of the main text (like in the “Tags” section) and from e.g. date superscripts,
tweaked font weights and anti-aliasing,
removed italics from “The Pond” title (just another font variant on the page),
gave elements more room to breathe (like with the “Links to this page” chain-link icon; it now has appropriate
margin-right), andimproved alignment along the margins (creating two “gutters” running along the center).
The site is still somewhat busy, granted.
The overall feature diff from the last four months is much longer. I may write another post about it. I haven’t yet gotten to the really fun features on my list, like the ability to listen to AI-generated readings in my voice (for the less math-y articles). I’ve focused on linting and testing the hell out of everything.
Changes not made (yet?)
Smallcaps kept; I personally enjoy them too much to cut them!
I want to do something about the desktop logo animation being distracting. I don’t know what that is, yet. I can’t play/pause the GIF on hover because GIFs don’t allow that (AFAIK). I’ll probably find a way to move it to a WEBM while also making it autoplay across browsers, at which point I can implement the feature.
I still need to make the mobile site “icon” different from the full-size GIF.
I don’t really mind the zeros. If I hear from more people that the slashed zeros bother them, I’ll reconsider.
I think it’s substantially better and calmer—even just the thumbnails look calmer now.
I still think you are going a bit overboard on visual complexity, things like slashed-zeros aren’t bad (I like them), just too much of a good thing and using up your visual complexity budget where there may be a better deal elsewhere: the question I ask myself is, “do I want to look at this for the next 20 years? If I add X, will it ‘look painfully 2025’ in a few years?” Elements which don’t seem excessive in the excitement of implementation may, with the passage of time, gradually come to rub you the wrong and need to be sanded down or removed. If you aren’t careful, you may slowly, one accretion at a time, come to resemble a site like “Agora of Flancia”: encrusted with neat experimental features which are too half-baked to be genuinely useful, but which burden and deter readers. (I try to avoid a reluctance to ‘kill my darlings’ by cultivating the mindset that every addition is an experiment, and thus if I have to remove them, they’re not wasted, they’re just a new ‘Design Graveyard’ writeup, is all.) But I suppose you’ll find out your own preferences on this matter over the next few years as the novelty wears off.
I also still think that the logo should probably not play by default, and for animations like this, it’s better to take an Apple-like attitude about them being enhancements, opted into by user actions, to ‘spark joy’, but not to be used by default. What do the worst websites do? They animate tons of stuff gratuitously. How much more delightful it is to discover a website with taste & restraint, where there are easter eggs and features to discover as you surf, where, say, the animated logo plays only when you hover over it… Truly an oasis or quiet little pond amidst the howling desert of the contemporary Internet. (I’m reminded of a Family Guy meme I re-ran into recently: why does Peter Griffin dislike The Godfather? Because “It insists upon itself.” A website animating the logo unasked for insists upon itself.) And this helps instill a design feature: you the reader are in control, and you express this control in part because you can hover over everything to learn more or focus on some things.
However, if you insist upon it, perhaps you could reduce its impact by some sort of limitation. Let it cycle a few times or seconds, and then slow it down or fade it or stop it. If the reader hasn’t appreciated it by then, why keep flickering it in the corner of their eye? Another idea would be a site-wide limitation on animation: on Gwern.net, we have a ‘demonstration mode’ feature which tracks how many times something has happened / been shown, and changes it (usually to disable it) after n times, tracking n site-wide by using a cookie in LocalStorage counting that particular event. We use it to do things like simplify obtrusive text labels, or to disable the educational theme-toggle-bar animation after a few animations.
Also, have you considered animating the dark-mode setting to move the sun/star around? The sun over the pond to the right, then the moon to behind the castle and swap the palette for a ‘night’ palette. (The ‘night’ label can be omitted, typeset vertical, or you can do it by horizontal mirroring of the whole image.) If you don’t do something like that, that would be a real shame. The perfect twist on dark-mode for The Pond.
This sounds like it would make for a better project & writeup than actual long-term website feature intended for actual reader use. Is this something readers want or will use? It never once occurred to me that I might want a spoken version of your articles (human, AI sexy-Scarlett-Johansson, or AI-Turntrout—ok maybe Scarlett). These aren’t poems or autobiographical essays or even fiction, where there can be value to hearing the author read it. (Although even there most of the reasons to want that are ones where an AI can’t substitute: if you want to hear the author’s unique intonations or pacing for subtle insights into the text or the author*, obviously an AI model voicing it is useless.)
On a sidenote, ahem, you might want to rethink how the popups work. I was unaware you even had popups, until I noticed in the network tab that a lot of pages were being prefetched when I hovered over them. It might be an oversight to prefetch if you aren’t doing a popup. But regardless, since I’m on a fullscreen 4k portrait monitor, and I have to zoom out before I can see popups at all, you may have gone overboard in your width requirements.
* when I questioned the value of Dwarkesh Patel et al investing in making a spoken version of our interview, this was given as one of the reasons that people valued audio over the transcript. We split the difference by the voice actor, Chris Painter, having the audio and performing it. It’s uncanny for me to listen to.
Per your suggestion, the pond video no longer plays by default:
By using
micromorphto preserve the video element, the video doesn’t unload as you navigate through the site. Therefore, the current video frame stays constant until the user hovers over the video again. Since the auto / light / dark mode selector hovers above the pond, “what does the ‘auto’ text mean’ → ooh, the ‘image’ moves!” provides a natural interaction pathway for the user to realize the “pond image” is actually a “pond video”!The desktop view (and therefore, popups) now render at viewport widths as thin as 1305px. Previously, the minimal width was 1580px.
Good; however:
“Auto” has the same icon as light—confusing!
“Auto” has a label, while the others do not—likewise confusing
The “Auto” label is styled just like the sidebar links, but of course it’s not a link at all (indeed, it’s not clickable or interactable in any way)
For #1, I suggest the “black & white cookie” (a.k.a. “contrast”) icon, as seen on gwern.net (this trio of “B&W cookie” / “sun” / “crescent moon” for “auto” / “light” / “dark” is becoming increasingly common for tri-state mode selectors, in my experience).
For #2, you should label all or none. My advice would be “all”, with a compromise: show labels on hover only (and make them a bit less obtrusive, and style them differently: smaller text, put the label off to the left—there’s room, given the shape of the logo—and perhaps set them in smallcaps? or even a different font, perhaps a sans; this would also solve problem #3).
The “auto” icon is the sun if auto says light mode, and the moon if it says dark mode. Though ideally it’d be self-explanatory.
A black-and-white cookie hanging above the pond doesn’t quite have the same charm as a sun or moon, I’m afraid. Therefore, unless UX substantially suffers from lack of a specialized icon, I’d prefer to keep the existing asset. I’m open to argument, though.
This is a good point. That interpretation would have never occurred to me! The simplest solution feels too busy:
Here’s what I’m currently leaning towards for addressing (2) and (3), ignoring potential issue (1) for now:
I found setting it in smallcaps to be quite distracting, so I settled for italics. What do you think?
Hmm, I see. Alright, that’s not too bad, given the labels.
Seems reasonable. (I agree that underlining the links is no good.)
Make a static version of the image (the first frame of the animation, perhaps?). Set that image to load by default.
At the end of page load, in the background, load the animated version.
On hover (by adding a listener to the
mouseenterevent), rewrite thesrcattribute of the image element to point to the animated image.On un-hover (
mouseleaveevent), rewrite thesrcback to the static one.Slashed zeroes are Correct™.
I was hoping to have the hover-mode animation seamlessly pause and unpause—your proposal would have the displayed image revert back to the first frame on
mouseleaveIIUC.Yes, correct.
This SO question has several answers, all of which seem like reasonable solutions to me (if I were doing this, I’d try them all and pick the most performant one, most likely).