I humbly submit my own blog as being pretty darn readable without bloat. It’s responsive and simple. https://alanhogan.com
Edit: Here’s a relevant article: The problem with new blogging platforms https://alanhogan.com/the-problem-with-new-blog-platforms
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.
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".)
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.
Or maybe I'm just a moany old git :-)
Cheers, Alan.
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.
That said I am not defending current state of Medium.
Also this format works great with the browser's "Reader" function.
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.
It still would using max-width.
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.
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.
Pow, you have a choice about how wide the lines are.
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.
https://en.wikipedia.org/wiki/Responsive_web_design
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.
max-width: a bunch of ems;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.
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.
Only if you make it too small.
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.
Oh well. I guess we agree to disagree.
> Just get a smaller house.
---
> Hey, we are going to launch our product in a country that doesn't speak English but we don't have i18n ready.
> Just ask the users to use Google translate.
And you wonder why we can't have nice things.
Also, obligatory link: https://thebestmotherfucking.website
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.45;
background-color: #ededed;
margin: auto;
padding: 0.5rem;
max-width: 80ch;
}
.pd {
padding-bottom: initial;
}
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.)Should publication platforms be giving us two choices: their design and implementation; or raw text (HTML) we can style ourselves?
A little used browser feature is alternate style sheets. (View -> Page Style in Firefox.) This lets a site ship multiple CSS styles to the end user with some default. Example: https://developer.mozilla.org/samples/cssref/altstyles/index...
I think this is why RSS did and is dying, although it also seems to be making a comeback.
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.
That's how Google design used to be but is not anymore.