Proximus Media GuidesBlog top visual
Top visual in blog articles
Overview
Blog articles have a top visual to illustrate the article. The blog top visual doesn't have accessibility issues for the designer since it has no content on top.
Live demo (For Proximus employees)
Examples
The top blog visual always has the same size even if used slightly differently. Sometimes it will take the full width of the article, sometimes a small text comes next to the visual but we keep the same size (for mobile & desktop).
Blog vignette
The top blog visual is also used for the miniature of the article, still with the same size (for mobile & desktop).
How to
Please use the template and respect the following guidances:
- The template has two artboards: the blog top visual artboard and the social visual artboard, make sure you produce both.
- The social visual artboard is the same as already documented. It's also in the blog top visual template to facilitate the access and make sure the designer doesn't forget to produce it as it's mandatory for each blog article.
- Use the dynamic object layer to place your visual on the blog top visual and on the social image.
- Test your visuals and adapt if needed
- Make sure your visuals are not too heavy and compress if needed.
You're part of Proximus organization? Go to the template - If not, request it
Technical specifications
Sizes are for reference and guidance, note that they may change with the content or gridding. But in most case refer to the following specifications when you export the images:
| Breakpoints | Size | Max weight | Format |
|---|---|---|---|
| Mobile, tablet, desktop | 880x550px | 70KB | .jpg |
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:
- Name Description of the visual, campaign or content
- Date yymm= year month (2108= August 2021)
- blog-top-visual (optional) Type of visual
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