This might be some kind of a weird requirement for a piece of art, but I would literally never expect a website to center a div according to the browser window instead of the viewport. It just looks wrong and feels wrong.
That's because they are using a fixed-height container element with an "overflow: scroll" on it, which is needed to get that little grey bar at the bottom to complete the "page of paper on grey background" feel.
Which of course completely ignores that a page of paper can't scroll, but I guess doing it in a way where the content is split over multiple "pages" underneath each other is too complicated for a basic website - and would be even more jarring to the average reader.
I had no idea what this was talking about at first because I had JS blocked, so nothing special seemed to happen when I opened the bookmarks panel. This looks absolutely goofy. I don't know why you'd want the content potentially getting covered by unrelated UI elements.
Screenshots would be helpful, because (you may be surprised to learn that) it is not entirely obvious which mode of behavior is supposed to be "wrong".
Anyway, I wouldn't say it currently behaves nicely (like something I would like to reuse anywhere whatsoever). Tested on Firefox opening Bookmarks on the left. First off, there is this ugly flicker, as browser first renders the "wrong" version, then your JS "fixes" it. Second, there is some concurrency problem, as by opening and closing Bookmarks repeatedly I somehow managed to render both versions: centered to viewport and covered by sidebar.
And, yeah, as others have said, I also think that allowing sidebar to cover your webpage content is absolutely bogus and don't foresee myself wanting this behavior, ever. But that's up to you.
I'm 55 years old. My eyes are not what they used to be and neither are my glasses. I also own a copy of "Usage and Abusage" but I'll pass on that. Click on story link. My laptop renders a page - OK its black text on a white background (thank you but I doubt its a deliberate boon) ...
... why on earth is the offering a "page" ie emulating a printed page? In portrait!
I'll accept that most people are not fixated about grammar, punctuation or basic decency: that's fine.
However a "page" in portrait that looks awful on a landscape screen is unpleasant. You can easily request my viewing parameters and adjust accordingly. It's even worse when you are dispensing advice about www page layouts.
A bit of context, since this is much less serious than it may have sounded:
I use a single browser instance in a tiled window manager, occupying a fixed window directly in front of me, usually with a sidebar open. When a site intentionally centers a fixed-width container, the sidebar leaves that container visibly off the dead center of my screen. I happen to dislike that. This is a personal aesthetic preference for my particular setup, not a claim that viewport centering is generally wrong.
The intended behavior does not remove content or replace responsive layout. The sidebar still narrows the webview and the page reflows normally, the correction only repositions the container that was already meant to be centered, so its center remains in the same physical place. If content ends up covered, offscreen, or stuck in the wrong state, that’s a bug.
I don’t particularly mind the brief movement while toggling a sidebar, since the browsers I use already visibly resize and reflow pages while doing so.
I’m considering reverting the behavior on the blog and keeping it extension only. I’ve also added GIFs to the post showing the intended effect.
What's the substantial difference betweeen "browser added sidebar" and "the browser has allowed height and width of the window to be resized since the dawn of the web"?
Am I the only person that loathes sidebars in browsers? Maybe it's because I've been using a browser since 1996, but my brain is deeply set in the idea that the space below the chrome 110% belongs to user space.
I've tried a few browsers with vertical tabs, and my brain keeps seeing them as part of the page itself. It's a very distracting and uncomfortable experience.
hah the pointer trick is clever. tbh ive been living with everything looking 5px off for years and just... accepted it. does this work with vertical tabs in firefox?
I'm confused about why this website is using less than half of my window for content. I understand wanting some margins, but a third of my window on each side seems pretty egregious. At least it's centered though!
Do you want them to add Subway Surfers in the sidebars? What would they display if there's nothing to display? This is such a weird criticism, do you think you want the text to use the full width? It would just be hard to read because of long lines, shorter lines are more comfortable
It's not like unused space results in some kind of waste, this is not paper, blank space is okay
Nah, I'd rather not. I want sites to center within the viewport, not the browser window. I keep my tabs in a vertical sidebar, and I treat the viewport as "the browser". I want things that should be centered to be centered within that viewport.
One of my favorite interview questions was asking how many ways a developer can center a DIV or any block element in a container/browser with pre-defined height, or responsive heights. I have special soft corner heart for people who said TABLES.
Funnily I can't reproduce the effect at all. I am using Firefox and with sidebar the content of the page centers on the remaining viewport width, like any other site does. I have also tested with Edge, same result. With Edge's auto collapse (i.e. non sticky vertical tabs), I get the described effect, but again this is like any other site. I was actually expecting quite bad results in Edge because it has some sidebars on the right and I thought this page compensates in the wrong direction then. Don't have Chrome installed to see if that does anything differently.
Note I like the default behavior of browsers to center on the viewport as opposed to the window treating sidebars as overlays over the page. Whenever pages do that with their own gadgets I hate it, because they often don't move their content out of the way and it makes it unreadable unless scrolled out of the range of these gadgets, which often isn't possible at all. And even when it is, it effectively reduces the total usable screen to a fraction.
Whenever I'm bothered enough (happens mostly on mobile), I use a kill sticky bookmarklet to fix that.
The demo page doesn't work as described in Firefox when I open my bookmarks or history sidebar. It displays a correction offset, but Firefox valiantly defeats this evil hack and makes sure that the box is still at the center of the viewport as the viewport shrinks. It doesn't work in Chromium either when I open devtools as a sidebar. Correction resets to "move pointer" when I do.
I could appreciate the hack from an engineering perspective if it actually worked, but from a user perspective, this is just another example of overambitious anti-designers going out of their way to replace whatever simple, sane and predictable defaults a browser provides out of the box with something incredibly dumb. Browsing has become a rather paranoid activity of constantly second guessing what bespoke bullshit the website authors might have attached to operations that otherwise have previously established sane behaviors provided by the browser by default.
41 comments
[ 0.28 ms ] story [ 8.7 ms ] threadWhich of course completely ignores that a page of paper can't scroll, but I guess doing it in a way where the content is split over multiple "pages" underneath each other is too complicated for a basic website - and would be even more jarring to the average reader.
Anyway, I wouldn't say it currently behaves nicely (like something I would like to reuse anywhere whatsoever). Tested on Firefox opening Bookmarks on the left. First off, there is this ugly flicker, as browser first renders the "wrong" version, then your JS "fixes" it. Second, there is some concurrency problem, as by opening and closing Bookmarks repeatedly I somehow managed to render both versions: centered to viewport and covered by sidebar.
And, yeah, as others have said, I also think that allowing sidebar to cover your webpage content is absolutely bogus and don't foresee myself wanting this behavior, ever. But that's up to you.
1) the sidebar covers the content, while the content has blank space to the right, or
2) the content moves off the right edge of the screen, leaving a large blank space to its left.
Both of these are wrong. If I have a sidebar open, the site is now narrower, stop trying to be clever.
My immediate reaction to this is why is the browser giving the site this information, and could we stop.
... why on earth is the offering a "page" ie emulating a printed page? In portrait!
I'll accept that most people are not fixated about grammar, punctuation or basic decency: that's fine.
However a "page" in portrait that looks awful on a landscape screen is unpleasant. You can easily request my viewing parameters and adjust accordingly. It's even worse when you are dispensing advice about www page layouts.
I use a single browser instance in a tiled window manager, occupying a fixed window directly in front of me, usually with a sidebar open. When a site intentionally centers a fixed-width container, the sidebar leaves that container visibly off the dead center of my screen. I happen to dislike that. This is a personal aesthetic preference for my particular setup, not a claim that viewport centering is generally wrong.
The intended behavior does not remove content or replace responsive layout. The sidebar still narrows the webview and the page reflows normally, the correction only repositions the container that was already meant to be centered, so its center remains in the same physical place. If content ends up covered, offscreen, or stuck in the wrong state, that’s a bug.
I don’t particularly mind the brief movement while toggling a sidebar, since the browsers I use already visibly resize and reflow pages while doing so.
I’m considering reverting the behavior on the blog and keeping it extension only. I’ve also added GIFs to the post showing the intended effect.
I've tried a few browsers with vertical tabs, and my brain keeps seeing them as part of the page itself. It's a very distracting and uncomfortable experience.
It's not like unused space results in some kind of waste, this is not paper, blank space is okay
Note I like the default behavior of browsers to center on the viewport as opposed to the window treating sidebars as overlays over the page. Whenever pages do that with their own gadgets I hate it, because they often don't move their content out of the way and it makes it unreadable unless scrolled out of the range of these gadgets, which often isn't possible at all. And even when it is, it effectively reduces the total usable screen to a fraction.
Whenever I'm bothered enough (happens mostly on mobile), I use a kill sticky bookmarklet to fix that.
I could appreciate the hack from an engineering perspective if it actually worked, but from a user perspective, this is just another example of overambitious anti-designers going out of their way to replace whatever simple, sane and predictable defaults a browser provides out of the box with something incredibly dumb. Browsing has become a rather paranoid activity of constantly second guessing what bespoke bullshit the website authors might have attached to operations that otherwise have previously established sane behaviors provided by the browser by default.