Widget Breakpoint

The Breakpoint is the display screen width at which a page or widget will switch from a Narrow view to a Wide view. The display screen width is generally determined by the width and magnification settings of a browser window but is limited to devices such as phones. The Breakpoint specifies at what screen width a widget or page will switch from horizontally positioned rows to vertically stacked columns. For example, the Breakpoint helps determine when thumbnails will be positioned above text instead of beside the text.

The Breakpoint values on pages are determined during the design process, but Breakpoints for both Widgets and Pages can be adjusted. Values will vary based on page design and aesthetics. 

Widget Notes and Information

• Page Breakpoints determine at what display screen width widgets and navigation menus are reorganized for a Narrow View (mobile) or Wide View (Desktop).
• Widget Breakpoints are based on a widget's horizontal display width and determine at what widget display widths the widget’s content will display in a Narrow or Wide view. Since page designs can vary, this breakpoint must be determined by considering the widget type, options, skin, content, page organization, or a combination of all of those things.
• The values for Page and Widget Breakpoints may be different.
• Breakpoints are measured in em. Em is the width of the letter "M" on the device for that page. This is responsive, so you cannot use absolute values such as pixels or inches.
• Breakpoints generally behave mobile-first. This aids page performance and rendering time. If the browser's display area is wide enough, additional styles are added to utilize the additional space.
• The advantage of using a narrow breakpoint versus a wide breakpoint is to define the max-width allowed before the widget breaks.
• The size of an image does not affect its Widget Breakpoint. 
• The placement of the widgets on the page does not affect when the widgets "break".

Widget Example

• A Widget’s Breakpoint is set at 25em:
  • If the current display has 25em or more space available for the widget, then the widget will not break to the next line.
  • If the current display does not have 25em of space available for the widget, the content will display vertically rather than horizontally.
  • A Widget’s available space depends on the size of the screen, the width, and magnification of the browser, and the settings or placement of other widgets on the page. On a large screen, there may be 80em available in a container but that container may hold multiple widgets. 

Resources

• Important Resource Notes:
  • These resources are very technical. Most of these resources discuss CSS breakpoints, which are applied at higher design levels. 
  • We use em values, not px values. 
• Microsoft Article: Screen sizes and breakpoints
• Web Designer Article: The Ultimate Overview of Responsive Web Design Breakpoints
• Responsive Design Article: Defining Breakpoints