Jumbotron
The Jumbotron offers four varieties: Hero, Block, Gradient, and Video.
The Jumbotron is well-suited to positioning at the top of the page just below the header. If you're currently using the Hero content type, consider switching to the Jumbotron to take advantage of its expanded display options. The Sidebar Breakout Landing page layouts allow the full width of the page for content in the main area, and the jumbotron can take full advantage of that space.
- Hero - Options include a background image, caption, caption positioning, and dimming level.
- Block - Include a background image or color, heading, call-to-action button, and text.
- Gradient - Use a gradient background in place of an image.
- Video - Requires the URL for a video. A direct path to a video file or video hosted on api.video.
Jumbotron Video Policy
Is a video jumbotron the right fit for your web page? It depends. Video is not necessarily effective for every page (see usage and approval). In fact, video can often obscure or distract your users from your messaging. For instance, a video jumbotron pushes content that users are looking for farther down the page.
It’s also important to keep in mind that no web page stands on its own and is instead a part of a greater scu.edu experience. Consistency and optimization are essential for a great website experience and builds trust and confidence with visitors navigating our pages. When used on lots of web pages, users get confused and the video impact is reduced for scu.edu as a whole.
Usage and Approval
Api.video is a finite resource paid for by UMC. Therefore, you should use jumbotron videos only on recruitment and external marketing pages. For example, schools, colleges, and centers of distinction homepages are approved for use, while on-campus services and academic department pages are not.
Using Video Jumbotrons consistently makes it easier for visitors to understand what type of information they’re likely to find on a given page. To determine who can use a Jumbotron Video, UMC weighs the following considerations:
- Api.video bandwidth limit
- Page layout and content type consistency across pages
- Video as page content (vs. an image, graphic, etc.)
- Performance (loading speed) and best practices
UMC approves the usage of video from api.video. If your office is interested in its own api.video account, view pricing and consult with UMC.
Accessibility
Videos that have many moving scenes with different colors and flashing lights makes it difficult to read any overlaying text or call to action, especially for low vision users. Instead of using fast-moving videos, you should opt for a short video with a more soothing and slower pace. Furthermore, for those who have certain cognitive impairments, such as ADHD or dyslexia, having movement in the background can make it really difficult for them to make up the text.
Consistency
The SCU site includes many web pages, and as users navigate from page to page, they come across only a handful of different page layouts and content types. The limited number of layouts is intentional; imagine what it would be like from a visitor’s perspective if every one of our pages had a unique layout. Those page layouts vary from full-width landing pages with video jumbotrons to informational pages with side navigation. How web page visitors determine what kind of page they’re on is influenced by the use, and order, of content types. Because jumbotron videos are found primarily at the top of recruitment and external marketing pages, including them on any other page creates confusion.
We recommend offices and departments that provide services to an on-campus audience stick to static, text-based informational pages or images with clear headings and calls to action. Adding a Jumbotron Video to an informational page is a barrier to content, distracting your site visitors from getting the information they need.
Consistency is essential for a great website experience and builds trust and confidence with visitors navigating our pages. A similar structure of pages with identical content types will be familiar, strengthen the brand, and offer users the opportunity to take advantage of any knowledge acquired in previous interactions with our pages.
Although consistency across web pages is essential, organizations need to understand when it's acceptable to compromise consistency and provide an appropriately optimized jumbotron video on a page. Therefore, please consult with UMC if you wish to use a jumbotron video on your on-campus service page, academic department page, or any other page that may not be deemed appropriate according to this policy.
Summary
Api.video is a finite resource. Therefore, UMC approves all use of Video Jumbotrons in T4. As long as we optimize videos and use them consistently on a couple of specific page layouts, adding videos to our website should have minimal impact on performance. Video optimization is relatively easy; making videos that maintain users' interests is a much more difficult task.
The video Jumbotron can be positioned at the top of the page below the header, or in the main body of the page.
SCU Design SystemThe Block can use a background image or a selection of background colors.
It's also flexible in height, and will adjust based on the content within it.
Apply the .lead
style to paragraph tags to increase the text size.
Here's a straight-up jumbotron with a cool gradient fade.
The block, gradient, and video Jumbotrons offer a Call-to-action button option.
Another example of the Jumbotron Block, with the "light" background color applied.