Hacker News Reader

Comment by munificent | Hacker News Reader

This seems to result in a large number of cases where the visual experience is pointless. The line separating the previous and next page is tiny and easy to miss, and I don't see the use in two torn half-pages on screen.

I agree that smooth scrolling long text is hard to read and trips up line scanning, but this UX seems be like playing an cruel game where I have to drag just enough to scroll a whole page. Any more or less and I get a torn page that's even harder to read than normal scrolling.

I have an alternate solution to this problem: just hit space or page down when you're reading a long web page. It scrolls a whole page, with just enough animation to help you track where you are.

View on HN

Your alternate solution gets annoying if the page has a header overlaying the text. Like Google+ does. Then you scroll a page, and have to scroll back a little.

That said, this solution will also break in that situation. But it will break worse since there will be no way to get the text at the top to scroll into view.

Good news is that the issue is recognized by the Mozilla team at the very least:

>Pages with position:fixed banners/headers are all the rage these days. But when I try to read content inside one of these pages and hit Page Down or Spacebar, firefox calculates the page length relative to the whole browser window, not just the part visible underneath the position:fixed header. So it scrolls too much, and the first few lines of the next page end up hidden

>Status: RESOLVED FIXED

https://bugzilla.mozilla.org/show_bug.cgi?id=780345

That's great news. Do you know what release this will land in?

Edit: Oops, I guess it's already there. I couldn't think of a site with an appropriately sized fixed header to test it, but Google+ is such a site and pagedown works perfectly there. Nice.

I just tested it on: http://www.raspberrypi.org/phpBB3/faq.php?sid=3eaf67c60d15ce...

Works for me on FF17. Does not work on Safari or Chrome.

BusinessWeek.com articles don't totally work. They seem to have an extra pop with their header. So 2 levels of BS. Can't totally fault the browser there.

Techcrunch.com works perfectly fine too.

So yes, fixed in FF17 and also seen to work on FF18.

It says it landed in FF17, which I think should mean it's there already?

What about the bug where Edit > Find scrolls the page so that the hit is at the top of the window, but there's a fixed element hiding the hit?

That's why I utterly loath the stupid new trend of having fixed headers. They mess up my reading experience and honestly I thought we all ditched iframes a decade ago because even then we realized that putting frames everywhere isn't usable.

They're especially annoying on devices with small vertical resolutions, like netbooks.

I wish my browser had a setting called "disable scroll events and position: fixed"..

You could write a bookmarklet for that.

I often use the "page style: no style" in firefox setting in firefox in the view menu. That gets rid of fixed positions and a lot of other annoyances.

I already did:

    javascript:for(var a=document.querySelectorAll('*'),i=0,e; e=a[i]; i++) if (e.currentStyle.position == 'fixed') e.style.position = 'static'; void(0)

I nicknamed the bookmark "fix", so I can just type "fix" in the address bar to fix those pesky fixed elements.

