The guy’s actual CSS is a lot more than 58 bytes though :(
(author here) True. By looking great nearly everywhere, I mean the layout of the elements on most devices/viewports.
I was about to post this as a positive thing! It’s still tiny, understandable, and looks great.
Thanks for the insightful content.
You could do away with most of the markup by applying this to the body tag instead, like I’m doing on tilde.town… might lose some semantics, but you can cut down on total bytes…
Relevant discussion here!
This reminds me that I need to go through and cut down the css on my website; a good 60% of it can be refactored to 100 lines or less.
“… 38rem is 608px. supporting 600px displays at a minimum seems reasonable.”
A 608px width would be too wide for a 600px display, but I think you meant 640px displays anyway.
Am I the only one who finds it annoying to have real skinny columns of text with giant margins in my nice wide screens? I understand people often feel just as poorly about wide screens filled edge to edge with text, but can’t there be a nice compromise?
I agree for media content (images, videos) but not for text. If the lines are too long then it is very difficult to read for me, because when reaching the end of a line then going to the next line is difficult.
I don’t know the research behind it but I keep seeing the optimal line length for readability be defined as between 50 and 75 characters.
Personally I prefer column widths to be about as wide as a novel with font size comfortably readable from about half a meter from the screen. I have noticed that if columns are wider I tend to increase the font size in a constant ratio in order to achieve readability.
A number of blogs I follow don’t have any css styling at all and are essentially wall to wall text, for me to be able to actually read those I have about 16 lines of css that I inject otherwise it all just becomes a jumble of colours and shapes.
Probably instead of injecting CSS your windowing system has an ability to make your browser window the width you actually want to view webpages at.
It does, but I normally have two windows locked at half width on one monitor and one full screen on the other monitor. I rarely if ever have windows tiled at some abstract size and even with the two windows locked I like to see a margin between the text and the edge of the window ;)
This, unfortunately, doesn’t work in practice. There are too many sites out there that assume a particular minimum window width and add fixed-size margins to make the center column narrower. So with a narrower window you end up injecting CSS on those sites to get smaller margins, or with a wider window inject CSS on the other sites to make the text column narrower.
(I personally resize my browser window depending on the site I’m visiting, because I gave up fighting this battle ages ago).
As others have said, the reason is because there is an optimal readability length of lines. If lines are too long, then text can “swim” in front of the user and it is more difficult to read. If lines are too short, then lines feel choppy and you
end up reading
in blocky bits
like this and it
The wikipedia article on line length is quite well sourced and explains the difference between print and screen as well.
Butterick’s section on responsive design gives some seemingly solid tips on spacing and line length.
I have the opposite problem… I often run across websites that were designed by people who apparently only ever use their computer in what I call “iPad mode,” i.e. every application is full screen, all the time, and they just constantly switch between them. As a result, the sites they develop take up the full width of their display (or close enough to it).
The problem is, I like to have many applications on my screen at the same time, it’s why windowing systems were invented back in the early 80’s. My web browser doesn’t take up my full screen width, it takes up maybe 1/2 of it. Which means these “wide mode” sites either require horizontal scrolling to read them (best case) or are just completely broken and unreadable, which is more often the case.
Also, there’s some well-known science somewhere about narrow text columns being easier to read than long ones. That’s why magazines and newspapers almost never print an article the full width of the page and instead break it up into two or more columns.