WebSITE Guidelines

Typefaces

Bebas Neue

Used for all headlines, callouts, & numbers in ALL-CAPS.

Montserrat

Used for all body copy.

Color

Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna, etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien varius id.

Buttons

Website Imagery

Image formats

Pixel Images

For pixel-based images, such as photographs or graphics with fine details and textures, we recommend using the .webp format. .webp is a modern image format that provides superior compression compared to other formats, resulting in smaller file sizes and faster page load times. This means that your website visitors will experience faster load times, which is essential for a positive user experience. Additionally, .webp supports transparency, animations, and lossless compression, making it a versatile and effective format for all your pixel image needs.

Vector Images

For vector-based images, such as logos or illustrations, we recommend using the SVG (Scalable Vector Graphics) format. SVG is a powerful vector graphics format that provides sharp and clear images at any size without losing quality. This means that your images will look great on any device, from a small smartphone screen to a large desktop monitor. Additionally, SVG images are lightweight and can be easily edited using vector graphics software, which makes them a popular choice for designers.

Why .webp and SVG are the best formats

There are many different image formats available, each with its own advantages and disadvantages. However, we recommend .webp for pixel-based images and SVG for vector-based images because of the following reasons:

WEBP

• Superior compression: .webp provides superior compression compared to other formats, resulting in smaller file sizes and faster page load times.
• Versatile and effective: .webp supports transparency, animations, and lossless compression, making it a versatile and effective format for all your pixel image needs.
• Modern format: .webp is a modern image format that is widely supported by modern browsers, making it a safe choice for your website.

SVG

• Scalable: SVG images can be scaled up or down without losing quality, making them ideal for logos and other vector graphics.
• Lightweight: SVG images are lightweight and load quickly, which is important for a positive user experience.
• Editable: SVG images can be easily edited using vector graphics software, which makes them a popular choice for designers.
• Widely supported: SVG is widely supported by modern browsers and is an open standard, which means that it is likely to be supported for years to come.

Overall, using .webp and SVG formats for your images can improve your website's performance, user experience, and design flexibility.

Accessibility

At Red Door Interactive, we are committed to creating an inclusive online experience for all users, and as such, we strive to adhere to the latest Web Content Accessibility Guidelines (WCAG) 2.1 standards for website accessibility.

Importance of WCAG 2.1 Accessibility

Ensuring that your website is accessible to all users, including those with disabilities, is not only a moral obligation, but also a legal requirement in many countries. In order to achieve this, the Web Content Accessibility Guidelines (WCAG) provide a set of standards for creating accessible websites. The latest version of these guidelines is WCAG 2.1, which was published in 2018 and includes several new success criteria that were not present in the previous version.

WCAG 2.1 aims to make the web more accessible to people with a wide range of disabilities, including visual, auditory, physical, speech, cognitive, and neurological disabilities. By adhering to the guidelines, you can help to ensure that your website is accessible to as many people as possible, regardless of their abilities.

Some of the key benefits of WCAG 2.1 accessibility include:

• Increased usability for all users: By making your website accessible, you are not only improving the experience for users with disabilities, but also for users without disabilities. This is because the guidelines promote clear, consistent, and intuitive design, which can benefit all users.
• Legal compliance: In many countries, including the United States and the European Union, there are laws that require websites to be accessible to people with disabilities. By adhering to WCAG 2.1, you can help to ensure that your website meets these legal requirements.
• Improved search engine optimization: Adhering to the guidelines can also help to improve your website's search engine optimization (SEO), as the guidelines promote clear and well-structured content, which is a key factor in ranking well on search engines.
• Increased market reach: Making your website accessible can also help to increase your market reach, as it allows you to reach potential customers with disabilities who may not have been able to use your website before.

Overall, adhering to WCAG 2.1 accessibility guidelines is crucial for creating a website that is usable, legal, and inclusive. By designing with accessibility in mind, you can ensure that your website is accessible to as many users as possible, regardless of their abilities, and provide a positive user experience for everyone.

‍