Dual-screen devices are entering the market regularly. Microsoft recently introduced the Surface Duo dual-screen device and infrastructure for software developers to support dual-screen devices in their applications. Microsoft (and many others!) works hard to implement, standardize, and document an ecosystem that takes full advantage of the dual-screen/”split-screen”/”foldable” application design. The infrastructure includes native applications on dual-screen devices and new CSS syntax and APIs available in web browsers right now (albeit in canary builds)!
After successfully going through Microsoft’s documentation for Building dual-screen web experiences on the desktop on a Windows 10 machine, as a macOS user, I figured I’d try out the same steps on my Mac. (Spoilers: It worked!). It’s essential to call out that these specifications are still very early draft proposals and implementations, so they are still a bit in flux. However, the basic features and strategies look fairly settled at this point.
Getting set up on macOS (or Windows)
The steps from Microsoft, provided in the link above, are straightforward and should be the same for all of you macOS users reading this. At a high level, they are:
- Install Microsoft Edge Canary
- For those Mac folks who haven’t been keeping up, Microsoft has completely rebuilt their Edge browser on top of Chromium, which also means it is available for macOS! Not only that, between the Chromium team and the Edge team, it looks like they’re working very hard to keep functional parity between their Windows version(s) and their macOS version(s) (including experimental features like the one’s we’re demoing here!).
- Enable the Experimental Web Platform features flag (load edge://flags/ in your browser, similar to what you’d do in Chrome).
- From Dev Tools, open up the Settings (gear icon), go to Experiments, and enable Emulation: Support Dual Screen Mode.
Congrats! Your Surface Duo emulator can now toggle dual screen mode (folding icon) to demonstrate dual-screen vs. single screen presentation. You can also rotate the emulator’s orientation to exhibit vertical vs. horizontal split-screen.
There are several demos available for you to experience. Here are a few resources beyond the samples Microsoft lists:
- Simple examples showing the box model and available environment variables – (source code)
- Fancier examples like a photo gallery, newsreader, and two games – (source code)
Here’s an example of one of the fancier dual-screen examples in action:
Bonus – Does it work in Chrome?
I tried the same steps as above for Chrome Canary, tweaked for Chrome (going to “chrome://flags” instead of “edge://flags”). All of the simple examples just worked! From what I can tell, the only reason the “fancier examples” didn’t work was that the codebase for the demo apps, polyfills, and other elements needs to be updated based on spec changes and Edge-specific assumptions, not because they “can’t work.” In other words, it looks like there are already two browsers that can support dual-screen app design right now!
Going Forward
Time permitting, I’d like to do some follow-ups on dual-screen app development. I work in a predominantly React shop, and it would be nice to write up a simple example demoing dual-screen React app design. I can see this working well in conjunction with Portals. Similarly, proving out that Microsoft’s React Native documentation for dual-screen will work for macOS seems worthwhile. I’m hoping to help with some of the issues mentioned above in the open-source documentation and demos (it takes a village).
Finally, while dual-screen is currently about “split-screen devices” like the Surface Duo, it doesn’t seem outside of the realm of possibilities that desktop operating systems and desktop application developers—where multiple screens are standard—will want to adopt and support these concepts. I can certainly envision a future where desktop apps move away from the “multiple disparate windows” strategy and instead into an immersive, multi-screen design, particularly apps that would benefit from a “full multi-screen mode.”
Want more on this topic?
A few weeks back, we spoke on React Native for dual-screen mobile devices with Craig Dunn, Principal Program Manager for Cross-platform mobile devices for the Surface Duo Development Experience team, and Keil Aloia, Full Stack Platform Developer on the DSX team. They’ve put together a complete developer experience with emulators, libraries, documentation, and examples to help developers provide dual-screen mode functionality in their applications. The recording of the interview with demonstrations of Surface Duo and applications optimized for the device is available on YouTube.
