HN Explorer

Why doesn't HN use responsive units?

6 points by terminalcommand ↗ HN
HN works great on mobile, but on desktop it doesn't. Every time I open HN on my computer, I either have to make the window smaller to make the text readable or zoom.

The problem is that if I zoom, the line-width gets out of hand and it gets hard to read the comment threads.

If HN used a responsive unit instead of pt for font sizes, the site would become much more readable.

There isn't much difference in readability between 1 em and 10 pt in mobile, but there is a huge difference in desktop browsing.

To test out my ideas I've hacked together a 10 line custom css to demonstrate the concept.

  @-moz-document domain(news.ycombinator.com) {
  .comment {
 	  font-size: 1.2em; 
  	  line-height: 2em; /* optional */
  }

  .title {
 	  font-size: 1em;
 	  padding: 0.25em 0.1em;
  }

  .subtext {
          font-size: 0.8em;
  }
  }
I've also created a stylish theme on this CSS, if you want to test it or look at screenshots, you can look at: https://userstyles.org/styles/160671/minimal-hn-readable .

I think we need to tweak the HN stylesheet for desktop users. With high-dpi screens becoming more and more present in our lives, the old pt method will cause us problems. And the solution is so simple: we can just switch to em's.

7 comments

[ 2.9 ms ] story [ 16.5 ms ] thread
pwg
> The problem is that if I zoom, the line-width gets out of hand and it gets hard to read the comment threads.

One question. On desktop, do you by chance have your browser window maximized?

If so, try an experiment. Demaximize your browser window, make it full screen height, but about 1/2 (or a bit more) screen width.

Then see if the line length goes out of hand.

If your browser is not maximized, well then this experiment will be of no benefit.

terminalcommand
> Demaximize your browser window, make it full screen height, but about 1/2 (or a bit more) screen width.

This works, the line-width does not get out of hand. It even switches to full screen view and removes the margins.

If I use a narrower window, there is no problem. But if I use any window bigger than 1400px, the line-width becomes an issue.

I think the problem may lie in the screen specific CSS of HN, there is no custom CSS after 1349px max width:

  @media only screen and (min-width : 300px) and (max-width : 389px) {
    .comment { max-width: 270px; overflow: auto }
    pre { max-width: 200px; }
  }
  @media only screen and (min-width : 390px) and (max-width : 509px) {
    .comment { max-width: 350px; overflow: auto }
    pre { max-width: 260px; }
  }
  @media only screen and (min-width : 510px) and (max-width : 599px) {
    .comment { max-width: 460px; overflow: auto }
    pre { max-width: 340px; }
  }
  @media only screen and (min-width : 600px) and (max-width : 689px) {
    .comment { max-width: 540px; overflow: auto }
    pre { max-width: 400px; }
  }
  @media only screen and (min-width : 690px) and (max-width : 809px) {
    .comment { max-width: 620px; overflow: auto }
    pre { max-width: 460px; }
  }
  @media only screen and (min-width : 810px) and (max-width : 899px) {
    .comment { max-width: 730px; overflow: auto }
    pre { max-width: 540px; }
  }
  @media only screen and (min-width : 900px) and (max-width : 1079px) {
    .comment { max-width: 810px; overflow: auto }
    pre { max-width: 600px; }
  }
  @media only screen and (min-width : 1080px) and (max-width : 1169px) {
    .comment { max-width: 970px; overflow: auto }
    pre { max-width: 720px; }
  }
  @media only screen and (min-width : 1170px) and (max-width : 1259px) {
    .comment { max-width: 1050px; overflow: auto }
    pre { max-width: 780px; }
  }
  @media only screen and (min-width : 1260px) and (max-width : 1349px) {
    .comment { max-width: 1130px; overflow: auto }
    pre { max-width: 840px; }
  }
The interesting bit is, that if I try to load HN on responsive view in developer tools (ctrl+shift+m) and adjust the screen size to 1920x1080, the site displays without any problems, with bigger fonts and saner defaults.

But if I open HN on a regular tab with the same pixel size, fonts get super small.

The problem becomes more annoying, if you use a tiling window manager such as i3. Then you have to open another frame and adjust the size of the window.

Even on regular window managers, it is annoying to have to make the browser window smaller to browse HN.

KhayriRRW
Alternatively, you can also use UserJS to modify the font size and layout of HN on your browser.

~ Khayri R.R. Woulfe

terminalcommand
I am doing this right now, but I think we can solve this issue without needing user styles.

HN looks super sharp and usable on mobile, why not achieve some usability on desktop as well. All that is required is a simple media query for browser windows larger than 1400px in width or using responsive units.

[dead] whatsstolat
Signatures are against HN guidelines. Better to put your name and deets in your bio.
yesenadam
HN works fine for me..like every other website. I suggest the problem is with your setup and not with HN.
terminalcommand
Could you elaborate a bit?

What is your screen resolution? Do you use text scaling?

Do you open your browser in maximized view or do you prefer smaller windows?