Skip to main content
All CollectionsUniversal App - Branding
Asset Dimension Guidelines for Universal App
Asset Dimension Guidelines for Universal App

Detailed guidelines on asset dimension, to make sure the image you uploaded to UA remains high quality to your readers on any devices.

Natasha avatar
Written by Natasha
Updated over 2 years ago

The Universal App (UA) is powered by PWA technology that works in any browser and is responsive to any screen size. To ensure your image or graphic assets remain to look high-quality to your readers on any device, please only upload non-vectorized assets that meet the following requirements depending on where it’s being placed.

Top Menu Logo & App Icon on UA

The top menu logo of your Universal App will be visible throughout all the pages of your publication, and the App Icon of your Universal App will be visible when your readers installed your UA on their devices.

To make sure you provide the highest quality possible for your graphs, here are the design requirements for your Logo & App Icon:

  • Minimum width x height: 128 x 128px

  • Compatible file formats: SVG, PNG, JPG, and JPEG

  • Shapes: Circle or square

Main Banner on UA Homepage

The main banner on the homepage takes full width on any device, including the desktop. Therefore, we need to consider using assets with minimum width that will still look sharp on the desktop monitor.

  • Minimum width: 1600px (with important content within 640px to the left-and-right from the center.

  • Minimum height: 400px

  • Compatible file formats: SVG, GIF, PNG, JPG, and JPEG

  • Best Practices:

    • 2x size for retina displays (i.e. image width of 3200px)

  • Features: Banner can contain either internal or external URLs (with or without UTM tracking link) that will open a new tab when clicked on.

Advertisement Banner on UA Homepage

Ads on the left column

Advertisement block paced on the first column container

  • Minimum width: 704px

  • Compatible file formats: .jpg, .png, .gif, embeded HTML

  • Best Practices:

    • 2x size for retina displays (i.e. image width of 1408px)

    • Contain Call-to-Action (CTA) on the image

    • Use relevant title

    • If you’re using embedded HTML, please take out the HTML code that defines the fixed width.

  • Features: Ads can contain either internal or external URLs (with or without UTM tracking link) that will open a new tab when clicked on.

Ads on the right column

  • Minimum width: 448px

  • Compatible file formats: .jpg, .png, .gif, embeded HTML

  • Best Practices:

    • 2x size for retina displays (i.e. image width of 796px)

    • Contain Call-to-Action (CTA) on the image

    • Use relevant Title

    • If you’re using embedded HTML, please take out the HTML code that defines the fixed width.

  • Features: Ads can contain either internal or external URLs (with or without UTM tracking link) that will open a new tab when clicked on.

Advertisement block placed on the second column container

Advertisement Banner inside an article (added through Typeloft Editor)

Full-page width page

Full-page width ad within an article using
the image widget

  • Minimum width: 768px

  • Compatible file formats: .jpg and .png using image widget; embeded HTML using HTML widget

  • Best Practices:

    • 2x size for retina displays

    • Contain Call-to-Action (CTA) on the image

  • Features: Ad using image widget can contain either internal or external URLs (with or without UTM tracking link) that will open a new tab when clicked on.

Other than full-page width

Content on multiple columns layout on the desktop most likely will be displayed in one column on mobile, taking the full width of the mobile device.

  • Minimum width: 376px

  • Compatible file formats: .jpg and .png using image widget; embeded HTML using HTML widget

  • Best Practices:

    • 2x size for retina displays

    • Contain Call-to-Action (CTA) on the image

  • Features: Ad using image widget can contain either internal or external URLs (with or without UTM tracking link) that will open a new tab when clicked on.

Less than full-page width ad within an article using the image widget

Cover images

  • Collection cover image

    Cover images for a collection should be at minimum 512 x 684 px.

  • Article cover image

    For article cover image, the size should be at minimum 1024 x 768 px.

Please be advised that the appearance of cover images depend on where they're gonna be displayed. It’s possible that some sides of the image will get cropped when shown as thumbnails - this is a part of the responsive nature of Universal App.

Get stuck? Feel free to reach out to our live chat at the bottom right corner of your Universal App dashboard or simply send an email to support@magloft.com

  • Join our Universal App Community here

  • Visit the help playlist to get started with your Universal App here.

Did this answer your question?