Proximus Media Guides

Video standalone

The video standalone banner is at the top of homepage and always visible in each breakpoint

last modified: 01/01/1601 01:00:00

Overview

The homepage banner allows you to promote a device or multiple devices or a campaign at the top of the homepage page with a full background image and a video on top. This banner can be used on top of each Business Unit homepage:

Residential homepage - Small entreprise homepage - Corporate homepage

The video standalone banner combines the image background banner and a video that comes on top and at a defined place on the banner. This banner allows you to always keep the video visible and to reuse the background image for multiple campaigns.

Desktop
Mobile

Live demo (for Proximus employee): Residential homepage

Anatomy

Here is a quick overview of what a video standalone banner contains to better understand this documentation:

  1. Background image
    Background image of the banner, it takes the full width of the page.
  2. HTML content
    This HTML content is used to promote the product/service. It consists of the components of the Design System, which are usually: a heading, a subtitle, a promo patch with its info and a button.
  3. Perso box
    The perso box is a white panel which is not part of the banner but which overlays the banner.
  4. Video standalone
    The video is placed on top of the background and at a defined place.
  5. Video controls
    Unmute/mute or play/pause video controls.

Gridding

The background image covers the entire banner in full width. HTML content comes on top of the image such as the header, the copy, the perso box and the video standalone. The banner is designed in such a way that the video standalone will always have space and be visible in all breakpoints. The video standalone is where the key elements of the campaign are located. The background image will be the background visual of the campaign for example.

In the classic 12-column gridding, the text content takes:

  • Mobile: 7 columns for copy - 5 columns free space for the standalone video
  • Tablet: 6 columns for copy - 6 columns free space for the standalone video
  • Desktop: 5 columns for copy - 7 columns free space for the standalone video
Desktop
Mobile

Modes

In this component, HTML elements are added on top of the image. This content is in positive or negative mode and this affects the creation of the image. Image colors should be carefully considered, with legibility and accessibility as paramount concerns.

Accessibility - Contrast is the most important consideration

Our websites and applications have to be accessible, meaning perceptible, operable, understandable and robust for users with disabilities. Discover here our accessibility guidance.

The visual presentation of text has a contrast ratio of at least 4.5:1. Success criterion 1.4.3 Contrast

last modified: 01/01/1601 01:00:00

How to

Please use the template and respect the following guidances:

  1. Produce the image background visual if needed.
  2. Use the video standalone template to produce the video that comes on top.
  3. Produce visuals for all breakpoints (mobile, tablet/desktop).
  4. Make sure the area behind the header and copy is dark enough for readability.
  5. Test your video and adapt if needed.
  6. Make sure your video is not too heavy and export via Adobe media encoder queue if needed.
  7. Upload your video via Vimeo.
Template download

You're part of Proximus organization? Go to the template - If not, request it

Technical specifications

Please respect the following specifications when you export the images:

Image standalone
Breakpoints Size Max weight Format
Mobile (-s) 225x430px 20MB .mp4
Tablet & desktop (-l) 680x300px 30MB .mp4
Image background
Breakpoints Size Max weight Format
Mobile (-s) 640x900px 90KB .jpg
Tablet (-m) 1024x480px 120KB .jpg
Desktop (-l) 2560x480px 150KB .jpg
How to compress images

To ensure good UI quality and website performances, it's very important to respect the maximum weight indicated while keeping a correct image quality.
Discover here our images compression recommendations.

Naming convention

When exporting your visuals, make sure you use the correct naming. Do not use caps, spaces, accents or symbols (except a dash - )
Please respect the following naming convention for the image standalone:

  1. Prefix: hp-banner-device
  2. Name
    Name of the product, device, campaign,...
  3. Date
    yymm = year month (2108 = August 2021)
  4. Breakpoint
    mobile (-s), tablet (-m), desktop (-l)
  5. Language
    English by default (-en), French (-fr), Dutch (-nl). If it exists in only one language, it isn't mandatory to specify.

Images testing

Testing your image(s) is an important step of the images creation. It allows you to test the behavior in all breakpoint and to ensure the quality of the end results.

Discover here our images testing recommendations