Designing for Dual Screen and Foldable Devices with CSS (2023)

Posted by mooreds 2 days ago

Counter55Comment15OpenOriginal

Comments

Comment by paradox460 6 minutes ago

Was hoping to test the demo page she talks about on my pixel fold. 404s

Comment by socalgal2 14 hours ago

I'm not sure I'm convinced.

If splitting the UI is useful then it feels like you should just let me choose to split it even on a single display rather than deciding for me. My laptop has a display aspect similar to a folding phone when unfolded, so if splitting each half of the display into two panes is useful it should be useful regardless of device.

Personally if I bought a folding phone, I'm probably buying it specifically because I want a bigger display for existing content. I don't want your app to decide for me, to treat it like 2 displays. Imagine in vi or emacs auto split panes based on your aspect as shown in the article. No please! Let me choose when I want it split

Comment by dspillett 7 hours ago

> My laptop has a display aspect similar to a folding phone when unfolded, so if splitting each half of the display into two panes is useful it should be useful regardless

There is a key difference between your laptop and your phone, in that you are usually holding your phone. I imagine UX tweeks for wide devices in the hand that could be useful, but mainly for games and such. Keeping controls to the two sides for if held in both hangs, rather than at the bottom for a more standard portrait screen, and so forth, but these things have already been done.

Other changes for the screen getting wider I agree would be best done for all devices. If you don't want you main layout to go beyond a certain width, maybe jump to two columns, or move footnotes up to the otherwise empty space beside the text that refers to them, or images that would be under a paragraph to its side, …

Just letting the user choose would be my preference. I have a large main monitor (32", with a 24" 1080x1920 portrait screen to the side) given how close my face is to it much of the time, and while it is sometimes (two document pages side-by-side, games, videos) used as one large screen most of the time I use it as a flexible multi-screen (50/50 for two apps, or 33/66 or 66/33, or occasionally split three ways, sometimes split all over the shop like a Mondrian painting for a full-screen terminal session). I feel it would be nice if a phone UX allowed at least two apps side-by-side, or single apps allowed me to split views that way sometumes and sometimes not.

Comment by 9dev 12 hours ago

A configurable setting might be a good idea, but I definitely see the appeal of being able to make use of a split display for various use cases - the PowerPoint presenter mode example is a good one, Nintendo DS style split games might be another, and I’m sure there are more scenarios where it would be neat to have control over and knowledge of the segments available.

Comment by noir_lord 3 hours ago

Feels like another force desktop mode waiting to happen.

I usually want the desktop site and zoom that the mobile specific version.

Comment by onion2k 13 hours ago

Let me choose when I want it split

It would be good if there was an OS level setting for something like prefer-unified-display in the same way we have things like prefer-reduced-motion. This should be a choice.

Comment by saltypixel 7 hours ago

[dead]

Comment by meerita 3 hours ago

These CSS layout techniques remind me of others in the past where you put a lot of effort and barely 2% of your userbase will use it.

Comment by elicash 5 hours ago

I haven't used a foldable. Is it hard to click on buttons, for example, that happened to be place down the seam? Or has that type of thing been long solved?

Comment by ChiperSoft 15 hours ago

And of course, Safari does not yet support this as of the tech previews.

https://caniuse.com/?search=horizontal-viewport-segments

Comment by miguel-muniz 12 hours ago

Originally Microsoft laid the groundwork for their Surface Duo device, then it was later adapted into Chrome.

Comment by t1234s 2 hours ago

native CSS is looking more and more like a programming language than a simple configuration file

Comment by DarmokTanagra 13 hours ago

Apple Duo screen UX assumes the entire planet is right handed.

The new Duo exhibits Apple Mouse scale UX oversights.

Comment by elicash 5 hours ago

The product isn't out yet. I imagine there will be a setting for dock on left or right, if that's what you're referencing.

Comment by DarmokTanagra 5 hours ago

[dead]

Comment by sajithdilshan 10 hours ago

About 85-90% of people are right handed and that’s a good enough majority to build a product.

Comment by alpaca128 6 hours ago

Designing a UI for left-handed people too is cheaper than losing out on 10-15% of your target audience.

It's sad no one bothered to copy ideas from Windows Phone 8, its UI had a lot of thought put into it and was exactly as efficient to use for left-handed users.

Comment by DarmokTanagra 6 hours ago

[dead]