Skip to content

Latest commit

 

History

History
126 lines (93 loc) · 4.48 KB

design-patterns-page-responsive-design.md

File metadata and controls

126 lines (93 loc) · 4.48 KB
Raw

Responsive design

Here are some guidelines for making your experience look good at all resolutions.

Last updated Mar 2021 (see change logs)

Context

When we say responsive design, it’s shorthand for an Azure layout that responds dynamically to different browser window sizes or thresholds.

Template blades allow extensions to define their design with almost all of the same flexibility and responsiveness of a traditional website. We do NOT mean “responsiveness” as it relates to mobile devices. Azure remains a rich desktop experience and is still optimized for use on laptop screens and monitors.

Problem

Without the proper settings in place, content will stretch infinitely on large screens.

Solution

There are a few quick fixes you can make to set minimum and maximum widths for your UI elements.

Also known as

  • Min width
  • Max width

Examples

Example images

Example uses

Use when

All Azure experiences should should consider responsive design with set minimum and maximum content widths.

Anatomy

Behavior

Here are the minumum and maximum widths for common portal components.

Text boxes

Min width: 75px Max width: 265px

Dropdowns and combo boxes

Min width: 75px Max width: 265px

Lines of text (Not in a control)

Max width: 700px

Editable grid text boxes

Min width: 80px Max width: 265px

Entire page

Max width: 700px

Success critera

  • Blades look and feel professional regardless of screen resolution
  • Content adapts to make use of the space available to full screen blades on large screens
  • Functions well at common laptop resolutions (including Retina-type screens that run at 200% magnification by default)
  • Does not allow content to stretch infinitely on large screens.

Do

-Test your implementation at multiple window sizes and blade configurations. Make sure you've checked both min and max column widths -For dopdowns, make sure list items aren’t wider than the text field. If an item's too long, it can be truncated and hard to read.

Don't

Related design guidelines

Research and usability

Research often finds issues with experiences that do not follow guidelines on page and field maximum widths.

Telemetry

  • Full screen status of pages with more than 20,000 views over last 28 days View report

For developers

Developers can use the following information to get started implementing this pattern

Tips and tricks

-Set a max-width on your content in the CSS (blade/part templates).

Related documentation

Change logs

Mar 2021

  • Add change logs

Jul 2020

  • Published