Support

Design Notes

The sample layouts have been carefully designed to work across a number of different screen resolutions. In the past display devices generally came on one of two resolutions: 1024x768 (often referred to as 4x3) and 1280x768 (often referred to as 16x9). More recently, however, two new resolutions have started to appear on the market: 1360x768 and 1366x768. We can probably expect the 1366x768 resolution to eventually dominate as this is the resolution of LCD TVs which are becoming cheaper than any other type of display. The problem is how to design a layout that works, no matter what the resolution of the display device. The answer is to design for 1366x768 and split the layout up into sections as shown in the image.

Starting from the left there are 1024 pixels that will show on every display device, shown in red in the diagram, this is the most important area. There is then a strip 256 pixels wide, shown in orange. This will not be seen on a 1024 wide display so it is less important. Next is a strip 80 pixels wide, shown in yellow, that will only be visible on 1360 and 1366 wide displays so regard it is least important. Finally there is a useless 6-pixel wide strip that will only be seen on a 1366 display if the NTB is able to produce this resolution.

The trick is to avoid having any zones straddling the 1024, 1280 or 1360 pixel lines. Keep your most important information in zones within the first 1024 pixels, then put interesting but not vital information in the next 256 pixels and there is no real point in putting any zones in the next 80 pixels and the remaining 6 are a waste of space. The image shows how the same layout would appear on three different screen resolutions. The procedure for setting up such a layout is:

Create the background image at exactly 1366x768 pixels
Make the background zone 100% x 100% in size
Size all other zones in pixels, not percent.
Put the background image into the playlist for the background zone.
Edit the item in the playlist and set it to "Crop" (NOT "Stretch" or "Letterbox") the image.
Don't let any zones cross the 1024 or 1280 lines.
Set the Net-Top-Box output resolution to match the display device and the layout will look good regardless of the resolution.

If the display device is not 1366x768 then the viewer will not see the a portion of the right hand edge of the layout but it will not be obvious that something is missing.

If, however, you know that your layouts will never be shown on a 1024x768 display then you can position zones that straddle the 1024 pixel column.