search

Khan / engblog

KA Engineering blog.
http://engineering.khanacademy.org
Other
29 stars 20 forks source link

Responsive width for desktop? #68

Open joshwcomeau opened 7 years ago

joshwcomeau commented 7 years ago

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

screen shot 2017-06-17 at 10 45 11 am

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:

screen shot 2017-06-17 at 10 49 57 am

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 commented 7 years ago

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 commented 7 years ago

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:

The same article in "reader" mode:

screen shot 2017-06-17 at 2 57 29 pm
joshwcomeau commented 7 years ago

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 commented 6 years ago

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 commented 6 years ago

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