When one size can't fit all - UI/UX breakpoints

What are UI/UX breakpoints?

Breakpoints in a user experience of user interface design are the width specifications at which layouts change to accommodate larger screens with different layouts on various devices and orientation. Breakpoints are used with column based design drawn from a grid system. In the real world, for example, Android devices highly fragmented screen sizes implies that a single  design's functionality will be challenged to conform with so many different sizes.

Breakpoints essentially simplify the work by grouping many devices together. Within each bucket, a design will have to scale to adjust. But between breakpoints, there may be more radical changes in the interface's functionality.

Infographic for breakpoint from Google's material design site

One best practice of design involves the use of grids. A notable reference is Josef Müller-Brockmann's book "Grid Systems in Graphic Design". This has found itself into web design through libraries such as Bootstrap. However, grids are it is also somewhat implicit in the design of CSS which includes paddings and margins which stack into grids.

Some examples from Google's layout section on "material design" which is the best reference for breakpoints from a practical point of view.

1. Adjust margins and gutters in multiples of 8dp to maintain a grid as the layout changes.
2. reveal pattern shows extra elements when space increases -
• A side navigation is kept off screen for breakpoints that are too narrow for the content. But for wider layouts, the side nav is placed on screen permanently. This also works in master-detail views.
• Cards that expand their content on request.
3. Transform a simple element to a more complex one
• side navigation to page tabs 
• one-dimensional column list to a two-dimensional grid layout
• side menus into icons in a toolbar
4. Dividing a z based UI into new space.
• a side panel may split into left and right pannels
5. Reflow
• Centered grids can be reflowed to address changes in screen size. A
6. Expand - elements can expand
• A full-width grid-based design can expand to take more space
• dialogs can expand proportionally or in specific increments.
7. Position - elements may move to better positions as space expands
• FAV may move to a more visible location.

Google's guide recommends seven breakpoints at 480, 600, 840, 960, 1280, 1440, and 1600dp which amounts to eight designs. However, it lists as many as 12 twelve breakpoints. 

The analytics perspective - and media queries

Measuring the success of a design at converting visitors into customer media one of the best practices is to collect data using media queries at say the page level and report the prevalence of different breakpoints, screen types and orientation used to interact with the website or app.

If a web property (web-site or app) has been designed professionally, the responsive layout will  adjust the different layouts for different screen sizes. The breakpoint, aspect ratio, and orientation provide more meaningful segments for capturing online behavior than screen resolution or device model since they will cluster users into the most meaningful cluster. (Though it is still possible to drill down from a breakpoint segment and examine specific devices for issues)

Breakpoints resolution and orientation and can be captured via auto tracking and three custom dimensions.

These segments can be used to better understand success and failure of processes that are inherently caused by poor or serendipitous design choices and adjustment can be made to improve defects or ta add missing breakpoints or to improve the design incrementally.

Units

$$ px = {{dp \times dpi} \over 160 } $$ or $$ dp = {{ (width \space in \space px \times 160)} \over screen \space density} $$

• % - relative to the enclosing unit (a CSS unit).
• ch - length relative to the width of the "0" (a CSS unit).
• em  - length relative to the current font's height. (a CSS unit).
• ex - size relative to the current font's height by the lower case letter x (a CSS unit).
• px - length in pixels which are 1/96  in(a CSS unit).
• in - inches (a cssCSS and android unit).
• mm - millimeters (a CSS and android unit).
• pc - pica is  12 points (a CSS unit) used in print.
• pt - points 1/72 0f an inch (a CSS and android unit).
• dpi - dots per inch - the screen density of the device.
• dp or dip - density independent pixels (relative to 160 dpi screen) and bucketed by to 120 (ldpi), 160 (mdpi), 240 (hdpi), 320 (xdpi), 480 (xxhdpi) 640 (xxxhdpi). (an Android unit).
• sp - scale independent pixels - scaled according to font size (an Android unit).
• rem - relative to the font size of the root element which ignores scalings of intermediate styles   (a CSS unit).
• vh - 1% of browser's window size height (a CSS unit).
• vw - 1% of  browser's window size width (a CSS unit).
• vmin - the smaller of 1 vh and 1 vh (a CSS unit).
• vmax- the larger of 1 vh and 1 vh  (a CSS unit).

Of course, these were all initially supported by different versions of each brand of browser.

References

• The designer's guide to grid theory
• What is the difference between “px”, “dp”, “dip” and “sp” on Android?
• Supporting multiple screens from Google developers.
• Reponsive UI on Google's material design site
• Dimensions in android from Google developers.
• Patterns for reponsive layouts with css