Guidelines/standard on scaling a page based on window size

[pamelahu]

The Web Platform team has been building out the Dynamic Dashboard and wanted to know if there's a standard for scaling a page based on window size? For our needs, we're mostly concerned with width.

We have this page:

And when the window size increase, we can either expand the content within the tiles/cards:

OR when the window size increases, we can set a max width for the tile/cards and expand the left and right margins:

We want to do the 2nd option but wanted to check in if Paste has guidelines for what Console pages should adhere to for various screen sizes.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Most components in Paste are set to 100% width so they can responsively fit inside any container. This gives developers and designers the freedom to use components in a range of UIs without strange behaviors. It is currently up to teams to figure out what the best design and widths to use in their apps, for their specific responsive breakpoints. However, there is an acknowledgment of the need for high-level guidance for layouts and spacing, which is planned to be addressed in 2023 as part of the work on One Twilio.

For your specific need regarding setting a max width for tiles/cards and expanding the left and right margins as the window size increases, while Paste does not provide explicit guidelines for scaling page content based on window size, the approach aligns with the flexibility Paste aims to offer. You are encouraged to design your application in a way that best suits your and your users' needs, using the responsive and fluid nature of Paste components to achieve your desired layout.

For more detailed and personalized feedback, consider signing up for Paste's office hours.

For more information, you can refer to the Paste documentation: https://paste.twilio.design

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Grid max width for cards and inputs (updated: 11/30/2022, similarity score: 86%)
• Grid max width for cards and inputs - Answer (updated: 11/30/2022, similarity score: 85%)
• Sizing for Masthead and Sidebar (updated: 06/22/2022, similarity score: 85%)

[roxanagomez]

Hi @pamelahu thank you for sharing,

Most pages get the max-width, center-aligned content layout (your third image). We have some general guidelines for breakpoints here, since this not a very complex composition, I believe those guidelines will work well. But I would also encourage you to double check with other Console designers for consistency.