Ask HN: What do websites look like on super ultra wide screens? | Hacker News Reader

Ask HN: What do websites look like on super ultra wide screens?

11 pointsdustinmoris16 comments

I am curious what a regular website looks like on ultra wide screens.

Do they just stretch all the way or at which max width do websites stop? Are most websites centred or left aligned when cropped?

Most important question I have, if you are an ultra wide screen owner, what website behaviour do you prefer most?

If owners of ultra wide screens could post some screenshots of some websites that would be awesome. I'm interested to see what Twitter looks like, StackOverflow, the BBC website, Reddit and even HackerNews.

View on HN

If you're curious, it's feasible to test various sites using headless Chrome.

See here for general details: https://developers.google.com/web/updates/2017/04/headless-c...

I'm away from my computer, so cannot readily test it, but I believe you should be able to do this with commands of this form:

chrome --headless --disable-gpu --screenshot --window-size=3440,1440 https://www.bbc.co.uk/news

This will be website style sheet dependent.

If the website's style sheets impose a maximum width, the width will be constrained. If not, they will likely flow to the edges.

But, do note that it is possible to run your browser with a window width less than the width of the monitor (i.e. not maximized) if "flow to the edges" is also too wide.

My browser windows are all about 55% of the width of my 16:10 monitor, and I seldom ever maximize the browser window. And when I do maximize it, most often for map websites, when I'm done I return the window to its normal about 55% width.

Even on typical 16:9 screens it's rare that I would maximize a browser window. And on my ultrawide, usually I'll have browser windows at 30%-50% of the screen width. So websites look normal - I'm not looking for any special "ultrawide" behavior from the site. For me the ultrawide replaced a multi-monitor setup so I am generally looking to use the extra space for multitasking, not simply for making everything huge.

Use this in Chrome to easily preview: https://developer.chrome.com/docs/devtools/device-mode/

It's what web developers generally use. I'd guess most sites stop their main content expanding beyond a standard desktop width and center the content. I've never worked with a web designer or client who has specified what should happen on very large screen widths, it's just not on their radar.

I am ultrawide monitor owner but use it in vertical mode almost always.

>Do they just stretch all the way or at which max width do websites stop? Are most websites centred or left aligned when cropped? They have tiny amount of content centered and huge spaces of nothing on right and left. Some Russian websites has a fashion called "rubber layout" so sometimes text might be streched across the width which makes the content very unreadable. BTW using browser on horisontal ultrawide fullscreen is kind of wrong, IMO better to place several different windows across the width. So, if using several different windows, rubber is better, but if using browser in fullscreen - tiny amount of centered content might be better.

> If owners of ultra wide screens could post some screenshots of some websites that would be awesome. I'm interested to see what Twitter looks like, StackOverflow, the BBC website, Reddit and even HackerNews. Ping me after several days if nobody will answer. I can switch to horisontal, but it takes a little of time to do that screenshots and to reswitch.

What size of ultrawide are you using? I've got a 49" curved Samsung that I occasionally turn to portrait mode, but it is mostly for novelty rather than practicality. Now the 30" regular monitors? Definitely portrait mode.

29" 2560*1080, I use it on my work where vertical mode works much better for me for reading some long lists.

Most sites set a max width and generally center the content. Some sites also have certain “full bleed” elements which stretch outside the main container but typically similarly have a max width for the contents of those elements.

My site does all of this, except it leans slightly off-center to the left on viewports larger than ~a phone. Tested on my 4k@1x display, though I very rarely extend a browser window beyond the width of my laptop screen. Edit to add: less common but my site also scales the text size up on larger viewports to target a ~60 character column width. I know the readability benefits are debatable but I personally prefer shorter line widths and know a lot of other people do too.

Some very creative sites make use of greater horizontal space by eg switching to a more horizontally flowing layout (and I’ve considered this for my site), but I think it’s rare because it’s such an unusual setup that it’s only worth the effort for very specific things.

I have a 49" ultrawide. Most websites simply center themselves in the window. Occasionally they will position on the left. And very occasionally, but most annoying of all, they will try to take the entire width of the monitor, or adjust their font and image sizing to fit the width, but not consider the height. Some websites will put UI controls on left and right, and content center, which sucks when you need to move the mouse four feet to click on something.

For the most part I specifically size the browser window to how I want it to be. On Windows there are programs that let me hotkey size and position of windows, which makes it easy to tile three browser windows across the desktop. Unfortunately nothing quite like that exists for macOS or Linux at this time that both understands the hotkey, how to apply it to a window, and will consistently apply the change on the 49" monitor but not on the laptop screen.

If you haven't seen it already, take a look at https://github.com/rxhanson/Rectangle for an OSX window utility. I've been having great success with it. Some placements may take a couple of shortcuts, but this is easy to memorise, for example "switch monitor" "second half"

I’ve been using PopOS recently. There’s a tiling window manager built in that seems to have a bunch of functionality (resizing, moving to diff frame etc).

They’re already mapped to certain hot keys but i imagine you can configure it to your liking.

Zoom out a bunch of times and then size your window to the ratio you want. If you open the developer console in chrome it will show the resolution of your window.

Yes, this is the answer. Zoom out in the browser to 50% and you'll see how a site looks for a user with twice the number of pixels across versus you have.

In my opinion, the most important thing to keep in mind is to always have an acceptable number of characters per line (~40-90). Wikipedia gets this wrong on the high side for hi-res monitors.

I usually have my browser taking up half of screen when I’m using a ultra wide screen

Awful.. Like a page from a magazine lying on the sidewalk.

They usually do not stretch. So lots of white space on both sides.

Reply on news.ycombinator.com