Frontend General Responsiveness

This guide should help improve the responsiveness of the PermaplanT web application going forward.
Its focus are general layout and usability best practices.

General Layout

  • Make use of a responsive layout like a grid or a flexbox when placing multiple components into a container.

  • Make use of relative widths/heights and max/min-heights/widths over absolute widths/heights to ensure a proper display on a wider range of screen sizes.

  • Whenever the general measures above are not sufficient, for example, when more fundamental changes are needed, Tailwind provides tools in the form of breakpoints that can be used to modify CSS properties based on the current screen size. Tailwind offers the following list of default breakpoints:

    Breakpoint PrefixMinimum Width
    sm40rem (640px)
    md48rem (768px)
    lg64rem (1024px)
    xl80rem (1280px)
    2xl96rem (1536px)

    These breakpoints are generally applied to any screen matching or exceeding the minimum width specified unless another breakpoint is specified and matched or exceeded.
    Additionally, Tailwind also allows the use of custom breakpoints, which offer an additional level of customizability.
    Both types of breakpoints can be applied to any CSS property like so:

      grid grid-cols-1 md:grid-cols-[1.5fr_1fr] lg:grid-cols-[2fr_1fr]
  grid grid-cols-1 min-[300px]:grid-cols-[1.5fr_1fr] max-[600px]:grid-cols-[1.5fr_1fr]

  • On small screens (< 768 px), single column layouts should be preferred.

  • Actions that take focus away from the main content should be clearly labeled to avoid accidentally triggering them as interruptions in the expected user flow can lead to frustrations when working with the application.

General Usability

  • A whole-page scroll should generally be limited to a single direction, so if a whole-page scroll is vertical, a horizontal scroll should generally be limited to specific components like horizontal news feeds or overflowing tables.
    Component documentation should make clear which direction is used for scrolling.
  • The main focus of the page should by default cover at least 75% of both width and height.
  • Any type of overlay covering more than the remaining 25% should be hidden by default.
  • In any given state it should always be possible to access the collapsed overlays as well as return to the main focus with a single click or tap.