Rotating banners are used to highlight visual content and publicize events, facilities, and other items on your websites. They can be placed on your homepage or any content type with a WYSIWYG Editor and are available for your public site, subsites, and Intranet.
How it works
We have two forms of rotating banners: Homepage banners and page-level banners. They can be created within a folder for your homepage or at a page-level within your site tree. Homepage banners will need to be built into your theme by implementing the rotating banner component in the theme's layout and styling the banner in the Styles tab.
Our rotating banners are built to conform to accessibility considerations, but when styling and creating your homepage banner, you'll need to ensure you're choosing accessible colors and fonts. If you're unfamiliar with how to implement or style your rotating banners so that they continue to meet accessibility requirements, we recommend consulting with our team. To do this, submit a support ticket, and our team will get in touch with the next steps.
Best-practice tips
There are some recommendations we can make for best practice of banners:
- Use banners to show different aspects of a particular branch or section. For example, see our demo site in which we use a rotating banner to show the different branches of a library. A page will lose focus and meaning if there are too many different ideas in one banner.
- Remember to keep your community in mind as you're building your banner. Try not to pack your banner too full of text or have too many slides, and refrain from using banners when there's more important content to prioritize at the top of the page.
- Make sure that any task-oriented content you put in the banner can also be found elsewhere on the page, so it won't be missed by your community members who have come to your site to complete a particular task.
Be careful!
Various studies have shown that users have trouble reading and understanding information from rotating banners, and they have a low click-through rate. It is common for information located in a banner to be missed by site visitors, and there is a risk of banners being dismissed as resembling advertisements. You should also be wary of using banners as an archive of temporary content for which you can't find another home. Instead, we recommend using a Featured Content row to highlight essential or temporary pages.
Accessibility
While Rotating Banners can be used to promote upcoming events or changes within your council, it can be difficult to make them fully accessible. Here are a few accessibility tips:
- When styling your banner in your theme, ensure that you choose accessible colors and fonts. For example, there needs to be sufficient color contrast between text and background colors, and you shouldn't make the controls or navigation completely transparent.
- We recommend using no more than five slides. Banners should not be packed with every event or facility on your site. If you use too many slides, you risk your community losing meaning from your content. If you need to display many images, we recommend using an OC Image Gallery instead.
- Ensure that you add alt text to your images while uploading them.
- Be mindful of how your images will present on different screens. We do not recommend using images that are heavy in text or which are poorly contrasted from your background or thematic colors. Often, images that have specific focal points can be difficult to adapt to different screen sizes; switching from desktop to mobile, for example, might result in undesirable cropping.
- Text in images is best avoided; images can be clipped if the height and width parameters don't match the slideshow settings. Text is also easily cut when images are resized for different devices.
- Make sure the titles and captions you give your images are not too long, as users need to fully understand each image and caption as the banner rotates. The character limits are 50 characters for the title and 400 characters for the description. On mobile screens, captions that are too long will cover the entirety of the image and will be cut off if there is not enough space.