Design of This Website (2021)
gwern.net
gwern.net
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.
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
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.
Visual redesign, sure, the client will pay for that.
Fixing an existing visual design when problems are reported? Nope.
And as @gwern mentioned, https://news.ycombinator.com/item?id=30961582 , the problems won't get reported.
The contract didn't include ongoing maintenance or instrumentation to detect problems. So we can't do it.
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?
----
`font-display:swap` is great
Font-display on CSS-Tricks: https://css-tricks.com/almanac/properties/f/font-display/
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/...
Can I Use: https://caniuse.com/css-font-rendering-controls
Last iOS for my iPad 4: https://en.m.wikipedia.org/wiki/IOS_version_history#11.1
^^^^ October 31, 2017
----
I don't expect things to work well in these circumstances.
Completely out of scope.
I do wonder, though, what the wide world out there -- the non-computer-programmers -- might take away from all this.
A web browser is the USB-C of software.
It plugs into everything, and most people have no mental model of why things fail the way they do.
Thanks very much for gwern.net, an inspiration for non-blogging me.
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.
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.
I say "theoretically" because I'm not blind and have never used a screen reader, and I'm not extremely experienced in the area.
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.
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?
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.
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.
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.
Which aria-labels? There's a ton of them.
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:
That's a lot to you? It's very few to me.
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.
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.
Websites exist to serve content. The author of this page demanded it have a background image.
Here's another page that doesn't:
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.
On the plus side, your site is friendly in reader view.
• Never justify text in digital • Never right align long form in digital • Both need to learn balance between type size and line height
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.
Just my two cents.
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.
Content is not simple text in this case. My site is designed for visual arts and experimental literature, including poetry.
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.
I wrote about this "sticky" header problem back in 2019. Seems very relevant to this current discussion.
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.
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.
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.
text-align:right? WTF?
This really hurts when reading. So, while it might be minimalistic, it's not good design.
> 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.
You actually experience physical pain?
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.
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?
Exactly. Only one way to find out: Somebody try something different!
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.
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.
Is there any research done on this?
> You actually experience physical pain?
No. It slows down my reading and it makes it difficult to understand text.
BeeLine [0] claims to be backed by research and employs a similar device. Seems to be a new idea, and I wanted to experiment.
Also, their text is left-aligned.
If you're up for more experiments, try a line highlighter that follows a cursor, like so: https://blog.adobe.com/en/publish/2021/05/06/hacking-readabi...
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.
By the way, your link "My Work" under "What I want" is a 404.
I don't think you should be criticising anyone xD
* 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.
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".
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
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.
[0] https://hypertele.fi/d9a64d59472ad05b
> the right alignment of the text
Quoting the very page under discussion:
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.
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?
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.
> Less is more. Simple as possible but not simpler. Good design elevates the essential functions of a product.
https://en.wikipedia.org/wiki/Dieter_Rams#%22Good_design%22_...
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.
THIS is minimalism: https://manuel.kiessling.net
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.
All of that without looking brutalist.
> 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?
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.
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.
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.
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.
One note: in general there's a UX recommendation not to use flags when you mean languages. http://www.flagsarenotlanguages.com/blog/
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?
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.
The alternative is to use ISO (En, De, Es) in brackets before the text begins. i.e. [DE] Wie Studien verdreht werden
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.
Do you think so?
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, ...).
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.
If the context is currencies, everyone would know that a european union flag refers to the euro.
it's a visual cue, not a translation into hieroglyphics.
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).
If you need a corresponding URI fragment, the ISO language codes exist for that reason.
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.
Take notes people!
My website[0] is far from ideal, but certainly falls in line better with the term “minimalism” (page speed, assets loaded, initial paint etc)
I can hear a million professional designers spinning in their graves at your claim.
Too many people trying to reinvent the wheel without learning the fundamentals.
It would have been more semantic to use <em> for emphasized text instead of <I>.
Placeholders on form fields are not labels. The comment submit button has tabindex="-1", preventing keyboard users from submitting a comment.
You can just hit Enter after typing your name. No need to select the button.
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.
Oh snap you're right. Anonymous commenting is a requirement. An oversight! Will fix, much thanks.
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?
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.
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.
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.
My personal blog! Let me know if you like any of the stuff on it. And what I'm wrong about :)
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).
A few complaints:
- on phones, the line spacing in the beige boxes on /about is too high
- I think the headers on /cc and /visual need tome tweaking
--- the spacing between the quote to the actual headline is too big
--- on CC, it took me a while to even figure out what the header was because it was nearly indistinguishable from the years
- the feedback tab takes you away from the website, despite looking identical to the other tabs.
Note: these are not 'historiated' because they contain no history, identifiable figures, or scenes. They are just initials/dropcaps.
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.
1: https://thegradient.pub/has-ai-found-a-new-foundation/ https://wildcardpeople.com/what-is-a-wildcard-person https://jaack.me/cleanmymac-x/
https://github.com/karthikeshwar1
It's minimal, easy to manage and update.
I did try making my own site though: https://karthikeshwar1.github.io https://karthikeshwar1.github.io/lite
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".
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)?
There's other cool web archiving stuff out there too that's just the one I know about.
Lots of jobs and scripts, plus usage of archive.org as well. It's an interesting read.
I still use archiver-bot etc, they're just not how I do the on-site archives. See https://github.com/gwern/gwern.net/blob/master/build/LinkArc... https://github.com/gwern/gwern.net/blob/master/build/linkArc... for that.
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.
> 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.
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'.
I can see they might be good sometimes but lots of them makes the page look busy.
And would you say that using lots of them is "minimalistic 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.
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.)
• 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?
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).
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.
Do you regard all books as poorly desgined?
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.
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].
Edit: Example of what I'm seeing: http://www.jaruzel.com/files/fonts.png
---
[1] https://gs.statcounter.com/screen-resolution-stats/desktop/w...
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?
.NET works with Linux, anyway.
His website is wonderfully designed, so I am having a hard time understanding your point…
In reality, he's just a guy who made something cool and non-commercial on the internet.
Edit: Just checked Firefox on Windows, same result...
So it's Windows, yay.
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.
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.
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.
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 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]
1: https://www.gwern.net/Design#abandoned
2: https://unreasonable.is/how-to-stop-working-and-be-more-prod...
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.
It's quite startling how much better the site is when you turn on "reader" mode in the browser.
https://en.wikipedia.org/wiki/Common_Desktop_Environment
But yes, those popup headings are way too chunky.
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.
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.
A monitor with less than 200 ppi isn't blurry!
If interested, here's the exact moment recently I thought "oh how I dislike serif fonts".... I think I bailed half way through... https://blog.thenewoil.org/why-to-care-about-privacy-after-y...
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!
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.
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.
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?
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.
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?
Also, typo: "epxnesive".
Points for the detailed explanation of the principles and whims behind it, but the Design of this Website is poor.
When I add `* { font-family: georgia!important }` and scale the page down to 75 %, then it's quite comfortable to read.
Element:
<use href="/static/img/logo/logo-smooth.svg#logo"></use>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.
Read about his AB-testing on the site metrics here.
1. Click on the article link and land on the "Design of this website" page.
2. Now click on "Site" on the left navigation to go to "About" page.
3. Click the back button on the browser
See what you get :)
Ha! I would never complain about that. I'm a programmer!