Yes, this a thousand times. One example, Dan Luu [1] gets this absolutely right. His blog would probably look similar on Lynx, or any text-only browser, yet is better than 99.99% of stuff "out there".
I mostly like your design, a nice clean look, but I have a couple of comments and a suggestion that you are free to ignore completely.
Firstly, I hate sites that use such a narrow column on the screen. The wall of text from the previous post is obviously too much and is far too difficult to read and keep track of where you are, but using only a third of the screen seem far too little. I'm sure you could double the width of your text without affecting readability.
Secondly, I have really good distance vision but need reading glasses. I find the text on your site a bit small. From a distance it just a bit too small to read comfortably and from close with my reading glasses I feel like I need to get too close. Yes, I can increase the font size easily, but how about...
My suggestion: decrease the size of your borders by about 50% on each side and then increase the font size by 1 or 2 points. The increased column size will give more text on screen, but the increased font size will make sure it is not too much.
> Firstly, I hate sites that use such a narrow column on the screen.
FWIW most professional typographers recommend a column width of 30-40em. Much more than that seriously increases the distance the eye has to travel from the end of one line to the beginning of the next, and makes it harder to keep track of where you are.
The max-width of this blog's main column is... 40em.
And now you know why so many sites do this thing you hate.
(An em, if you are not familiar with it, is a typographical measurement equal to "the width of an M in this font".)
I am familiar with em thanks. I am a software developer and have done some web development in the past.
Far be it from me to argue with professional typographers, but do you hear anyone saying "oh, the line lengths on paperbacks are far too long, I can't scan them"?
Maybe it's just me but I'm a little tired of always having to cater the the very lowest common denominator. That narrow width seems almost ludicrously too narrow to me, it's like a childrens book.
There has been research that suggests that most people don't finish articles, so it seems to me that maybe making columns so narrow is catering to the audience most likely to have such a short attention span that they probably won't finish your article anyway.
You’re exactly right. I have heard typographers express the maximum readable width as "two and a half alphabets," which is roughly 40em. A max-width of 40em is extremely responsive, making the most of your screen (on mobile) without overextending and compromising reading comfort (on desktop).
Disagree slightly on the width. Perhaps a little wider, but I don't hate it. On the font size: Home page gets it, actual posts the font size is far too small IMO
I actually agree and want to increase my main body font size. It’s also probably time to go serif, as sans-serifs are best suited for low resolutions (like for body text on all computers and mobile phones up to ~8 years ago) and serifs shine in high resolution (like on the printed page); today high-density screens are more common. Even “1x” monitors are wide enough that the increased font size they make possible increases the number of pixels available per rendered character. In the mean time, browser zoom will work well!
The right place to fix the long line issue is on the browser side, with user in control of what makes the line "long" - since it's inherently a subjective metric.
If most websites were like this one, I could write a simple one-page CSS that formatted them the way I want - including fonts, colors, lines etc. As originally intended by this whole HTML thing.
Hmm, just on the home page, or on actual articles? I don’t know why it wouldn't work on articles. (Edit: Actual articles are compatible with Safari’s reader mode. I don’t think you will find index pages are generally compatible, on any site)
No, you're right. I thought I had checked an article but I must not have. It is working in Safari. And it also turns out "reader mode" in Chrome isn't a think (that's on by default), which I wasn't aware of.
On my regular browser size this looks something like this [1], which is borderline unreadable due to the width alone. Sure I can resize the browser at least, but even then I am finding the posts hard to read due to the font-size, letter spacing and line-height. The browser default styles did work perfectly in the 90's, but they didn't evolve when the devices use to browse the pages did. And yes, you can always use Lynx, adjust the styles myself or use a CRT display, but I most likely won't bother.
That said I am not defending current state of Medium.
> On my regular browser size this looks something like this [1], which is borderline unreadable due to the width alone.
Just resize your browser window: it's not the site's job to guess how you want content displayed.
I loved browsing the web in the 90s: I had a half-width browser window on one side of my screen, an editor window in the upper quadrant of the other side and a console window the the lower quadrant. It was great! Then suddenly every website decided that I must have a full-width browser window, and was ludicrously narrow with a half-width browser. And they all stopped using and started abusing CSS. And then they all started using & abusing (but I repeat myself) JavaScript.
All I really want from the Web in 2018 is the experience I had in the 90s, and I can't get it any longer.
Here's the thing: your browser has a handy tool to increase/decrease font size. Usually it will also scale the images in sensible ways. And it's available via keyboard shortcuts, so it's easy to zoom in/out.
Also this format works great with the browser's "Reader" function.
Here's the thing: It's not better zoomed in. Insanely huge lettering isn't any better just because it's suddenly 85 characters wide on your screen, or whatever the goal these days is.
At a certain point you have to recognize that even little CSS (max-width, font-size) can actually be a good thing, and when a site lacks this it doesn't make it somehow inherently better, it just makes it harder to read and I am nearly as inclined to simply hit the back button as I am on Medium articles. It's two ends to a horseshoe. The best place to be is somewhere closer to the middle.
> Here's the thing: your browser has a handy tool to increase/decrease font size.
Here's the thing: I don't want the font or the images to be bigger, I want columns to not be this absurdly long. The only way for the user to achieve it is to resize the browser window.
There is a "max-width" CSS property for that. No framework or JS required, just a modicum of care.
> Also this format works great with the browser's "Reader" function.
I know people keep saying this, but resizing the browser is not really a viable solution with today's messed up web. Sure, I can resize the browser for this blog using full width lines but then I have to resize my browser again for another website because the other website chooses to waste half of the horizontal real estate with meaningless stuff. As a user, I can't keep resizing the browser for every site I visit.
I have a 40in monitor, a 13in monitor, and a 7in monitor.
It's impossible for a site developer to know how much space to allocate to their page.
On the 40in screen it would be asinine for me to maximise it, for example.
It's completely unsurprising to me that I can resize the window into a state where the website becomes silly. I just don't do that.
Resizing a window is trivial, it's not that you can't, it's that you won't.
edit: Obviously I know what responsive design is. I'm on Hacker News. The author hasn't done it (probably because they have better things to do), you have a trivial option to work around it.
The contrast to be drawn is with a site like Medium that deliberately goes out of its' way to be annoying and harder to use for some vague profitability goal.
Or the website could just set a width on the text column. Why are we pretending this website is some paragon of design? Simple is good but there are still basic readability standards that are important and can be achieved with one or two lines of css.
This concept is popular for more than 10 years now. Many websites do it with something as simple as
article { max-width: 60em }
> It's completely unsurprising to me that I can resize the window into a state where the website becomes silly. I just don't do that.
Take Twitter for web. Reduce the browser to something like 60% or 70% of the screen width. The <div><p>...</p></div> elements containing the tweets are chopped off on the right side. It disrupts my reading experience due to minor resizing. This is most of the web today.
> Resizing a window is trivial, it's not that you can't, it's that you won't.
That's true. I don't want to be resizing my browser up and down for every good and bad website.
> Okay, so on my screen that means 80% of the window is whitespace and it burns my eyes. background-color: black, I guess?
Apart from calibrating the room lighting and monitor brightness, one can still have a dark background for the body but not for the wrapper that has max-size on it.
E.g. http://camendesign.com/ here you would have white that burns your eyes if it was done without max-size, as is it's much better. [edit: just noticed that blog actually doesn't use max-size, it doesn't shrink; but it easily could]
> Responsive design is a thing, yes, but ultimately on a desktop computer you're always going to be able to choose a browser size that breaks a site.
On my laptop that site has a microscopic font size.
It's interesting though because I hit Ctrl-+ before I even realised I was doing it.
I guess I just don't see this stuff as being a big deal. It feels like a normal manual adjustment, like if I was pouring coffee and I have to make sure I aim to not spill it over the edge of the cup, or something.
Just have your narrow width as your second browser size. One double click on the tab bar in firefox and you are there. I have a big monitor too but I kinda hate full screen browser windows just because no website is really made for it. Either the line width gets out of control, or it just wraps anyway and I have two huge swaths of blank space on each side of the content.
Dan Luu's blog is almost there, but personally I'd prefer if there was just a tiny bit of CSS that capped the width of the text. With full width paragraphs, it's not the most pleasant to read.
Stylus (not Stylish) can make sites like this readable enough if you visit them often enough to be worth a couple minutes to fix them. Here's a tiny bit of CSS:
One point in favor of ultra-minimalism is that it's easier to add a few styles than to undo layer upon layer of Bootstrap. (Only undid one declaration here and that wasn't strictly necessary.)
I think it's too late to get publishers to agree on any kind of sensible conventions within the wild wild web ecosystem. It would require a massive user exodus to an entirely different application for producing, sharing, discovering, consuming and commenting on content with no scripting and leaving presentation/theming up to the user. Just a simple document-oriented markup language, e.g. maybe a subset of DocBook. Ideally it would have no HTML/CSS/JS legacy baggage weighing it down so we can have our RAM back.
Not to mention the fact that by saying, "Just give us HTML and we'll do the rest", you're taking away their ability to push adverts and track you for that juicy, monetizable(?) tracking data.
I think this is why RSS did and is dying, although it also seems to be making a comeback.
The total lack of styling makes it almost unreadable. Even if you resize the window to get a sane page width the lack of margins makes it uncomfortable to read.
The question you should be asking is, why is the default CSS in your browser making unstyled websites uncomfortable to read? The browser could provide sane defaults for margins etc. It just chooses not to - probably because everything it renders is going to be styled anyway, so why bother?
Ironically, the "reading mode" thing that is becoming popular is essentially that - stripping the page of most of its custom styling, and then applying some sensible default style. It's like we went full circle, all the way back to pre-CSS times.
Oh come on, that is not easy to read. There's no reason to go back to the 1990s, minimal styling and good typography with reasonable margins and spacing are absolutely worth it for readability.
There's also Pocket that'll happily keep a nice formatted copy of the article from that site, regardless of the current ugliness, making the reading experience on mobile quite pleasant.
[1] https://danluu.com/