Responsive design

For most of those reading this, responsive design is taken for granted. Change some UI elements when you resize things, hide menus behind hamburgers or just change the whole layout. Often, this is done using CSS @media queries and by only taking the screen width in account. But we can do better than this.

Responsive design in zgt depends on 3 things:

• Screen size, like you're used to
• Primary input method (keyboard + mouse, touch, trackpad)
• Primary input precision (precise, rough, in the middle)

This is also important in the current age where keyboards and mouses can be connected to tablets and where a laptop can have a detachable keyboard.

For example, low precision input would mean the buttons should be bigger, regardless of screen size! (this also has the nice advantage of avoiding design nightmares like Fluent UI) Or when not using a keyboard, your app should act like shortcuts and menu bars never existed.