Proximus Media Guides

NBO box

NBO visuals for the MyProximus web.

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

Overview

The NBO banners appear in a box on MyProximus web.

Live demo (for Proximus employee): MyProximus web

NBO visuals are also displayed for MyProximus app. To have all the correct information go to MyProximus app > NBO box.

Anatomy

Here is a quick overview of what the NBO box contains on MyProximus web to better understand this documentation:

  1. Ribbon (HTML content, optional)
    Always on the top left of the panel.
  2. Title (HTML content)
  3. Copy (HTML content, optional)
  4. Promo patch (HTML content, optional)
  5. Button (HTML content, optional)
    Primary, secondary or tertiary.
  6. Close button (HTML content)
    Always on the top right of the panel.

Compositions

NBO boxes are on MyProximus web but also on MyProximus app. You should produce the visuals for both. For MyProximus web, desktop and mobile are always on a gridding 12. For MyProximus app, you can find the information here.

Web (desktop & mobile)
Mobile app

Accessibility

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

Negative mode
Positive mode
last modified: 01/01/1601 01:00:00

How to

Please use the template and respect the following guidances:

  1. Produce visuals for MyProximus app and MyProximus web.
  2. Respect the safe areas in the template.
  3. Enjoy! logo for web (mobile & desktop) is added in magnolia (for the app, it should be added in the visual).
  4. Stay consistent, if an NBO is in positive or negative on the web, it should be the same in the app (and vice versa). It should also either be in positive or negative whether it's in FR, NL or EN.
  5. Placeholder text in the template is the longest possible. If the text isn't as long on prod, please adapt the main visual so it takes as much space as possible in the box.
  6. Hide the "DO NOT EXPORT" folder before exporting.
  7. Test your visuals and adapt if needed
  8. Make sure your visuals are not too heavy and compress if needed.
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:

Web
Breakpoints Size Max weight Format
Mobile (-s) 640x850px 80KB .jpg
Desktop (-m) 1180x500px 150KB .jpg
App
Breakpoints Size Max weight Format
1x 670*768px 80KB .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:

  1. Name
    Short explanation of the visual, campaign,...
  2. Date
    yymm = year month (2108 = August 2021)
  3. myproximus
    If it's a visual for iOS or Android
  4. web
    as it's a NBO visual for MyPXS web
  5. Breakpoint (optional)
    Mobile (-s) or desktop (-m)