Love the comments. Blows my mind how diverse the reactions are.
I read most HN on a 9 year old iPad. It's savage, raw compute would be fast enough, but limited RAM and pinned to a very old version of Mobile Safari. I generally keep JavaScript disabled, otherwise hangs are all too common.
If I can't at least read the basic idea of a web article at these settings, I move on. Perhaps it's arrogant of me, but I'm exasperated by current web design practice that requires megabytes of JavaScript to render a landing page.
`gwern.net` does not suffer from absolute madness, but the use of custom font means that the site is a blank page for thousands of milliseconds, and this old iPad has trouble scrolling the page of text even after the font is rendered.
My comments are probably irrelevant, but I'm not going to be surfing the web on a 16-core workstation with 32 gigabytes of RAM.
> `gwern.net` does not suffer from absolute madness, but the use of custom font means that the site is a blank page for thousands of milliseconds, and this old iPad has trouble scrolling the page of text even after the font is rendered.
I use the standard `display: swap;` settings on fonts, so you shouldn't be seeing blank pages at all, your Safari browser should be showing the text immediately (and then, possibly, re-rendering once the SSfP font subset downloads). When I check https://caniuse.com/css-font-rendering-controls for Safari support, I see that Safari browsers got swap like 5 years ago. (Relatively quick, as Safari things go...) So I think that explains your problem. You are just using such an ancient browser (all Safari versions that old collectively constitute like 0.3% market share now) that it lacks basic performance optimizations that web devs need to take for granted. I held up my half of the bargain and used the relevant optimizations. Perhaps it's time you upgrade?
They just put up with it. "They'll never tell you it's broken": https://pointersgonewild.com/2019/11/02/they-might-never-tel... In this case, I think most people replace their iPads before they are old enough to attend middle school, so the problem wouldn't arise.
You make a good point. Medium is the message. In the recording industry they spent a lot of effort optimizing recordings for AM radios. The question is not "Does it sound great on state of the art Hi-Fi?" but "Does it sounds great for most of the listeners?"
If the iOS on there is not too ancient you can use the filters in Firefox for iOS to block custom fonts. But although I’m not interested in the discussion I’d suggest upgrading to a supported device.
You could try installing an RSS app on the iPad and browse your favorite sites in an efficient way, although I'm not sure modern RSS apps even work on old iPads, so I think you might have to get the latest model of iPad for that to work. RSS greatly diminishes your screentime and it's up to you to filter out crap you don't want to see (mostly through curation of the feeds you subscribe to).
There are many great suggestions in the comments, which are good advice if I were trying to solve the problem of the limits imposed by my antique tablet.
But that's not quite my point.
The comments helped my realize that I actually had a point I was trying to make. And I believe it's a point worth making, if not exactly a point worth reading... Well, anyway the point is:
_Always write to someone._
1. Be the person who is listening
2. and then begin to write
3. Read what you just created, as the person who is listening
_Close the loop._
I've been creating web things since 1995, and it always astonishes me, how rarely anyone tests thier end product. Individuals, small business, contracts, major international brand campaigns -- at every level. It's not 100%, and the tech term of art "eat your own dog food" comes from this, so there's the ability to imagine otherwise, but all too often, we just toss it over the wall and hope it lands somewhere.
Two examples that will stick with me forever:
It's 1998, and we're doing a major corporate brand website. The target demographic is low to mid income pet owners, rural and urban alike. It's literally dog food. The design is done in a gorgeous glass high rise office tower, using $10,000 Macintosh computers with 20-inch displays. The target demographic uses Windows 3.1 or Windows 95, at best 640 x 480 VGA 256 colors, often 32-color palette. There is a testing lab closet with some old beater PCs running Mosaic and AOL, but no one goes in there, Windows is scary those machines are junk! I go in there. I try it. The site is a hypnagogic vomit of color on the limited palette display.
It's 1997, and we're building a technology to create web sites that can be downloaded over a slow dialup overnight, then browsed offline. Look up Marimba Castanet. This isn't that product, but that's the idea... The team works for months on this. In an office. In Silicon Valley. With 100 Mb/s network connections. I'm the only person on my team to go home, dial up at 9600 baud, and give it a shot.
We write for many reasons. How do we switch from writing to organize our thoughts, to writing as compassionate communication? Because they are two different things, and I've been all too often doing the one when I think I'm doing the other.
Yes. Please dogfood. I got a free handset on Boost Mobile for $15/month I can use to dog food my web designs. It suffers the same problem as your iPad - 90% of the modern web is death to this poor old Samsung. 300MB home pages are now common. I bought a decent tablet with a crack in the screen for $20 on eBay. It's perfect for testing. There is literally no excuse not to test your designs. There are so many more tools available in 2022, and the web standards have become so much kinder towards writing lighter pages (e.g. things that were Javascript now moving into HTML and CSS).
I like the design, but semantics and accessibility aren't great.
We have lists implemented like divs, navs like divs, lack of appropriate attributes, aria labels and few other things.
That's not great considering there's basically only static content without interaction.
Articles speaks about optimizing for performance but will still attempt to load 150kb of analytics library and doesn't handle fallback fonts and font rendering properly. What's the point of obsessing over bundle size when you will still shove fonts and analytics when loading the application?
In every one of my projects I always try to convince stakeholders and designers that they will find fonts that will be great among the system fonts and that it won't be that much of a difference to users generally (there's plenty of successful enterprises and top 50 websites out there that only use os fonts and make $$) and what I get are poorly implemented fonts with inconsistent heights and vertical positioning across different OSs.
And the irony is that since most of your company runs the same OS (MacOS) where this issue is not visible it's like it doesn't exist.
> We have lists implemented like divs, navs like divs, lack of appropriate attributes, aria labels and few other things.
I see content organized into sequential, distinct blocks of text which include multiple paragraphs— LI elements are block-level and can contain multiple paragraphs. There's no semantic problem here and no accessibility problem. In HTML5, for accessibility purposes, divs should be used for presentation only. They have no semantic meaning. Lists do.
> Articles speaks about optimizing for performance but [...]
Agreed, mostly.
> they will find fonts that will be great among the system fonts
Having sane fallbacks in your font stack is important, but that statement is false and is why developers don't make those decisions. That's fine— it's not your job— but even as a long-time developer I won't tell developers how to do their job if I'm serving in a design role on a project.
I was also as a culinary school trained chef. Many insist salt omitting salt and letting diners salt food themselves yields equivalent results. Obviously, health conditions should be accommodated for, but in most senses, they're provably wrong. We perceive most of "flavor" through our noses. Tongues sense few things but stimulating it focuses our brain on smell. Totally integrated seasoning drastically intensifies the overall flavor of food. Salt is also chemically and mechanically important in many processes, such as searing. I'd say 60% of professional polish in food comes from proper seasoning.
Design details are like seasoning. A famous designer said "the details are the design". Users don't consciously perceive those individual details but they have tremendous impact on a whole. Even people without experience, however could easily understand the difference between a title set in the 'Display' style of a Pro version of a font vs the standard paragraph version. Setting paragraphs type in the display version of a font makes it much less readable. The visual impact of properly tuned kerning pairs alone gives the pro version of a font a ton more polish. Even different versions of Helvetica have drastically different quality. Target, one of the most savvy businesses on the planet, developed their own version of Helvetica at tremendous expense. They didn't do that on a hunch— they had good reason to believe they'd recoup their expenses by doing so.
> We have lists implemented like divs, navs like divs, lack of appropriate attributes, aria labels and few other things.
Since I don't use accessibility tools: how big of a deal is this for people who do? I try to keep my personal website lightweight, but I think I also use `div` for almost everything.
Theoretically, screen readers handle the "semantic web" better than anything else. Divs are used for layout and presentation, and don't convey much useful information about structure most of the time, so div-heavy sites can be really hard for blind people even if they look great, clean, minimal, and simple for the sighted.
I say "theoretically" because I'm not blind and have never used a screen reader, and I'm not extremely experienced in the area.
For this particular website the impact isn't tragic, you can navigate, but you cannot navigate efficiently nor you can figure out well what and where you're navigating to.
In short, it's usable but not perfect, the sidebar should be a nav rather than a div to convey it's where major and meaningful navigation is found. It's not easy to figure out without the visual feedback that those links are different than the others on the website.
There's also lack of a "skip to content" and similar menus that would help into consuming the content. The dialog popups also lack the same usability, they would benefit of clearer aria-labels on the links.
Anyway, I don't think it's a tragedy, again, it's usable, but given that the author lists accessibility as one of its 4 rules and yet it's not really a pinnacle of accessibility, despite the lack of dynamic content and interaction is not great.
> the sidebar should be a nav rather than a div to convey it's where major and meaningful navigation is found
I think you are mixing two issues here, what's good for the end user and what's good for the developer and maintenance of the site. Both matter of course greatly but I think this article was about optimizing the user-experience.
From the users' point of view does it matter if a section is a 'nav' or a 'div' which has CSS-class 'nav' assigned to it?
> From the users' point of view does it matter if a section is a 'nav' or a 'div' which has CSS-class 'nav' assigned to it?
Yes.
There are people that use devices that rely on these accessibility options to differentiate nuances in the content that might otherwise be obvious when rendered in a standard browser: text only browsers, screen readers to name just a couple.
That's a good point and I think nav is a great idea, especially for maintenance reasons. Most users won't see the difference. But some will hear the difference.
> We have lists implemented like divs, navs like divs, lack of appropriate attributes, aria labels and few other things...Articles speaks about optimizing for performance but will still attempt to load 150kb of analytics library and doesn't handle fallback fonts and font rendering properly.
I'm not sure what you mean by 'lists implemented like divs'. My lists are good old <ul>/<ol>, as God intended.
The fallback fonts and font rendering are also implemented correctly AFAIK: we use a high-quality Adobe FLOSS font, we swap fonts for performance, and we have a full fontstack which falls back through all of it down through system to a last-resort.
The analytics is also super-useful for me. I use it all the time for finding broken links, discussions, making design choices about device screen size, etc. I do not regard it as wasted at all.
A lot of the WAVE stuff you refer to is things I neither can nor would fix, so gwern.net is never going to be the pinnacle of what you consider accessibility. While none of it is quite as stupid as when accessibility people were telling me to not use hyphens because screenreaders, 20+ years later, still are unable to delete soft hyphens (and this is somehow my fault and I should break hyphenation for 99% of readers), I raise my eyebrow at the claim that justified text is an accessibility problem; and when it flags PDFs, I can only shrug - yes, and I would like a pony too, but that ain't happening either.
I've switched the two navbar divs to <nav>s, and added a skip-to-content link. I also ran it through WAVE and fixed a few things. (I did a long time ago but there's been a lot of changes since then. I've added a cron job to check it again every few months.)
> The dialog popups also lack the same usability, they would benefit of clearer aria-labels on the links.
For a site that lists its #1 principle as minimalism, it sure has a lot going on at all times.
Multiple menus all over the screen, many different kinds of links with distinct underline and icon suffix, popups within popups that reinvent OS window functionality, historiated initials, graphical horizontal divider with hidden links, a recommended articles carousel, and a very (visually) busy comments section.
Minimal it ain't.
If you want to see a professional minimal design, check out mine:
Comparing Gwern's to your website is really interesting. I'd argue, Gwern's website is a good example of minimalist design, whereas the website you posted is the opposite.
To me, minimalist design is as little design as possible (Dieter Rams). All design elements need to serve and enhance usability/functionality of the product. That doesn't mean that the total functionality of something needs to be minimal. E.g. you can still have tags, recommended articles and a comment section.
In the website you posted, I see design elements that don't serve the usability of the website, but are there just for design sake. E.g. the background image, the colour of the toolbar or the right alignment of the text
> I see design elements that don't serve the usability of the website
Every single thing you listed has a purpose.
> the background image
is a blurry gradient of colors magenta and orange, angled off-axis. In other words, the complete opposite of the page contents: Sharp black and white precisely-aligned text.
The purpose of a background is to contrast the foreground. Mission accomplished.
> the colour of the toolbar
is one of the only persistently consistent visual elements across the entire website, which features many very different color schemes in its content. Take this page [0] for instance; as the menu elements you refer to lie on a higher level of interface hierarchy, this color of the toolbar sets the topmost brand tone of the entire website.
When your eyes read to the end of a line of text, they have to jump to the beginning of the next one. Left-justified text causes all lines to start at the same vertical, making your eyes sometimes miss the jump and begin reading a wrong line. This is why you're sometimes reading the same line twice by accident. By right-justifying instead, the left edge of the text is made variying, and your eyes have an easier time picking the correct next line.
Sorry, I realise my comment may have sounded a bit harsh, it was not meant as a criticism of your website - just describing why I don't perceive it as minimalist design
> your eyes have an easier time picking the correct next line.
Are you saying that right-aligned text is easier to read? Are there any studies on that? If that's the case then why isn't everybody like HN for instance already right-aligning their content?
Right alignment is just less common in general, right? It requires knowing how long a line of text is before rendering the line of text, and the more complicated implementation makes it probably the least used form of justification for blocks of text. (Of course computers make right justifying free)
I didn't find the right alignment of text to be easier to read, but though it was a mistake on your part. Of course, now I know it was intentional. Good job though.
> Gwern's website is a good example of minimalist design
It's not. It's black and white and grey, which makes it look cleaner than the other one, which is a mess of colours, although I think that's on purpose. But it has a lot more going on on. Granted, most of it is at the top of the page (which is a _mess_) and the rest is okay, but the way some of the links are presented (with the icons) bothers me a bit too.
> Gwern's website is a good example of minimalist design
Eh, disagree. hypertele-Xii's website gets out of my way when I'm reading, and that's key. Gwern's website litters the body of the post with all kinds of stuff that the average reader won't use.
Precisely in the sense of "NOT a lot going on at all times". Just the content, presented pleasently.
And importantly, it's not only minimalism in look-and-feel, but also technically: even a long post with an embedded image like https://manuel.kiessling.net/2021/05/02/tutorial-react-singl... weighs in at under 200 KiB. Loads in under 3 seconds even on "slow 3G" in Chrome. 362 milliseconds via my office's wifi.
Also, no JavaScript. Nothing moves or jumps. Perfectly usable and consumable in a CLI browser like Lynx.
I'm not exactly sure the best way to solve this for your blog. Maybe something like adding alt-text to indicate "German Language" and adding a parenthetical to the end of titles "(German)" or something?
Very good point, and I've thought about this a lot. Still not sure what the best solution is... there is also a "flag-mashup" of the Austrian, Swiss, and German flag, but that's looking weird, too.
Maybe a combination: a small icon with the three flags in one row, and underneath, the text "German post".
this does not address the main problem that flags do not correspond to languages. German is spoken in more than "the three" countries, and in these countries there are more languages than German. Thus, using flags is insensitive and alienating to German speakers from other countries (e.g., Belgium), and non-German speakers from these three countries (e.g., Lugano).
And this is just for German! The situation is even more complicated for nearly all other languages in the world. Please, never use flags of states to identify languages. I have been on the receiving end of this unnecessarily offensive thing, and it did not feel nice.
None of the major sites that deal with languages (wikipedia, google translate, deepl) ever use flags to represent languages.
In the case of your website, however, I don't see why you need to specify the language of each entry. Is it a sort of "warning" for non-english entries? It seems unnecessary. And why aren't entries in English marked with the flag of the USA? (or Canada, or South Africa).
This feels a little nitpicky to me - as a short hand for language and currency flags are commonplace. But I understand the thinking: "a language is nothing but a dialect with a flag"
The alternative is to use ISO (En, De, Es) in brackets before the text begins. i.e. [DE] Wie Studien verdreht werden
Flags for currency mostly work because nations choose their flag and choose their currency. Flags for languages doesn't work because it's common for the same language to be popular in different countries and for multiple languages to be popular within a single country.
ISO language abbreviations would be a better alternative than the flags but I don't think anything is needed at all; anyone who knows German will recognize the post titles written in German and anyone who doesn't know it will still recognize that they're not in English.
The links do have `hreflang="de"` which in theory can programmatically indicate the language used at the destination, I'm not sure there's any technology that takes advantage of that. They could use a ::before pseudo-element with content: attributes(hreflang) to display the ISO code instead of the flag images. I would like to see `lang="de"` attributes on the German headings and paragraphs on the home page, they would tell screen readers to switch to a voice appropriate for the language when read aloud.
Which flag would you use for euros? Obviously not the european union flag, since there are many countries inside the EU with a different currency (like Sweden or Poland) and even countries outside the EU whose currency is the euro (Montenegro, Kosovo, Andorra, ...).
Yeah, you're right. I did think EU membership was more aligned with use of the Euro (I only knew about the UK using the Pound but they're out). It's still true that each country chooses its currency but it would be just as weird to pick one country in the EU to represent Euros as picking one country to represent a language.
Same goes for Spanish. Which country's flag should represent it? Most people probably don't even know the flag of Spain and readers in Latin America might be offended.
I think the fact is that languages simply don't have visual symbols for them. They are spoken or written, not "looked at". Languages are linear, not 2-dimensional. Euros and Dollars have their symbol because that's what is printed on the 2D surface of bills.
Do the posts in German really need an indication that they are written in the German language?
Just from the title I can immediately see that "Die Metapher der Stadt für das Bauen und Betreiben von Softwareprodukten" is definitely not going to be in English.
I assume readers fluent in German don't need to be told that post is in German, the same way I don't need a little UK or US flag to know "March 2018 Book Recommendations" is in English.
If you can read the title and introduction you will immediately know which language its written in with no need for flags at all.
The site you link is nearly identical to mine, only less visually-oriented (which I feel is excusable as my site focuses on visual arts, not programming).
> Just the content, presented pleasently.
Please explain which part of my site isn't just the content, presented pleasantly?
> minimalism in look-and-feel, but also technically [...] weighs in at under 200 KiB
The exact page I linked to [0] weighs 160 KiB, less than your example. I'm confused about you bringing that up. I win?
> Please explain which part of my site isn't just the content, presented pleasantly?
I'm not the person you asked, so forgive my jumping in here, but I feel I have a helpful answer.
Design serves function. The function of a website with text is to be read. Your site's design is hard and unpleasant to read. Here's what made it difficult for me to parse and read your page:
1. The title looked like a banner offering a newsletter or cookie preferences. I ignored it. My eyes jumped to the subheadings "router" and "template". It took me too long to discern what I was reading. At first I thought it was a list of blog posts titled "router" and "template".
2. The white, thin text on black background was difficult to read. My astigmatism makes dark on light a strong preference for me. Light on dark can be okay if the font has enough weight to minimize deformation of the letter forms. Here you chose a very thin font.
3. The ragged left edge of each paragraph is harder to scan. The return sweep took longer. It is also reminiscent of poetry which felt out of place.
4. The bright background lines drew my eye in a downward on the right and upward on the left, further making the return sweep less comfortable. It is brighter than the text and nagging at my peripheral vision.
5. The text in the comment box was too low contrast to be comfortable.
6. The right menu was invisible to me until I was critically looking over the design.
It was very stylistic and striking. Aesthetically good. But these design choices are at odds with the functionality of reading, at least for me.
> The title looked like a banner offering a newsletter or cookie preferences
That's a problem with other sites though isn't it?
> My astigmatism makes dark on light a strong preference for me
You can find accessibility-enhancing browser extensions. I use one for the exact opposite myself, to turn bright sites into dark ones. Can't account for every disability.
> It is also reminiscent of poetry which felt out of place
Great! My site has lots of poetry. Not out of place at all.
> The text in the comment box was too low contrast to be comfortable
Thanks, I've suspected this to be the case. Will address.
> That's a problem with other sites though isn't it?
I think of design as being done in a context. Few websites use green to indicate a toggle has been turned off and red to indicate a toggle has been turned on because most websites use green to indicate on or go and red to indicate off or stop. Websites are designed in that cultural context where that makes sense (there are cultures in which it's not those colors). I wouldn't expect for a website to buck that context and then say it was a problem with other websites and not the one that's deviating from norms.
Toast banners being colorful on white or black backgrounds is a design language I see all over the place. It's the context of the web. So when I encountered a colorful banner on a black field, my eyes ignored it (based on their experience elsewhere before I browsed to your site) and traveled elsewhere first. It was only when I became confused by the contents elsewhere did I take a second, closer look at the top and realized what I was reading.
Not a big deal really, but I wanted to share this one reader's experience with first impressions.
> You can find accessibility-enhancing browser extensions. I use one for the exact opposite myself, to turn bright sites into dark ones. Can't account for every disability.
No, you cannot. I don't expect sites to. I have a custom CSS I use to improve readability when it's low. But, I have noticed that many sites that are white text on dark backgrounds are reasonably readable when they choose fonts that have some weight to them. Face weight is the lever there. If you wanted to, you could increase the weight of your font a smidgen and provide a good experience to both people with astigmatism and people who prefer dark color schemes. But design choices are personal and you can keep it nice and thin too. Again, I was sharing my first impression on readability.
> Great! My site has lots of poetry. Not out of place at all.
Maybe it's not out of place, but I didn't see any poetry on that page. It was a colophon. If it was meant to be poetic, it went over my head. But, I am a mere student of poetry. Not a poet myself.
As I mentioned, I like the look of your site. I find some of the design choices to hinder readability which I value over aesthetics. Design is about finding that balance between aesthetics and functionality and not everyone agrees on where that balance should fall.
I was not the only one who found that some of the design choices distracted from the content or made the content harder to read. Now you know and can do or not do what you will with that information. But saying that your readers are "wrong" is an odd way to go about it.
I can add to antiframe's feedback, by saying that I agree with them. The text is rather hard to read to me (without repeating antiframe's points). Also, on the CV page, the text is going back and forth - first on the left side, then right, then middle, and there's pictures here and there that adds to the visual cognitive noise.
The bar on the right also has two icons that doesn't seem to do anything (save, next).
Finally, as a non-native english speaker to another, I respectfully add that the tone of your comments come across as a bit confrontative, which together with seemingly strongly held opinions and seemingly not very open to feedback, makes me hesitant to engage in this discussion. Perhaps you are not aware of this, so I just wanted to in the most best-meaning manner I can point it out to you.
Although I’d agree with the fact that gwern does have a more going on, I definitely don’t think your site is any more minimalistic, I’d ever argue it is far far from it. My first reaction was « THAT’s minimalistic ?? »
(Not OP) But I would point out the “fixed” elements used for the top and bottom bars eats away a large amount of real estate for users (I’m using an iPhone SE for reference)
This is a completely valid issue and difficult to address. I've been testing on my phone, and my phone admittedly may have a screen larger than average. Some devices just aren't suitable for some types of content.
> Some devices just aren't suitable for some types of content
I think that’s rather dismissive when said content is simple text in the browser. Easy solution: don’t use fixed navigation - it is a very bad UX pattern for content/informational websites. That’s why scrolling exists. I assure you that users don’t require access to your menu 24/7 when reading through your website.
My point is that if it is built out in HTML - it should work on any device that can render HTML.
Many other art-based, photography focused and creative writing projects work fine in my browser. You seem to just be avoiding the removal of bad UX patterns (fixed elements) for personal reasons - which is fine.
But you shouldn’t hint towards the fact that it’s “how things are” and they “can’t be fixed”. You’re hurting user experience for personal preference - not limitations.
Home button on a keyboard, tap the top of the screen on iOS, and I believe Android implements something similar.
I agree with the other commenter here. If a text-only article follows the tenets of some version of 'minimalist' design, I should be able to read it comfortably on my phone. Straight to reader mode for me.
I tried it on my desktop, where it was better. But I still wouldn't call it 'minimalist.' Again, it's just an article, but the background image draws my eyes away from the text. The top and sidebars do too, but to a lesser extent.
That's fine, but it's not minimalism. If I hear that an article on the web has been presented in a minimalist style I'm going to click on it assuming that once I start in on the article that's all I'm going to notice.
Home-button is a good trick to know about but I wish there was an easy way to jump between the top and the location I came from to get back. It seems back-button does not do that on my browser at least.
Since browser's don't do it there could be a side-ribbon that had a TOP-button and then a BACK-button. I think that would be useful on sites like HN.
From the article, it looks like Gwern, at least, thought quite a lot about text justification --- see the "Abandoned" section --- so the "learn how typography works" comment seems a bit unfair.
My point being that applying rules learnt from hundreds of years of literary culture and printing do not 1:1 translate into digital.
Justified copy is as much about saving paper as it is about any formality/legibility. It really has no place in long form digital space where space is infinite.
Type designers like consistent and even rhythm between the ink and page. Rivers of white and large gaps between words give the ick.
That would be the absolute extreme of minimalism, yes. But it's a never-ending rabbit hole. I don't really need a website, either. So the absolute extreme minimalist website is one that doesn't exist.
To me, colors are important. I'm a visual artist. The minimal amount of colors to me is an additional two to your two. It's not arbitrary, I didn't just go crazy with colors, I settled on exactly four because I couldn't reduce it to three.
> So the absolute extreme minimalist website is one that doesn't exist.
This is a fundamental misunderstanding of what minimalistic design means.
If you've identified that you need a website, minimalism would be paring that down to the core essentials and ensuring it has everything it needs, but nothing more, to suit its purpose.
That subtle background gradient is lovely. I like how it adds a frame to the text without distracting from it. It evokes the right vibe, I think.
That's a design element that serves the functionality well and doesn't feel superfluous at all. But the image on the colophon page I'm less excited about. It gets in the way and feels unnecessary.
It has a perfect blend of minimalism, functionality, aesthetic, typography, accessibility, and mobile-friendly design. I strive to design my blog around the same principles.
I mean, this has to be a joke right ? There is seemingly no way for me to go to the homepage from that link. This is less usable than anything else posted in these comments.
Navigation of some sort is absolutely a necessary function for any type of UI that references multiple locations in the same domain. There are none there.
It's explained on the linked page, under 'typography':
> When your eyes read to the end of a line of text, they have to jump to the beginning of the next one. Left-justified text causes all lines to start at the same vertical, making your eyes sometimes miss the jump and begin reading a wrong line. This is why you're sometimes reading the same line twice by accident. By right-justifying instead, the left edge of the text is made variying, and your eyes have an easier time picking the correct next line.
Hey dude, I just want to give you some feedback as an outside observer.
You advanced your own website as somewhere between a solid execution and an ideal for minimalistic design. Virtually every reply you've gotten has been some variation of "Wow, I don't much like this design". You reply to each of the replies insisting you're right and demanding people explain to you how you're not. People are taking time out of their day to give you (admittedly critical) feedback. It probably doesn't work that well to demand more of their time. When you send signals that you're not internalizing the feedback you're getting, people are going to be loath to offer more.
It's OK if you don't want to incorporate feedback because you're happy with your work, but the context under which you linked it is such that it's perfectly natural people are going to give it to you unvarnished.
Anyone who submits critical feedback must be prepared to receive critical feedback in return. I'm not sure what you're saying. This is a discussion forum. Discussion unavoidably demands participants to take some time to participate.
I think notafraudster might be suggesting that you're lacking self-awareness because you seem very defensive when it comes to your design decisions instead of really listening to people's complaints.
Just as an example, I find right aligned text hard to read, no matter your rational behind it. Might be because I'm not used to it, but who is?
That is some solid bullshit and is exactly the opposite of everything known in design theory and studies alike.
Left-aligning text actually helps by providing a fixed start, so your eyes/brain know that they have to start left and a little bit lower. With your way it's exactly the opposite.
Will save further details, doesn't look like it's worth the time.
Thank you. Reading their original comment & looking at the site: I assumed it was a troll? Seems like they're deliberately doing the opposite of what makes for good UX / reader experience.
* Tiny non-standard font size.
* Their rationale for right text alignment is the exact inverse of why left-aligned text is widely regarded to increase readability. (Also they don't seem to understand what justification means in paragraph formatting).
* Navigation bar falls in the exact area (right edge) where most users' eye gaze rarely falls. (Top left, top right, mid left are the areas where eye-tracking studies show left-to-right language users fixate).
* Weird Geocities-style pinned background with distracting colours.
* Inconsistent use of capitalisation on headers / pages.
etc. etc.
Yeah. The dude is a Grade-A asshole. His site is complete garbage, yet he insists that it's amazing. I've never seen someone so confidently wrong in every single reply to criticism ever.
Oh, I didn't realize that. When I move it to my own server that shouldn't be an issue. The peprojects.dev domain is for student work. Thanks for the tip!
Interesting. I saw the Beeline Reader before and their method is different in a way that doesn't negatively impact my reading. Their grayscale palette is actually fun and unobtrusive enough that I forget it exists after a while.
BeeLine founder here! I would guess that parent is referring to the fact that BeeLine assists with visual tracking during line transitions, and having a ragged edge (as opposed to justified) helps with this also. I've not seen people use right-justification as a way to achieve this, but the general consensus is that line transitions are easier when there's a ragged edge instead of justified text.
Oh hey! The funny thing is, I originally contacted BeeLine for a quote but was refused one without an already-existing website. So I resorted to experimenting with right-justification.
Not the parent, but I think people will experience a moment of confusion before they adjust. right-align is very unexpected, so even if it's somehow better, it takes time to adjust. That adjustment is undesired and uncomfortable.
I think it may feel similar to a car manufacturer putting the ignition on the left side of the steering column. The driver will briefly jab the key on the right side before understanding that this car is different from every other car the driver has been in. Even if there was extensive research showing that left was better, the first reaction from experienced drivers will be "WTF".
The right align is absolutely horrible and in no way improves readability. The fact that your website is literally the only one I've seen in multiple years using that style should have been a clue.
Consider this: you're up against millennia of development in writing and typography. People have tried a lot of different ways of organizing and presenting text. And I mean a lot. Different symbols, different fonts, different page layouts, different text orientations. There was even a long line of symbols spiraling on a disk, getting denser as it approaches the center. There's a good chance somebody tried different ways of aligning long text in a paragraph. And we settled on one. Maybe there was even a good reason for it. It's consistent across cultures too. Justified and centered text aside, left-to-right languages are flushed to the left; right-to-left languages are flushed to the right.
Is it objectively the best way? I don't know.
Writing, fundamentally, is used to communicate your thoughts - to yourself or to others. Publishing your writing on the web (and sharing it here) implies you want others to read it. In order to reach your readers, you want to make it easy for them to parse this text. Over the years, people developed a set of patterns that make text more readable. Some are fundamental. Some are nice to have. Some are so universal they are expected - and noted when they are missing.
Think about why left-to-right languages are left-justified.
It's because when you're writing by hand, you can't possibly know in advance exactly how long the line is going to be, so you have to start at the beginning and write until space runs out.
But now we have computers. We no longer write by hand. It's trivial to have the computer justify text however we wish.
So now we ask the same question again, which way should we justify text now that it is trivial to do it either way? To me, "do it the way it's always been done without question" is a non-answer that leads to exactly no evolution whatsoever.
Right but someone doing something different alone doesn't typically mean it is a better way. For every new better way there are an infinite number of new worse ways
Every website listed under your projects are examples of minimalism. The other guy should visit those projects and take some hardcore notes, but he's too busy being an asshole to everyone criticizing his terrible website.
This is tongue in cheek right? I mean just the colors to begin with, and then the hardly readable buttons on the right. Right aligned text, and the background that screams for your attention more than the actual content....
I mean maybe its rendering strangely on my work computer (forced to use edge), but it's pretty bad.
I guess this person would also describe their involvement in this thread (aggressively dismissing every single comment) as a perfect example of minimalism?
Your site is more "minimal" in that it has fewer text elements on the screen. But your site is much harder for me to read than gwern's. First, I hate dark background, white text; white background, dark text is much easier for me to read. (Note that gwern's site gives both options.) Second, your background image is a huge distraction for me, as is the weirdness of the non-image background at the top and on the right. Third, your paragraphs are right justified instead of left justified, which I find distracting. Fourth, your font is too small for me to read easily.
The upshot of all that is that I read the entire content of gwern's page. I didn't read more than a few headings of yours.
> The upshot of all that is that I read the entire content of gwern's page. I didn't read more than a few headings of yours.
Unintuitively, this is a success for me! The headings clearly stuck out, you were able to quickly scan them and determine you didn't care to read the details. That's how I'd expect a minimal design page to work.
> The headings clearly stuck out, you were able to quickly scan them and determine you didn't care to read the details.
That's not what happened. What happened was that after trying to scan a few headings of your page, I was so put off by the site design that I didn't even bother trying to figure out from the content of the headings whether I wanted to read the details. So your site design prevented me from doing what you describe.
Gwern makes it pretty clear that the objective is a minimalist aesthetic, not a minimalist design through-and-through.
Not to mention that the same paragraph specifies a design requirement of the site:
"What does it take to present complex, highly-referenced, link-intensive, long-form text online as effectively as possible, while conserving the reader’s time & attention?"
Even the minimalist answer to that question would probably feature the things you're objecting to.
Other commenters have mentioned BeeLine Reader as a way to achieve the same visual tracking benefit that you aim to achieve with right-alignment.
I'm the founder of BeeLine Reader and wanted to mention that we have a JS widget and I'd be happy to provide it to any HNer for free. Over the years, several HNers have put our tech on their websites (examples here [1]), and we've even worked with a YC company (Insight Browser [2]).
Feel free to contact me (info in profile) if you're interested in trying out BeeLine Reader on your website.
"Your name" isn't a required field and pressing Enter doesn't do that when the textarea is focused.
Additionally, not everyone knows that's the default behavior for pressing Enter in a text input and it's common for forms to be implemented in such a way that it doesn't work.
Your site is not "minimalist". There is no such thing.
There's no standard for "minimalist" websites, no way to define what is or isn't minimalist.
There's no need for one either. Your visitors don't require "minimalism" per-se. There's no threshold that you can cross to achieve or reach it. Minimalism is an ideology. It's a heuristic you can use to guide your decision making.
If you find yourself comparing how minimalist you are or competing with others on minimalism, I feel like a better description for that is "maximalism".
There's a rather large blank space at the top, occupying significant vertical space. Since vertical space is most precious on all screen orientations, I'd consider cutting it.
The art on the 'visual' page looks very interesting, but clicking on them does nothing. At least make them links to the images themselves. The two with school buses are my favorites. I'd move them to the top to make the best first impression (though this is of course subjective! Place your best works first).
Would love to hear any elaboration on what makes you think that. Otherwise your opinion will only amount to "I don't like it", which is just about the least actionable criticism anyone could ever hope for.
It’s a truly distinct and amazingly designed website that I’m often not smart enough to understand. It’s a unique property on the Net, and that’s saying a lot these days.
One thing I would like to understand more is the archive system (used to reduce the problem of dead links). Is there some kind of automated process to create local copies of the linked webpages, or is it done by hand using some thing like wget or curl? How far do they go to archive embedded assets such as images or PDF files? Are there any copyright considerations for archived articles (what if you archive someone’s article that they would prefer to keep off-line)?
The quick summary is that PDFs are automatically downloaded, hosted locally, and links rewritten to the local PDF; other URLs, after a delay, call the CLI version of https://github.com/gildas-lormeau/SingleFile to run headless Chrome to dump a snapshot, which are manually reviewed by myself & improved as necessary, and then links get rewritten to the snapshot HTML. They get some no-crawl HTTP headers and robots.txt exclusions to try to reduce copyright trouble.
There are plenty of rabbit holes to get into when it comes to web archiving, but for blog authors that just want to preserve a page referenced by their text, using a tool like SingleFile is a great first step.
It went into the negative very quickly. For some reason “thanks for the reference“ must’ve come off as snarky, probably because I was too stupid to find it myself but others weren’t!
I wouldn't necessarily call this a minimalist design. I do like Tufte-style websites with sidenotes, but these don't show on mobile for this site, despite my tablet having a large screen.
> Gwern.net used Baskerville, but system Baskerville fonts don’t have small caps.
Can someone explain to me what is meant by this? I don't understand what not having small caps means. I use Baskerville in my LaTeX documents with Michael Spivak's MathTime2 Pro fonts I purchased. I am currently building my blog, and despite trying to just get it out there and worry about my ideal design later, I am considering trying Baskerville and other such fonts instead of sans-serif fonts.
Hmm, interesting. Thank you. Is that true that "system Baskerville fonts" don't have them? I never encountered this in my LaTeX documents, but I suppose it's possible my LaTeX distribution is shipping its own Baskerville-like font. I'd need to look into that. I am trying to come up to speed about font sourcing (right word?) on the web. It's also somewhat unfortunate, because as far as my research can tell, I am unable to configure MathJax to use a custom math font.
pdfTeX does not use your system fonts. It will not even load TrueType or OpenType fonts, but usually uses Type 1 fonts. Fonts for LaTeX come bundled with your TeX distribution like TeX live (on my Arch system present in /usr/share/texmf-dist/fonts/).
If you want to use system fonts you should have a look at Lua(La)TeX (or Xe(La)TeX but I think focus shifted completely to the LuaTeX engine).
> If you want to use system fonts you should have a look at Lua(La)TeX (or Xe(La)TeX but I think focus shifted completely to the LuaTeX engine).
Luatex seems the more promising technology from the point of view of continued evolution of the Tex ecosystem, but there's been talk of Luatex being the successor to Pdftex for over ten years and it was held up by the fact that Luatex is not superconservative in the way it changes Tex layout and is less so than Xetex.
I've not really followed the discussion about succession to pdftex in Texlive in recent years, but it'd definitely be a change to their risk-averse ways if they did simply change 'latex' to mean 'lualatex'.
"These may have varying features, for example some lacking small caps." https://en.wikipedia.org/wiki/Baskerville#Digital_versions We use smallcaps heavily as an alternative to bolding everything, but it would be bad if we just use "font-family: Baskerville" and all sorts of unpredictable low-quality fonts out there screw it up. That Baskerville font you paid for probably has them... but how is a reader's web browser going to use it?
> I do like Tufte-style websites with sidenotes, but these don't show on mobile for this site, despite my tablet having a large screen.
Your iPad Safari reports having a width of ~1180 pixels in landscape mode, even though you have 2x the physical pixels (ie. 2x DPI scaling). This is much too small for sidenotes. Not getting sidenotes is correct. I don't think gwern.net is anything odd in this regard, every other responsive design website you visit must be giving you the same condensed view. Unless you're doing something like disabling scaling? Then in that case I guess maybe it should work and I'd need a screenshot & more information to see what's going wrong. (Maybe a media-query or something.)
I love this site. The content, minimalism and focus on performance, the honest over-engineering, everything. But I can't read much of it as is.
• My reason is not the font, which I like, but the 'density' (not information density). The line height is too less for me.
• There are a lot of hyperlinks and they look like the factorial notation instead of an underline and are of the same color as normal text.
• Sidenotes are a good thing but they should be shown on demand, not everytime (maybe there's a setting I missed which does this).
• Regarding the pop-ins, I dig the idea but IMO, showing the whole page is not very useful. Maybe just the summary of what's to be shown. Why would I want to read a whole article in the pop-ins and what purpose do they serve which sidenotes don't?
> • Sidenotes are a good thing but they should be shown on demand, not everytime (maybe there's a setting I missed which does this).
I browse the site only occasionally and I think I had to be told that sidenotes were something that showed up if you make your browser window wide enough.
Most sites don't gain anything if you make your browser window wider than 720 points (half the width of a 2560×1440-point screen). For the sidenotes to show up, I need to widen the width of a browser window to something like 3/4 of the width of my screen, which I almost never do unless I've got multiple columns of code in an editor.
Then again, I'm on macOS, and in general, maximizing windows isn't something that's done very often. Back on Windows, I still have alt, space, x memorized for maximizing windows (although Win+up is much easier, and has been around since Windows 7).
It feels quite busy after claiming minimalism. Also, not a huge fan to see Disquss being used and a bunch of JS just to serve static content. Seems like most of the things us humans do - a cacophony of contradictions. Like the simple color scheme though, so points for that.
Yeah, I dislike the Disqus comments a lot. At least they let you disable the ads these days (it's hidden in the site config). But I don't want to deal with spam or write my own commenting system, and there's network effects. The Disqus is a concession towards practicality.
Have you considered switching to Commento [1] instead of Disqus? It is way more lightweight than Disqus, has spam filter and allows importing from Disqus.
Gwern’s site always reminds me of the Talmud (Jewish religious text), which also has a highly distinctive design with multiple “panels” and heavy emphasis of commentary and references. It’s also somewhat confusing and intimidating the the “uninitiated” reader! It is certainly memorable though.
The design is bad because it uses full justification, which hurts readability by making all the lines the same length, which weakens the visual cues for vertical position, and makes the spacing between words inconsistent.
But I don't really care, because the site works correctly with Firefox's Reader View, which is better than any custom design because it always looks the same.
Books are usually hand kerned to avoid large, variable width spaces that are hard to parse. Books have complete control over how the content is formatted and displayed.
Huh? I have about a thousand books in my house. Only a handful have left-justified text.
Gutenberg’s Bible was set fully justified in the 15th century, and that has been the overwhelmingly predominate practice in printed books from then to now.
On the contrary, I find justified text way easier to read and pleasing, as my eyes don't have to scan varying line lengths, but rather go along a fixed line length.
Yet again, this is a website that has clearly only been tested on a hiDPI screen.
At 100% scaling on Windows, the serif font used doesn't kern or render properly; crossbars in letters such as 't' and 'f' are overweight compared to other strokes, and makes the font look uneven.
Designers all seem to think we use 4k screens at 200% scaling, for that ultra smooth look, when in reality, that's far from the case[1].
Sorry. Not sure what I can reasonably do to help there if Windows font rendering is just bad. Is it even something that Frank upstream could do anything about? (He's been responsive to our past bugs.) FWIW, I've heard that Windows font rendering can be good, so there may be settings you aren't using or something.
Looks fantastic on a real operating system at 1920x1080. Gwern is many things, a few of them positive, but he's not a designer. He's just a guy with an internet connection. The site works, though. Just install a better operating system, ideally with X11, that can do proper typography.
> Just install a better operating system, ideally with X11, that can do proper typography.
Ahhh if only life were so simple. While I'm at it, can you provide me with an alternate skill-set and career path that doesn't need me to use Windows for my employment?
"I have to use a plastic spork for work. Therefore, I cannot use a metal utensil at home. Therefore, you shouldn't be able to make food that doesn't mesh well with my plastic spork."
Something can be designed well without being made by a designer. Jaruzel accused him of being a designer as a "reason" for why the site's functionality was, allegedly (and wrongly), not working on low-DPI devices.
In reality, he's just a guy who made something cool and non-commercial on the internet.
I think there's a negative correlation between detailed and overanalysed design philosophies and actually good design (or at least a tipping point of too much analysis after which it becomes negative). This seems to be a good example of that.
It's clear that a lot of love and attention to detail has gone into the making of this website. I like the typography, I like the layout on desktop, I feel like that's very much complete, apart from one thing I'll mention later.
As another person has commented, it does feel inspired by Tufte stuff — though I actually find the Tufte CSS implementation to be preferable to look at aesthetically and preferable for actually consuming content: https://edwardtufte.github.io/tufte-css/
Things I would change:
- the pop-up windows when hovering links etc. are incredibly annoying. There is a button to get rid of them, but that button needs to be on the side with the other customisation options imho
- vertical spacing would look better than indentation for new paragraphs on mobile, it would help the text not look so densely packed, but maybe that's just my preference. It's usable just feels like the text is squashed in (I'm looking at it on an iPhone X). The choice of indentation for new paragraphs looks fine on desktop.
but that's just me and I'm no one and my opinion is meaningless.
Putting the eye-disable button into the theme toggle isn't a bad idea. I used the most common icon I could find for the idea of 'disabling' and made it prominent in each popup, but people still don't seem to realize it's there. Maybe it needs even more prominent billing.
The indent vs newline thing is something that Said & I have long argued about. I like it somewhat more than newlines, but I feel that newlines is just too much of a convention online at this point, and even if indenting is correct, it alienates readers. (We haven't debated newline-on-mobile / indent-on-desktop before - he's not a fan of that either, turns out - although IMO the case for newline on mobile is stronger than on desktop.) We may have to do an A/B test at some point to see if there's a measurable effect.
I like the minimalism of Gwern's site, but the text formatting doesn't feel especially readable. Dan Luu's site has a similar problem https://danluu.com/nothing-works/ by the time I get to the end of a line, it's hard to find the beginning of the next one. Also maybe a matter of taste, but it feels to me like serif fonts are good for books but not so great on the web. The most readable text formatting I've seen on the web is PG's website http://paulgraham.com/submarine.html short lines, sans-serif font, tight paragraphs with space between them.
An easy way to increase readability would be to use multiple columns. That's how newspapers do it. The web is of course a little different but long lines are a problem.
Note on mobile the width is typically only as wide as the screen, which is good. But mobile is really not good for reading in general.
Multiple columns for wide windows is something I find interesting. I haven't seen anyone do a two-column layout which I find satisfactory. https://breckyunits.com/ is a fascinating example, but the layout goes vertically, so the result is bizarre: the most recent article will be cheek by jowl with an old page from 2012. I think it would need be the opposite, wrap horizontally, and scroll-in-place. Something like that. If I ever make another site, I might try to do something along those lines (and maybe use a red/blue centric color scheme).
When browsing this website, one needs to be careful not to move the mouse over anything that will trigger a popup and cover the page they are trying to read. It's quite easy to accidentally get to 3 layers of pupups.
Popups are antipattern, at least when they appear automatic, without user interaction.
I also disliked the random wikipedia links, that appear to point to something [specific](https://en.wikipedia.org/wiki/Specific), but then are just wikipedia definitions…
For people who move the mouse a lot or just don't like popup footnotes, Gwern's website has thought of you aswell. If a popup shows up, click the button at the top right of the popup, and select the option to permanently disable popups.
I'm amazed by Gwern's ability to write. It seems that this guy's writing throughput is higher than my reading throughput. It also reminds me somehow Fravia's SearchLores, it has a similar philosophical feel to it.
The page is responsive. The sidenotes seem to always be available at the bottom as footnotes, but if your browser window is wide enough they also show up beside the location they appear in the text.
I'm not seeing them as sidenotes with a maximised browser window on either my landscape (2560x1440, no scaling, which I'd consider wide) or portrait (1080x1920 – though that being thin I'd not expect width sensitive things to be present there) screens. Just foot-notes and pop-overs when interacted with.
Soon after my startup launched, Gwern asked to do a test of our reading-enhancement technology on his site. His test is now described in the Abandoned section on the linked page. [1]
I learned a very valuable lesson from our interaction: having someone test out your software in a public way is great, but if they fundamentally disagree with how the UX should function, you can't cede control.
Gwern disagreed with us on two fundamental points: (1) which color schemes to use, and (2) whether the user should be aware of (and presumably control) the activation and settings of the technology.
We knew from our usage data that practically no one used the greyscale theme — almost everyone used our colored themes. We also suspected that running a test where users were not made aware of the purpose of the color gradients would confuse and possibly annoy users — especially if they couldn't turn it on/off or change the colors.
The results were not surprising to us: lots of people were confused, and the color-based themes were more popular than he anticipated. In all of our subsequent partnerships/testing, we firmed up our UX guidelines and didn't so much control of testing procedures.
It was perhaps the right move to be flexible in the beginning — who were we, next to the mighty Gwern! But looking back it would have been much better for us (and I think Gwern as well) if the UX had been done in a way that gives users control. One nice looking example of our desired UX is here. [2]
I like the formatting adaptation on this page! Especially, the micro-formatting of each indented paragraph and its subtopic. This technique is applied heavily in print books and technical journals (long dense form) even today, where each accent on the "structured text" adds on to the groove of line-tracking on page. Looks great, works great on print.
However, online scrolls are terrible at long-form. And that's because scrolls animate in a direction that's orthogonal to the reading direction. A vertically animating scroll rips apart our ability to read along a track. Meaning, no line-tracking. Since scrolling itself works against the grain of saccadic perception, animating structured text vertically only adds on to that difficulty of reading online.
I mean, as long as the web is a scrolling paradigm, a poetic structure would work better since its ragged left and right edges would help people track their position on the story better.
Not just you and I don't think the font is the problem in and of itself. The main thing for me is the design is extremely busy, distracting and just plain obtrusive in many ways. For example all the inderlining, annotations, popups with strange CDE-esque headings, the weird "broken image"-style picture they put next to some links for some reason. It constantly calls attention to itself rather than the writing being the primary focus and the design serving to highlight that.
It's quite startling how much better the site is when you turn on "reader" mode in the browser.
Can't understand why websites choose serif fonts. I find long passages of text a chore to read when the font is serif. They're less readable than sans-serif, as the little feet on every letter adds up to unnecessary visual clutter.
And when rendered as white text on a black page, with compacted line spacing, the contrasty serif fonts won't be inviting to the reader.
I agree the white text is a bad choice. Why? Because it is "aggressive" it is "in your face". It screams because of its high contrast. It distracts you from the content you are supposed to be reading. It makes you think you are in a black-room looking at some negatives. Perhaps some secret content.
When you read you should be able to forget that you are reading, your mind just "drops in to the story". That happens with books with black text on white background. You read but you are unaware that you are reading. Your mind just consumes the content.
Maybe part of it is convention since we are used to books and newspapers and magazines not having white text on black background. But I think there's more to it. Black background is like paint, whereas white background is lack of paint. There is no background there is only the text. There is only the content. Therefore you can more easily forget about everything else and focus on the content, on the message.
“Can't understand why websites choose serif fonts. I find long passages of text a chore to read when the font is serif.”
Reading books must be a problem, as most of those are set in serif type. The traditional view is that long passages are easier to read in serif fonts, but tastes vary, and there’s not a lot of good evidence for it. Personally, I find it to be true.
Are you reading on a blurry (dpi < 200) screen? That could be the problem.
Reading books isn't a problem because the serif fonts are tiny black printed letters on paper. Serif helps the small letters stand out. A computer screen doesn't share the same type size issues. When combined with high contrast, I favor the sans and am surprised anyone would prefer serif if given choice.
At typical laptop distance, 200 dpi is around where you can start to see individual dots. This varies by individual of course, but I think that’s more-or-less right. That’s blurry. It’s also where font hinting starts to matter.
Your example seems perfectly fine to me, and is easy and pleasant to read. I’m reading on a Surface Pro 3 that came out in 2014, that I bought on Ebay for $200 and put Linux on. It has a non-blurry screen, as do all phones these days. Non-blurry screens are essential for reading text, and no longer confined to the wealthy. Hallelujah!
It's not just you. I avoid this website, too. I don't want to read a book in my browser. There's too much going on visually, and all in the same color. Three types of links, footnotes, icons, artistic first letters, ... for me, it's way too much.
Not a fan at all. I'm on a 1080p monitor and the main font is janky and tiring to read.
There is far too much going on all over the place, popups and side notes distracting from all directions and apparently it loads ~4Mb of resources to achieve what is largely a text only site.
that thumbnail box appears at random and takes a couple seconds to be populated. Wikipedia has those but they only appear when you hover over some links. When they appear, they are already populated.. Man, that box keeps popping up for no reason..
The content is and has always been interesting, so one can forgive the design, which I feel is poor and irrational in some ways.
Poor because the line width is too long and the proportions are unattractive. Complex information that loads on hover can work offline, as in the sioyek PDF reader, when it’s fast, but is a terrible experience over the network. All that apparatus littering the text is distracting, but the ideas behind it are interesting.
Irrational because of such things as the fixed elements for site settings that only appear on the first page and fade out as you scroll down. If they're only intended to appear at the top, why give them fixed positioning?
> Irrational because of such things as the fixed elements for site settings that only appear on the first page and fade out as you scroll down. If they're only intended to appear at the top, why give them fixed positioning?
They have fixed positioning because they are not only intended to appear at the top. They can be invoked at any time by hovering over the faded-out sticky.
Ah, I see. Thanks for pointing that out. But one needs to know that there is an invisible widget (at least I see nothing at all there, after it has faded out) to hover over. I certainly had no idea.
The idea there is that 'something which has faded out but can be recalled easily' is a fairly common UX/UI design pattern, and so a user will unconsciously know it's there and can easily rediscover it by accident. Plus, everything else on gwern.net makes some sort of use of hover, so it's not like you expect hover to be useless!
Well, OK. Personally, I moved away from using hover for anything important on my sites, because it has such a restricted application. It either doesn’t work or works unpredictably on phones and other touchscreen devices, and is pretty useless for people, like me, who use keyboard navigation. But now I read academic papers using the sioyek PDF reader, which makes such good use of hover that I’m regaining some affection for it. (Hover over a reference to a figure to see the figure pop up without losing your place, for example.)
In my experience, all of those features really slowed down my reading: the superscripts, the underlines on all the links, the serifs, and the visually heavy popups that appear immediately after hovering; contrast with Wikipedia's popups, which feel much lighter.
Thankfully, the site has a built-in reader mode to make most of this go away, but it also removes the good features, like sidenotes, and I have to wonder: if the reader mode is for reading, what's the "regular" mode for?
Text is obscured by the floating graphic tool buttons in the top right, on iPad. Once you scroll down far enough for them to slowly fade out, the whole thing is lopsided, with a big white margin on the left and text hugging the edge on the right.
Points for the detailed explanation of the principles and whims behind it, but the Design of this Website is poor.
The font hinting there looks quite ugly when viewing this on Windows. The font has some very sharp and thick edges, it's not very smooth and comfortable to read. It's probably much better on macOS or somewhere HiDPI.
When I add `* { font-family: georgia!important }` and scale the page down to 75 %, then it's quite comfortable to read.
Dynamic screen resizing has a few bugs. E.g. I dragged right screen border around and at one point (almost minimal width) saw that logo becomes gigantic and takes pretty much all the screen space.
I've suggested that. My idea was that you could put the sidenotes on one side, and the margin notes on the other.
A downside of this, however, is that sidenotes are only useful if they are close to their referent and you can easily 'look to the side' to read them and then back. If you can't, they're just footnotes. And if you take away half the space for sidenotes, on particularly sidenote-heavy pages like _Radiance_ https://www.gwern.net/docs/radiance/2002-scholz-radiance they would wind up being stacked in the only margin for long enough that they would be off-screen, even. Maybe that's acceptable, but it's enough of a drawback that we haven't pursued it.
The first time I saw this website, which was a year ago, I liked it so much that I was reading the code. This looks a new design, it's good but I like the earlier one more.
> A page can be terribly designed and render as typewriter text in 80-column ASCII monospace, and readers will still read it, even if they complain about it.
Ha! I would never complain about that. I'm a programmer!
I read most HN on a 9 year old iPad. It's savage, raw compute would be fast enough, but limited RAM and pinned to a very old version of Mobile Safari. I generally keep JavaScript disabled, otherwise hangs are all too common.
If I can't at least read the basic idea of a web article at these settings, I move on. Perhaps it's arrogant of me, but I'm exasperated by current web design practice that requires megabytes of JavaScript to render a landing page.
`gwern.net` does not suffer from absolute madness, but the use of custom font means that the site is a blank page for thousands of milliseconds, and this old iPad has trouble scrolling the page of text even after the font is rendered.
My comments are probably irrelevant, but I'm not going to be surfing the web on a 16-core workstation with 32 gigabytes of RAM.