Add a front page banner

Learn how to add a front page banner and incorporate accessibility best practices

Anna Brogan avatar
Written by Anna Brogan
Updated over a week ago

A front page banner is a great way to catch the eye of visitors to your platform and has the potential to be a powerful marketing tool to promote key events, content and more. However, it is also important to consider the accessibility of your platform when adding banners to your front page. Read on to learn the recommend ways to leverage this area of your platform!

Adding a banner

To add or update the banner for your platform, navigate to the Customize > Banner section of your dashboard. From there, you can use the 'Upload' button to add in an image of your choosing. You are able to crop the image within the image editor once added. You can also use the associate fields to add text over your image, update the opacity of your text box, or to make your banner image clickable to a link of your choosing.

Number of banners

Within your platform, if you navigate to Customize > Banner from your dashboard, you have the ability to upload a new banner image. While you can add up to four banners, for a better user experience, we encourage you to only use a single banner. Multiple banners can be inaccessible for viewers using assistive technology, may result in a poor experience on mobile devices, and will likely be flagged by any accessibility audit your institution performs. If you do need to upload multiple banners and don't see the option to add more than one yet, reach out to support@gouconnect.com asking the team to enable the option to add additional homepage banners for you, and we'd be happy to assist!
โ€‹
While you may be inclined to spotlight as many of your key calls-to-action as possible with the banner functionality, we recommend using 'Banner 1' and updating it as frequently as is needed. Data indicates that when there are multiple banners on a page, the first banner has a far higher click-rate than later banners, and that having more than one banner can actually lead to users being overwhelmed or disregarding the area altogether. Because of this, spotlighting a singular banner only is not only a win for accessibility, but it can also help to optimize your audience engagement!

Overlap of banner and upcoming events

To create eye-catching banners, many of our client partners use Canva or other free image design tools. One detail to consider when designing a banner is whether or not you have the 'Upcoming Events' front page banner overlay activated, as seen in the screenshot below:

If you have this 'Upcoming Events' area activated, this should factor into your design. By default, the size of a front page banner is 1600 x 460 pixels. However, if you are creating a banner, particularly one that is a functional image or that includes text, and you have the 'Upcoming Events' banner overlay activated on your front page, we recommend leaving space without text or the focal point of an image on the right-hand side of your banner. The area that we recommend leveraging as the impact area is 960 pixels wide, and the area that should be non-impact content should be 640 pixels wide to account for the 'Upcoming Events' banner overlay. You can access our template for this here.

If you don't build this space into your design, and you have the 'Upcoming Events' overlay activated, your users will not be able to see the entirety of your image and they could miss out on your content!

Text on banners

With a banner, you may want to include more detail, particularly if your banner is a call-to-action to attend an event or something else that you feel requires context. If you have created a banner that includes text, you will want to be sure to include alternate text, as well, for those who may be using a screen-reader.

To add alt text to your front-page banner image, navigate to Customize > Banner, from your dashboard, and enter a brief description in the 'Alt Text' field. Alt text is only required for images that are functional. If your image is solely a decorative image, that does not have a meaning or function to the page, alt text is not needed.

Please note that for mobile users, any text on your banner will be reformatted and may appear smaller. For this reason, it may be best to avoid using text-heavy banners.

Did this answer your question?