Recommended Header Document Setup for Production Website

Recommended Document Setup

Recommended Size Guides

The hero image for this website will display across 75% of the screen height (DVH).

We try to enable a large variety of production scales to create a website, and therefore, our base size guide is not Retina-ready, but you can provide a Retina-sized image if desired:

All sizes are provided in the unit of px (Pixels) and orientation of <Width x Height>.

Note: Images must be 5Mb or less. We recommend compressing your image using the webp format rather than jpeg or png as it offers a better level of efficiency and compression.

Image Handling

Images will always “cover” the entire area regardless of the size.

If you upload an image that is too big, it will be centred on the horizontal and vertical axis so that the centre of the image is always in the centre of the image area.

Internal Info

• Standard screen ratio: 16:9 (1920x1080px or similar)
• Image height is 95dvh (95%)
• Prepare the image to be full width (e.g. 1920px) and a height of 95% of 1080px (1026px)

Safe Zones & Breakpoints

Break points are signified with different colours which map the safety of each zone. For example, an “xs” breakpoint is the safest area because it will be displayed across all devices whereas an “xl” breakpoint is the most risky breakpoint as not all devices are wide enough to display this.

Therefore, it is recommended that you put the important content in the green areas with less important content elsewhere.