Rotating banners highlight visual content and publicize your website's events, facilities, and other items. 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 must 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 choose 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, where we use a rotating banner to show the different branches of a library. A page will lose focus and meaning if one banner has too many different ideas.
- 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 critical 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.
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, choose accessible colors and fonts. For example, there must 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, your community will lose meaning from your content. We recommend using an OC Image Gallery instead if you need to display many images.
- Ensure that you add alt text to your images while uploading them. If you're using an image that is already uploaded to the Files Library, it may already have set alt text. Content authors can either:
- Use the alt text set in the Files Library; this alt text will auto-update if any changes are made to the file in the library.
- Check the Override alt text from asset library box and write their own alt text. This allows them to write alt text specific to the image's use, and it will not auto-update if the image is edited in the Files Library.
- Be mindful of how your images will present on different screens. We do not recommend using images that are heavy in text or that are poorly contrasted with your background or thematic colors. Often, images with 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.
- Ensure 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.