To have the best possible experience on desktop and mobile we recommend to take these recommended dimensions into account. 

  • Logo: The logo is shown in the top left corner of the platform. The height should be at least 45 pixels, but is preferably larger. The width can be whatever it needs to be to respect the aspect ratio of the logo.

  • Homepage banner: This image is shown on top of the homepage. The ideal dimensions are 1440x480. These are the minimum dimensions, but any 3:1 ratio works.

  • Project header image: This image is shown on top of the project page. The ideal dimensions are 952x240. These are the minimum dimensions, but any 4:1 ratio works. So for example, 1440x360, 1770x442, 2000x500, etc... are all good dimensions because they respect both the minimum recommended width and the recommended ratio.

  • Project card image: This image is shown on the project card on the home page. The ideal dimensions are a width of 1440 pixels and a height between 1440 and 720 pixels. The image should ideally have a ratio between 1:1 and 2:1, and a minimum width of 1440 px or larger. So for example, 1440x1440, 1440x720, 1440x900, 2000x1000, 2000x1500, etc... are all good image dimensions.

  • Project folder header image: This image is shown on top of the project folder page and it should ideally have a ratio between 3:1 and 6:1, and a minimum width of 1440 px or larger.

  • Folder card image: The ideal dimensions for an image of a project card displayed in a folder page are 1440x889, which equals a ratio of roughly 1.6:1.

  • Idea card image: This image is shown for any posted idea. The ideal dimensions are 900x900.

Important notes

File format

Images should be png or jpg.

Image sizes

Image size can not exceed 5MB. 

Please take into account that these images will always have to scale because they have a flexible width (100% of the screen size) and a fixed height. So they will have a different aspect ratio on a small screen compared to a large screen. Therefore, if you want to communicate meaningful content in the image, it should be centered and with enough padding around it so that is stays visible on all screen sizes.

However, we strongly discourage you to include text on your images as this may negatively impact your platform's readability and accessibility.

Project Card Image

In order to make sure that your content appears well on all type devices and due to the current layout, we strongly advice to use pictures where the relevant content is centered on the picture. You should for instance, make sure that your photo doesn't contain faces too close from the top and the bottom of it.

TIP 1:

An image will always resize depending on the device on which someone consults the platform (smartphone, desktop, tablet). It is therefore very difficult to communicate text via an image (project or banner image). In other words, we advise you to remove the text from your designs. You can always include the text in the provided description fields.

Normally, it is not a lot of work for a designer to provide you the design you need. Important detail: visually impaired or blind people cannot read text on an image, so it is important to enter your message or title in the appropriate text field.

TIP 2:

When a large part of your image is being cut off, it might help to add some white spacing to your image. Add the same amount of spacing both on top and below the image and double-check how much spacing is needed exactly.

Example:

Need help or support? Don’t hesitate to get in touch via support@citizenlab.co.



Did this answer your question?