Frontend General Responsiveness

This guide should help improve the responsiveness of the PermaplanT web application going forward.
It focuses on general layout and usability best practices.

General Layout

  • Use responsive layout like a grid or a flexbox when placing multiple components into a container.

  • Prefer relative widths/heights and max/min-heights/widths over absolute widths/heights.

  • These approaches ensure proper display across a wide range of screen sizes.

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

  • Actions that take focus away from the main content should be clearly labeled.

  • This avoids accidentally triggering them as interruptions in the expected user flow can reduce usability.

Breakpoints

  • When layout techniques alone are not sufficient, use breakpoints to adapt the layout.

  • Tailwind provides predefined breakpoints:

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

  • Breakpoints apply to screens matching or exceeding the specified minimum width.

  • Tailwind also supports custom breakpoints for more specific use cases.

  • Apply breakpoints to CSS properties as needed:

    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]

General Usability

  • A whole-page scroll should generally be limited to a single direction.
  • If the page scrolls vertically, horizontal scrolling should generally be limited to specific components like news feeds or overflowing tables.
  • Document the scrolling direction in component documentation.
  • 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.
  • Users should always be able to:
    • access collapsed overlays
    • return to the main content
    • do so with a single click or tap
  • Any interactable element should have a size of at least 36x36 Pixels.
  • This ensures consistent usability across different screen sizes.