42 ms·
Design of This Website (2021)
- harikb 5y agoTry this 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 :)
- eterevsky 5y agoI don't get it. I'm just getting back to "Design Of This Website".
- thunderbong 5y agoIt works normally for me. I'm on a desktop computer. What is happening in your case?
- harikb 5y agoFor me, on Chrome/Mac, I get the previous About page as a popup that I have to explicitly dismiss. May be it is just me :o
- tomcam 5y agoIt’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)?
- voussoir 5y agoThere 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. https://github.com/gildas-lormeau/SingleFile https://github.com/gildas-lormeau/SingleFile
- tomcam 5y agoDef a good start, thanks.
- chefandy 5y agoWeb archiving goes pretty deep, actually. I have no idea what this site uses but the open source tools maintained by the Webrecorder project are rad.
- airstrike 5y agoI absolutely love the footnotes along the sidebars (though I would prefer it if they were all on the same side)
- gwern 5y agoI'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 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.
- wodenokoto 5y agoIt says it is using sidenotes instead of footnotes, but all I see in the article is footnotes at the very bottom.
- HellsMaddy 5y agoThe 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.
- dspillett 5y agoI'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.
- Rebelgecko 5y agoThe notes showing up along the side is dependent on page width
- thunderbong 5y agoI see them as sidenotes on the desktop.
- kingabc 5y ago[flagged]
- isaacimagine 5y agoAm I missing something? Is this just pure linkspam?
- harikb 5y agothey are a spammer/bot https://news.ycombinator.com/threads?id=kingabc https://news.ycombinator.com/threads?id=kingabc
- cglong 5y agoIronically, the popins caused my $120 phone's browser to hang and had to be force quit :)
- dgellow 5y agoI came here to say the same. The Lorem ipsum example crashed safari
- petters 5y agoIt also crashes mobile Chrome on a Pixel 4a.
- 5350-uiop-1130 5y agothe joys of being a front end developer in 2022
- plzbo 5y agoLoads fine on my 100€ phone on Firefox, even the Lorem sample page
- 4mitkumar 5y agoLoads fine and smooth in Firefox on a 3 year old Android (midranger)
- Lamad123 5y agothat 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..
- tut-urut-utut 5y agoIt's terrible. 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.
- creatonez 5y agoFor 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.
- nitroll 5y agoMy solution was to close the tab...
- nicbou 5y agoThis is a problem I never managed to solve elegantly. Now the glossary on my website works on click. It’s a lot less annoying.
- VaxWithSex 5y agoI also disliked the random wikipedia links, that appear to point to something [specific](https://en.wikipedia.org/wiki/Specific https://en.wikipedia.org/wiki/Specific), but then are just wikipedia definitions…
- wetpaws 5y agoI fund gwern unreadable, despite their focus on typography. Maybe it's just my b rain not working very well with serif fonts.
- WA 5y agoIt'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.
- chandureddyvari 5y agoSame here. I switch to Firefox Readermode to read it. May be my brain is trained to comprehend better if the reading experience is consistent.
- seanhunter 5y agoNot 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.
- creata 5y agoDoes CDE stand for "Common Desktop Environment"? https://en.wikipedia.org/wiki/Common_Desktop_Environment https://en.wikipedia.org/wiki/Common_Desktop_Environment But yes, those popup headings are way too chunky.
- exodust 5y ago> serif fonts 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.
- petters 5y agoThe ideas are great, but the implementation is too heavyweight for a phone. There is delay when clicking a side note and the Lorem Ipsum page crashes.
- eigenvalue 5y agoGwern’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.
- gwern 5y agoSpeaking of the Talmud... https://www.gwern.net/Red#peterson-et-al-2019 https://www.gwern.net/Red#peterson-et-al-2019
- eigenvalue 5y agoCool article!
- ramyarjahani 5y ago[dead]
- self_awareness 5y agoI'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.
- bmitc 5y agoI 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.
- gwern 5y ago"These may have varying features, for example some lacking small caps." https://en.wikipedia.org/wiki/Baskerville#Digital_versions 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.)
- eCa 5y agoSmall caps are what they sound like, uppercase characters the size of lowercase characters. Kind of. https://en.wikipedia.org/wiki/Small_caps https://en.wikipedia.org/wiki/Small_caps
- bmitc 5y agoHmm, 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.
- hypertele-Xii 5y agoFor 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: https://hypertele.fi/ec997be8c5933e87 https://hypertele.fi/ec997be8c5933e87
- gwern 5y ago> historiated initials Note: these are not 'historiated' because they contain no history, identifiable figures, or scenes. They are just initials/dropcaps.
- fourteenminutes 5y agohttps://ayazhafiz.com/cc https://ayazhafiz.com/cc My personal blog! Let me know if you like any of the stuff on it. And what I'm wrong about :)
- hypertele-Xii 5y agoI like it a lot! Very clean. Two observations: 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).
- SebastianKra 5y agoI like this design a lot. I like the margin notes in articles. And the design of /about is just so fun to look at. 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.
- Jaruzel 5y agoYet 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]. Edit: Example of what I'm seeing: http://www.jaruzel.com/files/fonts.png http://www.jaruzel.com/files/fonts.png --- [1] https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide https://gs.statcounter.com/screen-resolution-stats/desktop/w...
- gwern 5y agoI use Firefox on X11 with an ordinary non-HiDPI Dell monitor, and Said doesn't use a HiDPI monitor. (As far as being designers, I am not but Said is.)
- Jaruzel 5y agoSo what we're basically saying, and seeing is that Chrome on Windows, is the real culprit here? Edit: Just checked Firefox on Windows, same result... So it's Windows, yay.
- gwern 5y agoSorry. 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.
- icelancer 5y agoI am on 3440x1440 at 100% scaling and gwern's site reads plenty fine to me, and has for years.
- caslon 5y agoLooks 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.
- creata 5y agoIn 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? Also, typo: "epxnesive".
- icelancer 5y agogwern tends to test stuff. Nootropics, ideas, and indeed, long-form readability. Read about his AB-testing on the site metrics here. https://www.gwern.net/AB-testing https://www.gwern.net/AB-testing
- biztos 5y agoText 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.
- kretaceous 5y agoI 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?
- adiabatty 5y ago> • 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).
- deleted 5y ago[deleted]
- mro_name 5y agomonochrome, interesting!
- watersb 5y agoLove 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.
- watersb 5y agoThere 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.
- gobins 5y agoThe 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.
- wanda 5y agoIt'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/ 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.
- gwern 5y agoPutting 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.
- cousin_it 5y agoI 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/ 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 http://paulgraham.com/submarine.html short lines, sans-serif font, tight paragraphs with space between them.
- galaxyLogic 5y agoAn 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.
- gwern 5y agoMultiple 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/ 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).
- epolanski 5y agoI 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.
- gwern 5y ago> 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. Which aria-labels? There's a ton of them.
- srmarm 5y agoNot 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.
- mrob 5y agoThe 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.
- leephillips 5y ago> hurts readability by making all the lines the same length Do you regard all books as poorly desgined?
- mrob 5y agoYes (at least all the professionally published ones I've seen). This is a major reason why I prefer ebooks.
- extra88 5y agoMost books left-justify text.
- leephillips 5y agoHuh? 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.
- rjh29 5y agoBooks 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.
- N1H1L 5y agoOn 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.
- tompazourek 5y agoThe 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.
- leephillips 5y agoThe 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?
- gwern 5y ago> 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.
- leephillips 5y agoAh, 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.
- gwern 5y agoThe 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!
- leephillips 5y agoWell, 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.)
- deepsun 5y agoDynamic 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. Element: <use href="/static/img/logo/logo-smooth.svg#logo"></use>
- gwern 5y agoSaid will look into that.
- pSYoniK 5y agoIt 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.
- gwern 5y agoYeah, 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.
- Self-Perfection 5y agoHave you considered switching to Commento [1] instead of Disqus? It is way more lightweight than Disqus, has spam filter and allows importing from Disqus. [1] https://commento.io/ https://commento.io/
- gwern 5y ago$100/year is nontrivial. I'm not sure I even get $100's worth of comments per year, given that 99% of comments are elsewhere (like here).
- marvindanig 5y agoI 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.
- brainwipe 5y agoIt claims to do accessibility but I pointed Wave at a couple of pages to check WCAG and it shat the bed.
- city17 5y agoI 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.
- softwarebeware 5y ago> 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!
- amelius 5y agoI liked the design, ... until I scrolled down to the ads and Disqus section ...
- gwern 5y agoThere are no ads.
- gnicholas 5y agoSoon 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] 1: https://www.gwern.net/Design#abandoned https://www.gwern.net/Design#abandoned 2: https://unreasonable.is/how-to-stop-working-and-be-more-productive/ https://unreasonable.is/how-to-stop-working-and-be-more-prod...