MDS Assistant is an experiment.
Hi, I'm the MDS Assistant and can help you with information from our guidelines and components.

I do not provide code and development guidance. For coding assistance, please check out our experimental MCP server.

Devices

Guidance for designing across a range of devices.

Understanding how digital interfaces appear across different devices is key to designing responsive and accessible experiences using the grid and breakpoints. Devices vary widely in physical screen size, pixel density, and how they report screen dimensions to browsers and operating systems.

This overview of common Maersk devices and their typical resolutions inform your layout decisions, breakpoint strategy.

Common Maersk devices

All Maersk employees are issued standard devices with different screen specifications

DeviceScreen res. (px)Default scale factorLogical res. (px)
HP Elitebook 840 G8 14”
Most used
1920 x 1080x1.251539 x 864
MacBook Pro 13” M2
2560 x 1600x21280 x 800
MacBook Pro 14” M2
3024 x 1964x21512 x 982
MacBook Pro 16” M2
3456 x 2234x21728 x 1117
HP 23”
1920 x 1080--
Samsung / Lenovo ThinkVision 34”
3440 x 1440--
Samsung A52 6.5”
1080 x 2400x3360 x 800
iPhone SE 4.7”
750 x 1334x2375 x 667

NB: The default scale factor for monitors is determined by the device connecting to the monitor.

Hardware pixels

Hardware pixels are the actual light generating dots that are fitted into the physical dimensions of a screen. The more hardware pixels a screen has, the finer and more detailed an image can be.

A 4K (3840x2160) television and a 4K laptop screen have the same number of pixels, but the laptop pixels are much smaller because the physical screen size is smaller.
A 4K (3840x2160) television and a 4K laptop screen have the same number of pixels, but the laptop pixels are much smaller because the physical screen size is smaller.

Logical pixels

Logical pixels are relevant when the operating system uses a scaling factor to manage how content is rendered on high-density displays e.g. Retina displays. Using more hardware pixels for each logical pixel increases the perceived visual sharpness and detail.

For example, a 4K (3840x2160 hardware pixels) Retina display can be scaled by the operating system to 1080p (1920x1080 perceivable pixels), effectively using 4 times more pixels to render the same content.
For example, a 4K (3840x2160 hardware pixels) Retina display can be scaled by the operating system to 1080p (1920x1080 perceivable pixels), effectively using 4 times more pixels to render the same content.

How to design for hardware and logical pixels

  • Design for the logical pixel resolutions, thats what users will be experiencing.
  • Use high quality images that are exported for the relevant scaling factor, so there is no loss in sharpness.
  • Use scalable vector graphics (SVG). They can scale no matter what scaling factor is applied and will keep optimal sharpness.