It works perfectly. Well, I vaguely recall there was one site, where it didn't work, don't remember which one (nor cared to figure out why it didn't). At first I was worried that looping over all elements on a page would be too inefficient, but JS is so fast nowadays, there's no noticeable delay. Also, there's no getElementsByStyle method, so I'm not sure how to even go about optimizing that loop.

> Your alternate solution gets annoying if the page has a header overlaying the text.

So you're saying the working solution doesn't work on sites with completely broken UIs such as Google+? What a surprise.

That's like criticizing middle-click-to-open-in-new-tab because it doesn't work on broken sites implementing fake links via javascript, without actual links backing them.

How is that a broken UI? Should they use frames instead?

No, they should allow the header to scroll with the rest of the page.

It's not a broken UI of Google, it's a browser related issue, wrong calculations of page height.

Page height is calculated exactly the same way in all of the major browsers, and was calculated that way when Google+ created their interface. The fact that browsers are working around it to make a usability fix to benefit web designers does not mean that the fault does not belong to the web designers who intentionally built broken interfaces.

If they want a frame, they should've just used a <frameset>.

> So you're saying the working solution doesn't work on sites with completely broken UIs such as Google+? What a surprise.

You're saying the UI on Google+ is broken because the header stays on the top? I love that feature - more sites should implement it.

> You're saying the UI on Google+ is broken because the header stays on the top?

1. I'm saying the UI on Google+ is broken because the way it's implemented (and it's not the sole offender) means page-wise scrolling as described by OP does not work anymore.

2. But your suggestion that G+'s worthless header has no reason to stay fixed and eat up 20~30% of the vertical space is also correct.

Using space to scroll on G+ works great for me. Even better, j & k - though I don't expect most people to use their keyboard at all to scroll.

What browser are you using? Others have mentioned Firefox has updated to address the issue, but Chrome will scroll too far (full window height) when you hit space, which makes using G+ on other fixed header sites super annoying for us keyboard scrollers.

I guess the situation becomes "good enough" when all the modern browsers include a hack to make scrolling work properly, but it's certainly not ideal. If anyone ever decides to write another browser they'll have to deal with another undocumented requirement, and there are funny cases to consider like transparent fixed headers.

Funny how frames are avoided for historical reasons when they often seem like the ideal solution. Remember when Twitter expanded conversations in a fixed box on the right of the screen? Should have used frames. Fixed header? Same deal.

If frames and iframes had been fixed instead of being ridiculed and discarded the web stack would be a better place.

Blogs wouldn't regularly collapse under load because blog posts could actually be static html pages instead of being dynamically generated just so we can slap the same header and linkroll on each one.

We wouldn't need new html5 tags to tell screen readers and crawlers where's the content and what's navigational elements because they would be in separate (i)frames.

Ajax's use could be actually reserved for interactive web applications instead of ugly optimizations like loading the comments separate from the article so the article itself loads faster.

I've been telling this to people for years, at my street corner, with my megaphone. But nobody is listening! It's a conspiracy!!!

Ah, yeah I was looking in Firefox. Still I generally navigate G+ using j and k which drops a single post at a time.

I didn't know about the j & k keys in G+. Just tried it and it is a pretty good substitute for the space, though I do hope that gets fixed.

Google+ sucks in pretty much every single way possible.

I've noticed this problem with using the spacebar. But a top and bottom header will never add up to more than 1/3 of the vertical height of the browser window. Should be poss to build a javascript overlaid scroller button than only scrolls pages by 2/3 of window height at a time, in either direction?

It's not the solution that's annoying here. Those overlying page headers that break space/pagedown need to die a horrible horrible death, and possibly their creators with them.

While I didn't like the page divider in this demo, I also don't like having to see the screen whir by when you hit the space bar. Having the page flash past in the same direction you are trying to track with your eyes is not comfortable for me. I did really like the narrow width of the text here though.

I have noticed that reading on the kindle app on my phone is extremely comfortable, and it basically incorporates the things I just mentioned -- narrow column width and page turns that aren't disorienting. I know people hate pagination on the internet because it is associated with slow page loads, but fast pagination would be awesome.

> this UX seems be like playing an cruel game where I have to drag just enough to scroll a whole page

just use the mousewheel / trackpad scoll area / two finger trackpad scroll gesture or swipe your finger on the touchscreen to scroll as much as you want at a time! it seems quite natural. I always though paging things is a very very bad UI pattern, but this "fluid paging" works great for plain text ...though nothing beats good ol' scrolling for a media rich documents or something with a fancier layout...

Fair, but don't conflate this implementation with the idea (e.g. the line separating the next page and previous page). You're "alternate solution" is great; did you try it on this page? Works fine with page down.

One use for the two torn half-pages is that you can still see the preceding text for reference. I think that's the main reason for it. Otherwise, use page down or the arrows.

Overall I feel its a better scrolling. But, the page divider is an irritant more when the current page sentence and next page sentence are overlapping. I think he can try out soem blending operation to avoid this. Below page divider he can slightly blur few sentences and blend with next pages while you keep moving the divider down. Author can try out and check if it is appealing.

I could almost agree, except I just tried the auto scroll option (space key to toggle and + / - to modify speed), it might be very subjective, but this helped me read this start to end smoothly, I kind of like it, can't explain why, it is much better than auto scrolling the "old way" where the text moves. Somehow he made it so the speed was just right for me, but I'm sure many will find it annoying.

EDIT: tried it on some other articles, chose some boring ones just for the contrast, it might be just me, but the auto scroll option is going to be the only way I read articles in the near future, I actually read them faster, and more likely to reach to the end of it (based on a very short experiment though). It's also a great distraction killer (ads, banners, related stories) Nice.

Not to mention that his entire thesis ("scrolling is the true problem!1! OMG!") is unsupported and rather dubious...

All those other things he mentions are also problems, despite his proclamation to the contrary.

Even if he somehow has managed to "fix" the scrolling "problem" (and judging from the comments on this story, he hasn't even come close), reading stuff on on a computer will still be mostly the same (for better or for worse) experience.

Page down doesn't work as soon as you are less than a screen away from the bottom of the page.

You scroll to the bottom and automatically start reading from the top, but your next line is somewhere in the middle. A faint line where the top of the page previously was would help here.

The problem I am having with this scrolling scheme is that when I forget to scroll I find myself reading what I already read (and getting a few words into it before noticing). I can't forget to scroll in the normal scheme since if I don't scroll there is nothing more to read.

Yea, it seems to be confusing and distracting. Maybe it can have some sort of fading effect on the older text to improve readability and awareness as a reader scrolls.

An alternate solution is to change the background for the lower order page. I do something similar for my terminal sessions. It helps me keep "prod1", "prod2", and "test" separate.

I tried this. It doesn't work as well. Same with making the line thicker or putting a margin above and below it.

The code's open source if you want to fiddle with it: https://github.com/rdwallis/MagicScrollWebReader

There's no space or page down on my tablet, and i do most of my web reading on a tablet.

Reply on news.ycombinator.com