Media devices

Overview

The media devices are a serie of devices created to embed images or videos. These elements have been designed to separate the content from the frame. This, to optimize the maintenance of devices displayed through the website.

Discover the Media Devices component in the Design System

Why embedding?

In order to change easily the look of the devices allover the website in just a few clicks. And avoid having a huge workload for production team whenever we want to update from a device to a newer one, we developped a 2 layer solution. The content is placed underneath the device who’s acting as a frame for the content that lies beneath it.

Devices and usage

We currently have a list of curated devices for your to put your content in. These devices are part of the library and are not (yet) subject to change. You’ll find below the list of the device, how to use them and the templates linked to them.

Smartphone

• Available orientation: portrait
• Portrait size ratio: 1:2.16
• Currently used: iPhone XS Gold
• Download: full sized PNG (only for conception design)

Tablet

• Available orientation: portrait & landscape
• Portrait size ratio: 1:1.43
• Landscape size ratio: 16:9
• Currently used: iPad pro
• Download: full sized PNG (only for conception design)

Laptop

• Size ratio: 16/9
• Currently used: MacBook Pro Space Grey
• Download: full sized PNG (only for conception design)

TV

• Size ratio: 16/9
• Currently used: some 4K TV
• Download: full sized PNG (only for conception design)