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

(blog.stephaniestimac.com)

60 points | by mooreds 2 days ago

7 comments

  • socalgal2 1 day 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

    • dspillett 19 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.

    • 9dev 1 day 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.
    • noir_lord 15 hours ago
      Feels like another force desktop mode waiting to happen.

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

    • onion2k 1 day 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.

    • saltypixel 19 hours ago
      [dead]
  • ChiperSoft 1 day ago
    And of course, Safari does not yet support this as of the tech previews.

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

    • miguel-muniz 1 day ago
      Originally Microsoft laid the groundwork for their Surface Duo device, then it was later adapted into Chrome.
  • meerita 15 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.
  • elicash 18 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?
    • kamarg 8 hours ago
      The seam doesn't really make a difference for clicking. It's really at the point of just being a large phone screen. It's certainly easier than interacting with elements on the edge of the screen.
    • qingcharles 8 hours ago
      It is if you hold it half-open like a book -- you can't get your finger into the middle. Apple has added some sort of support for this scenario in iOS that they were demoing for the Duo.
  • paradox460 12 hours ago
    Was hoping to test the demo page she talks about on my pixel fold. 404s
  • t1234s 15 hours ago
    native CSS is looking more and more like a programming language than a simple configuration file
    • crooked-v 5 hours ago
      General-purpose layout engines are Turing complete.
  • DarmokTanagra 1 day ago
    Apple Duo screen UX assumes the entire planet is right handed.

    The new Duo exhibits Apple Mouse scale UX oversights.

    • elicash 18 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.
    • sajithdilshan 22 hours ago
      About 85-90% of people are right handed and that’s a good enough majority to build a product.
      • alpaca128 18 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.

        • sajithdilshan 11 hours ago
          It’s not only the UI when it comes iPhone Duo. It’s the hardware as well. Currently it folds open to left and because of that’s it’s convenient for a right handed person. You hold the phone on your right hand and use the left to fold open.

          To support a left handed person it should fold open to the right, also that way it’s a bit weird, although I’m curious to see how the animations would work for notes apps for Arabic language UIs where text is written from right to left.

          • qingcharles 8 hours ago
            That's interesting. It's not just left-handed people, you're right. It's whole countries with LtR or right-bound standard for book opening, e.g. Middle-East, Asia etc.
      • DarmokTanagra 19 hours ago
        [dead]