Screen Resolution, Orientation and Layout Sizing

Content that looks stretched, letterboxed, cropped or sideways is nearly always a mismatch between three things: the layout’s resolution, the player’s output resolution, and the physical orientation of the screen.

Design the layout at the screen’s real resolution

A layout has a fixed resolution, chosen when you create it. Pick the one that matches the screen:

1920 × 1080: standard landscape Full HD. The default, and the right answer for most screens.
1080 × 1920: portrait Full HD, for a screen physically rotated 90°.
3840 × 2160: 4K landscape, only where both the screen and the player genuinely support it.

If the layout aspect ratio does not match the screen, easyCMS scales it to fit and you get black bars, or scales to fill and you get cropping. Neither is a bug, the fix is to build the layout at the right resolution and rebuild the regions, not to stretch it afterwards.

Portrait screens

Portrait needs a decision at three levels, and all three must agree:

Physical: the screen is rotated on its mount.
Player output: the device outputs a rotated image. On Android this is a display setting on the device or in the display settings profile; on Windows it is the graphics driver’s rotation setting; commercial screens often have their own rotation option in the TV menu.
Layout: the layout is created at 1080 × 1920.

The most common mistake is rotating only the layout: a portrait layout sent to a landscape output is squeezed into a thin strip in the middle of the screen. The second most common is rotating at two levels, the player and the screen, which cancels out and leaves you upside down.

Where possible, rotate at the screen and leave the player outputting its native landscape signal, since some devices lose hardware video acceleration when the output is rotated in software. If video plays fine in landscape and stutters in portrait, that is what has happened, rotate at the screen instead.

Video inside a region

Videos are scaled into their region. For a clean result:

Encode the video at the region’s aspect ratio.
A full-screen video in a 1920 × 1080 layout should be a 1920 × 1080 file.
A video in a portrait region should be encoded portrait, not a landscape file rotated by the player.

Letting the player rescale on the fly costs performance on low-end hardware and is a frequent cause of stutter, see Videos Will Not Play or Stutter.

Overscan: content running off the edges

If a few pixels are cut off around all four edges, the TV is applying overscan. Look in the screen’s picture settings for Just Scan, Screen Fit, 1:1, Full Pixel or PC mode and enable it. Some screens only disable overscan when the input is labelled as a PC. Do not compensate by shrinking your layout, fix it at the screen.

Mixed screen sizes in one network

Screens of different resolutions but the same aspect ratio can share one layout: a 1920 × 1080 layout scales cleanly to a 3840 × 2160 screen. Different aspect ratios cannot share a layout without compromise. Group displays by aspect ratio and schedule the matching layout to each group, see Scheduling Content.

Design text for the worst case in the group. Text that is comfortable on a 55” screen at 2 metres is unreadable on a 32” screen at 6 metres.