Responsive width for desktop?

[joshwcomeau]

I'm working on my first blog post for KA (🎉), and I've noticed that the desktop width is really narrow:

I feel like this isn't ideal because of code snippets; in the example from our most recent post by Brian, the snippets are too wide to fit and need a horizontal scrollbar, which makes them hard to read.

It also just looks kinda funny to me, with half the page unused.

Not sure who to talk to about this, but I'd like to increase the max desktop width by ~200px:

Entirely possible that there's a valid reason for it to be so narrow (to encourage authors to make mobile-friendly posts?). Would love to discuss, and implement the increase if possible :)

[csilvers]

Yeah, I think it's exactly what you suspected: to make sure the blog post is mobile-friendly. I was really annoyed by the narrow width when writing my first blog post, myself, but came to value it when I read my blog post on my phone. :-) What I ended up doing was rewriting my code snippets not to need scrolling, which I never would have thought to do otherwise (since I wrote my blog post on my desktop, obviously).

[kevinbarabash]

I think part of it is having shorter line lengths (by char count) makes it easier to ready. The ideal line length is from 45 to 75 chars. Some things we might do about the empty space are:

• center the article so that we have two smaller blocks of whitespace
• make the font larger

The same article in "reader" mode:

[joshwcomeau]

Yeah, I think it's exactly what you suspected: to make sure the blog post is mobile-friendly. I was really annoyed by the narrow width when writing my first blog post, myself, but came to value it when I read my blog post on my phone. :-) What I ended up doing was rewriting my code snippets not to need scrolling, which I never would have thought to do otherwise (since I wrote my blog post on my desktop, obviously).

Fair enough! It is true that code snippets are almost never fun to read on a mobile device, so I think it's good that we encourage our authors to try and improve on that.

@kevinbarabash I like how you're thinking! The KA blog font is 14px, which is much smaller than most other blogs (Medium, for example, is 21px). We could preserve the same line width by increasing the font size and width, which would solve the issue of it looking funny on desktop without biasing our authors.

I wonder if we could lint for this, by disallowing any code-snippet line to exceed 60 chars. Regardless of whether or not we change the styling, it would be helpful for catching long snippets. I don't know if khan-linter supports per-project rules, though, so this might be tricky.

[sloria]

Was reading the KA blog and also noticed the font sizes were a bit small (on a laptop). I opened #73, which increases both the base font size and the title:body ratio at the 2-column break point (a simplified implementation of the approach described here and here). Hope that helps!

[csilvers]

@joshwcomeau can we close this now that #73 is landed?