Billboard

When to Use a Billboard Layout

Use the billboard layout to display information in an overlay above a decorative background color, image, or video.

DO

Use billboards to add visual interest and richness to pages. Choose backgrounds that complement, but don’t distract from page content.

DON'T

Don’t use a billboard to show informational images or videos which users need to review. Billboards have fixed heights and background content may be cut off. Overlay content could also obscure part of the background. Use an image or video component instead if the intent is not solely decorative.

Ensuring Sufficient Contrast

Legibility of information displayed within a billboard layout depends on the interplay between the content style, overlay style, and background media. For example, if negative-style rich text (red) is displayed in an overlay with style of “none” (transparent) above a background color of red, then the text would not be readable.

Consider the following guidelines when designing for maximum contrast:

  • Try the various overlay styles to see which one works best. In general, use the light overlay style with lighter backgrounds and the dark style for darker images and videos. Use a transparent overlay style of “none” only when the background content/color is known to provide sufficient contrast with the overlay content.
  • It is generally more difficult to guarantee good legibility for content displayed above a busy, high-contrast image or video.
  • Text color is automatically switched to white for improved legibility when the “dark” overlay style is selected.

Performance Considerations

Provide images and videos with appropriate resolution and quality for the display size. But also be aware that users with bandwidth constraints may see an empty billboard background before media loads completely--avoid unnecessarily large downloads.

FEEDBACK