I do. But that doesn’t mean it’s the best choice for large blocks of text like this.
I didn’t make this comment lightly. I actually played around in the inspector and changed things to see what would make it better for me. The result was:
line-spacing: 1.6;
width: 700px;
color: #555;
The biggest improvement for me was the line-spacing, followed by the change in width, which made it much easier to scan. The color change helped slightly (not as dramatically, for sure!), which I’ll say is likely a result of the background being white. The designer choose a non-black color for the text (which was good), but mixed with the really dense monospace, I preferred slightly less contrast. Alternatively, with the color as is, and the background as #fbfbfb it worked, too.
I would argue that using a monospaced font for code is a compromise: Individual tokens would be more legible in a proportional font, but character column alignment is more important for code, so we tolerate monospaced fonts as the only practical way to reliably align things.
3.2. Every interaction is better with an animation
You don’t need to be a motion designer to slap a transition: all 300ms ease into your stylesheet. A sharp transition is harsh and old. An animated transition is smooth and pleasant. These values work particularly well by default — any shorter, and the transition is not noticeable, any longer and the transition becomes annoying.
If you develop for desktop, hover effects work nice. Hover styles by themselves have a reassuring effect on the user — the element is interactive, the mouse is in the right place. With a transition, it’s even better.
I agree with most of the article but I disagree with this statement, especially the example. Animation makes a lot of things better, it does not make everything better. The unanimated button feels more responsive than the one with the animated hover. I do agree that removing elements should usually be animated though.
They’re fine if they’re fast. It’s less about making things feel responsive, and more about making the response visible. I’d argue that a 1-frame change is less noticeable than a 5-frame change.
Sidenote: I think it’s very unfortunate that we use the word design for almost exclusively for UX now rather than inclusively for UX, code, and architecture. I’m not sure how it happened.
Somewhat ironically, I found the text on this page impossible to read. The lines are too squished, a bit too long, and the font isn’t readable.
Do you not use monospaced fonts when you develop? I’d argue that font is readable to most people.
I do. But that doesn’t mean it’s the best choice for large blocks of text like this.
I didn’t make this comment lightly. I actually played around in the inspector and changed things to see what would make it better for me. The result was:
The biggest improvement for me was the line-spacing, followed by the change in width, which made it much easier to scan. The color change helped slightly (not as dramatically, for sure!), which I’ll say is likely a result of the background being white. The designer choose a non-black color for the text (which was good), but mixed with the really dense monospace, I preferred slightly less contrast. Alternatively, with the color as is, and the background as #fbfbfb it worked, too.
Fair enough, thanks for elaborating :)
I would argue that using a monospaced font for code is a compromise: Individual tokens would be more legible in a proportional font, but character column alignment is more important for code, so we tolerate monospaced fonts as the only practical way to reliably align things.
I agree with most of the article but I disagree with this statement, especially the example. Animation makes a lot of things better, it does not make everything better. The unanimated button feels more responsive than the one with the animated hover. I do agree that removing elements should usually be animated though.
They’re fine if they’re fast. It’s less about making things feel responsive, and more about making the response visible. I’d argue that a 1-frame change is less noticeable than a 5-frame change.
not just for Programmers, actually for everyone not doing design everyday
Only for programmer you can use a fixed-width font like that.
Sidenote: I think it’s very unfortunate that we use the word design for almost exclusively for UX now rather than inclusively for UX, code, and architecture. I’m not sure how it happened.
What confuses me is at what point did we make the change from HCI to UX?