Guidelines
Like many modern user interfaces, we have designated three specific responsive targets depending on the device type and screen/viewport width.
Our breakpoints are:
- Desktop (>1440px)
- Laptop (>1024px & <1440px)
- Tablet (<1024px)
- Mobile (<412px)
We test our designs across breakpoints as best we can, and make sure mobile still feels clear and usable. Since smaller screens can be a bit finicky, we aim for “works well” rather than obsessing over every tiny tweak.
Screen Sizes
Each of the screen sizes is taken from the data around which screen sizes are commonly used for the Octopus product.
Design for:
|
Screen type |
Screen size (px) |
Usage share |
|---|---|---|
|
27” Desktop |
1920 x 1080 |
40% of our customers use this screen size. |
|
31” Desktop |
2560 x 1440 |
13.5% of our customers use this screen size 5% of customers are on larger screens. |
|
14” Laptop |
1440 x 900 |
4% of our customers use this screen size. |
