Designing for responsive medium/big screens for SaaS products Best practices
Consider a SaaS web product that has users mostly on medium/big screens - from small laptops and tablets through large screens (15"/17" laptops and small/medium desktop screens) up to big screens (20"++ inch desktop screens). We are not considering for now mobile apps, vertical tablets or 10 foot user interface experiences. User's distance from the screen might vary though.
The problem is to keep the proportions of the app layout, elements, text and interaction experience consistent through different sizes of medium/big screens. Empty spaces and separators may have considerably different effect and function on big screens. Also visual hierarchy may be affected when, for example, a Navigation rail of 48px width looks really small and difficult to use un very big screen.
One solution might be having the UI based on a grid which might scale on three breakpoints:
- medium screen (>1024 px)
- large screen (>1660 px)
- big screen (>1920 px)
- Should only base elements scale (base space, base font size) and the rest should be defined in "rem"?
- How complex is this for maintenance?
- How to manage that some elements scale (font size, buttons) and some do not (borders, paddings)?
- Any best practices, documentation, studies, research on this topic?