Component Library and Requirements

Please read and follow these guidelines in order to help ensure an optimal user experience across our websites.

1. Refer to our Home Hero Guidelines and Best practices for more details.

2. All images to be used on a web page should be no larger than 250KB in file size. Anything larger can cause problems when loading the page content for the user.

3. Each component in our pattern library that uses an image shows the recommended image resolution. If you select a component with an image for your page,  please provide the image with the recommended image resolution for your component.

4. Please make sure your image does not have any text included the image. This presents issues when presenting content for users with screen readers or other screen assistance technologies. (having a logo as part of your image is fine)

5. Product images should always have a transparent background.

6. Please visit this link to make sure you are following Resideo's DLS for examples of color guidelines, hex codes, etc.

7. In order to meet WCAG Accessibility requirements, please provide text alternative (alt text) for your image. Alt text is what a screen reader or other accessibility technology will read to page visitors who are blind or visually impaired. (See Image Best Practices from the WCAG Website section below.)

8. When possible, use lifestyle imagery with a product in a natural setting. Please try not to use composite images. This includes images where a product might be included on top of another image, or where images are put into a collage.

9. At minimum, keep aspects of image, such as a product, 64 pixels away from the border. Try to center the product rather than put it in the image corner.

HERO BANNER BEST PRACTICES:

1. Hero banner images must be set to 1034x600 resolution.

2. If needed, you have the option to add a focal point to your hero banner image. This will configure the position focus of the image over the important content. (The safe area for the image should be 64px -100px from the edges.) 

Focal point positions include:

• Bottom Center
• Bottom Right
• Bottom Left
• Center Center
• Center Left
• Center Right
• Top Center
• Top Right
• Top Left

VIDEO HERO BANNER BEST PRACTICES:
1. The video poster image should have the same dimension as any other hero banner at 1034x600 resolution.

• For more information on proper video resolution, visit: https://riverside.fm/blog/video-resolution

IMAGE BEST PRACTICES FROM THE WCAG WEBSITE:

Images must have text alternatives (alt text) that describe the information or function represented by them. This ensures that images can be used by people with various disabilities.

IMAGES OF TEXT: Readable text is sometimes presented within an image. If the image is not a logo, avoid text in images. However, if images of text are used, the text alternative should contain the same words as in the image. 

INFORMATIVE IMAGES: Images that graphically represent concepts and information, typically pictures, photos, and illustrations. The text alternative should be at least a short description conveying the essential information presented by the image.

DECORATIVE TEXT: Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.

COMPLEX IMAGES: Images such as graphs and diagrams: To convey data or detailed information, provide a complete text equivalent of the data or information provided in the image as the text alternative.

IMAGE MAPS: The text alternative for an image that contains multiple clickable areas should provide an overall context for the set of links. Also, each individually clickable area should have alternative text that describes the purpose or destination of the link.

GROUPS OF IMAGES: If multiple images convey a single piece of information, the text alternative for one image should convey the information for the entire group.