{"id":2801,"date":"2022-10-06T10:59:23","date_gmt":"2022-10-06T17:59:23","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=2801"},"modified":"2022-10-06T10:59:23","modified_gmt":"2022-10-06T17:59:23","slug":"design-foldable-large-screens","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/design-foldable-large-screens\/","title":{"rendered":"Designing for foldable and large screens"},"content":{"rendered":"

\n Hello app designers!\n<\/p>\n

\n Today we are going to talk about designing for foldable and large screens. We\u2019ve been practicing responsive web design for a long time – let’s use those concepts to optimze your mobile app for different platforms and devices. Mobile apps can use adaptive designs to deliver a consistent app experience. In today\u2019s blog, we will be talking about the design recommendations when adapting your app to foldable and large screens.\n<\/p>\n

Design for unique postures<\/h2>\n

Posture overview<\/h3>\n

\n The difference between foldable and large screens with regular mobile devices is the diversity of postures. Postures here are the screen configurations to foldables. We can separate different postures using modes and orientations.\n<\/p>\n

\n \"3D\n<\/p>\n

Dual-screen UX pattern and example<\/h3>\n

\n Postures using a single screen have similar proportions to a general mobile phone. However, when using double screens or spanning mode. We have several canonical UX patterns for apps to adapt to dual screens.\n<\/p>\n

\n \"Five\n<\/p>\n

\n Depending on the use cases, an app usually can be some combination of a couple of these UX patterns. Take our Surface Duo Experience App as an example here.\n<\/p>\n

\n \"Five\n<\/p>\n

\n In our design workshops with 3-rd party apps, we saw a high percentage of them that are quite suitable for the list-detail pattern. In this pattern, the next frame in the navigation flow can be placed on the other screen:\n<\/p>\n

\n \"Stylized\n<\/p>\n

Consider ergonomics in spanning modes<\/h2>\n

\n When placing or choosing navigation components for spanning modes, it is best to also consider reachability while referencing the existing mobile app and tablet app design. For foldable devices, main navigation components should be placed closer to the sides or lower edge:\n<\/p>\n

\n \"Two\n<\/p>\n

Components that need attention<\/h2>\n

Bottom navigation or navigation rail<\/h3>\n

\n In most cases, optimizing for foldable devices can build on tablet design principles. Depending on app navigation and information design, you can choose either bottom navigation or navigation rail. Be cautious if you plan to span the bottom navigation component:\n<\/p>\n

\n \"Two\n<\/p>\n

Dialog box<\/h3>\n

\n Dialog boxes should be placed on users\u2019 primary hand side. Surface Duo has a handiness setting which users can set to right-hand or left-hand. Correct and incorrect placement is shown here:\n<\/p>\n

\n \"Two\n<\/p>\n

Resources and feedback<\/h2>\n

\n You can find more information both design and development on optimizing your app for Surface Duo and foldable devices on our Learn site: Introduction to dual-screen devices<\/a> and Design Kit<\/a>. If you have any specific cases would like to discuss, please reach out to us on Tech Community<\/a> or find us on Twitter @surfaceduodev<\/a>.\n<\/p>\n

\n You can also live chat with us on Twitch<\/a> this Friday, on October 7th at 11am PST, where we will share more insights on designing for foldable and large screens!<\/p>\n","protected":false},"excerpt":{"rendered":"

Hello app designers! Today we are going to talk about designing for foldable and large screens. We\u2019ve been practicing responsive web design for a long time – let’s use those concepts to optimze your mobile app for different platforms and devices. Mobile apps can use adaptive designs to deliver a consistent app experience. In today\u2019s […]<\/p>\n","protected":false},"author":100584,"featured_media":2806,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[710],"tags":[717,46,694],"class_list":["post-2801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-design","tag-foldable","tag-surface-duo","tag-user-experience"],"acf":[],"blog_post_summary":"

Hello app designers! Today we are going to talk about designing for foldable and large screens. We\u2019ve been practicing responsive web design for a long time – let’s use those concepts to optimze your mobile app for different platforms and devices. Mobile apps can use adaptive designs to deliver a consistent app experience. In today\u2019s […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/100584"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=2801"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2801\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/2806"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=2801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=2801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=2801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}