Jumbotron Hero - The caption is optional, and can be positioned to the left or right. You can also apply a custom setting to the dimming level for the background image, as needed.
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 Cloudinary.
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
Cloudinary 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:
- Cloudinary 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 Cloudinary video with the exception of Leavey School of Business, which has its individual Cloudinary account. If your office is interested in its own Cloudinary account, view plans and 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.
Optimization
Video content is extremely heavy, affecting your page loading time, especially when compared to images. So we must limit the number of videos on our web pages and deliver video content in the most optimized way using Cloudinary and other third-party streams.
The benefits of having video content on your website might outweigh the cost added to your page load. That said, if your video content isn't adding value to the user experience, then it's wasting limited resources. In such instances, the performance boost you'd get from omitting videos all together might be more beneficial to your bottom line. Use video content strategically so that you don't overwhelm new visitors. Regularly reevaluate all of your video content to make sure each element of your website serves a purpose.
How to Optimize Cloudinary Video
In essence, Cloudinary optimizes and delivers video to your web page as a stream. Each stream is a hit to our Cloudinary bandwidth limit. You are required to optimize your video content.
- Keep videos short. The shorter the video, the smaller the file size, the faster your page loading speed.
- Remove audio from muted videos. Audio, as part of the file, increases the file size.
- Apply Cloudinary’s video optimization parameter to your video URLs in T4. There are several parameters to choose from: q_auto:best, q_auto:good, q_auto:eco. View Cloudinary's video optimization page for the complete list of options and the specific quality. Please apply this optimization parameter on all Video Jumbotrons, especially on your most often visited landing pages.
Sample URL
Added parameter highlighted in red:
https://res.cloudinary.com/demo/video/upload/w_600/q_auto:eco/hourglass_timer.mp4
Summary
Cloudinary is a finite resource. Therefore, UMC approves all use of Video Jumbotrons in T4. Read more about finding photos and videos in our archive on our Cloudinary page. 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.