Layouts, Grids, and Responsiveness

Current layout and grid best practices suggest:

• Implementing a 12-column layout at the widest screen sizes (generally around 1280px or 80 rem & up)
  • This structure should then adapt or respond to browser size/orientation by using fluid width columns that are slowly removed from the overall layout, generally forcing content to wrap and exhibit some measure of fluidity
    • i.e., 6 column layouts for mobile devices (with content taking up either 3 or all 6 columns).

• Leveraging Flexbox and/or grid systems in CSS. We recommend reading this article before implementing a grid on mobile.

• Maintaining a mobile-first approach when designing and building web-based applications

• Whenever feasible, use REM units for scalability (especially for text) regarding accessibility

  • Ensuring primary content is clear at default size. People should not have to scroll horizontally to read important text or zoom to see primary images unless they choose to change the size. (See don't take control from the user)
  • Preparing for text-size changes. People expect most apps to respond when they choose a different text size in Settings. Implementing a flexible layout will greatly assist in accommodating text-size changes

• Maintaining an overall consistent appearance throughout your app. Elements with similar functions should be presented similarly.

• Implementing hierarchy (size, alignment, contrast, negative space, etc.) for content and actionable elements.
  -Large items catch the eye and appear more important than smaller ones. Larger items are also easier to tap, which is especially important when an app is used in distracting surroundings. In general, place principal items in the upper half of the screen, near the leading side for larger screens. For smaller, mobile devices, the bottom half is preferred - which allows easier user action.

• Maintaining alignment to ease scanning and to communicate organization and hierarchy. Alignment makes an app look neat and organized, helps people focus while scrolling, and makes it easier to find information.

• Providing ample touch targets for interactive elements when applicable (mobile devices). Strive to maintain a minimum tappable area of ≈ 48 x 48px (3 rem) for user controls, with a minimum of 8px (.5rem) between targets.

Spacing Methods

Padding refers to the space between UI elements.
We are not differentiating between CSS padding and margins in these guidelines

Consistency is the golden rule when implementing layout and element padding. General guidance is to use a 4 or 8px (.25 or .5 rem)

As with other aspects of the layout, the general best practice is to keep these units relative by using the CSS rem unit or other relative units, such as viewportwidth or vw.