Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BD-1562: Update IAM creative details and templates #3998

Merged
merged 2 commits into from
Aug 31, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,18 @@ tool:

Full-screen messages take up the whole screen of the device! This message type is great when you really need your user's attention, like for mandatory app updates.

![Two full-screen in-app messages side-by-side, detailing the image and text recommendations. See following sections for details.][3a]{: style="max-width: 801px; border: none;"}
{% tabs %}
{% tab Portrait %}

![Two full-screen in-app messages side-by-side in portrait orientation, detailing the image and text recommendations. See following sections for details.]({% image_buster /assets/img/full-screen-spec.png %}){: style="max-width:801px;border:none;display:block;margin-left:auto;margin-right:auto"}

{% endtab %}
{% tab Landscape %}

![Two full-screen in-app messages side-by-side in landscape orientation, detailing the image and text recommendations. See following sections for details.]({% image_buster /assets/img/full-screen-spec-landscape.png %}){: style="max-width:801px;border:none;display:block;margin-left:auto;margin-right:auto"}

{% endtab %}
{% endtabs %}

## Images

Expand All @@ -31,16 +42,16 @@ Full-screen in-app messages will fill the entire height of a device and crop hor

| layout | asset size | notes |
|--- | --- | --- |
| Image + Text | 6:5 aspect ratio<br>Hi-Res 1200 x 1000px<br> Min. 600 x 500px | Cropping can occur on all sides, but the image will always fill the top 50% of the viewport |
| Image Only | 3:5 aspect ratio<br>Hi-Res 1200 x 2000px<br> Min. 600 x 1000px | Cropping can occur on the left and right edges on taller devices |
| Image and text | 6:5 aspect ratio<br> Hi-Res 1200 x 1000px<br> Min. 600 x 500px | Cropping can occur on all sides, but the image will always fill the top 50% of the viewport |
| Image only | 3:5 aspect ratio<br> Hi-Res 1200 x 2000px<br> Min. 600 x 1000px | Cropping can occur on the left and right edges on taller devices |
{: .reset-td-br-1 .reset-td-br-2 .reset-td-br-3}

#### Landscape

| layout | asset size | notes |
|--- | --- | --- |
| Image + Text | 10:3 aspect ratio<br>Hi-Res 2000 x 600px<br> Min. 1000 x 300px | Cropping can occur on all sides, but the image will always fill the top 50% of the viewport |
| Image Only | 5:3 aspect ratio<br>Hi-Res 2000 x 1200px<br> Min. 1000 x 600px | Cropping can occur on the left and right edges on taller devices |
| Image and text | 10:3 aspect ratio<br> Hi-Res 2000 x 600px<br> Min. 1000 x 300px | Cropping can occur on all sides, but the image will always fill the top 50% of the viewport |
| Image only | 5:3 aspect ratio<br> Hi-Res 2000 x 1200px<br> Min. 1000 x 600px | Cropping can occur on the left and right edges on taller devices |
{: .reset-td-br-1 .reset-td-br-2 .reset-td-br-3}

### Image safe zone
Expand All @@ -53,8 +64,18 @@ When previewing a full-screen in-app message in the Braze platform, you can enab

On a tablet or desktop browser, a full-screen in-app message will sit in the center of the app screen, as shown in the following screenshot.

![Full-screen in-app message as it would appear on a large screen. The message appears as a large modal that sits in the center of the screen.][3b]{: style="max-width: 800px; border: none;"}
{% tabs %}
{% tab Portrait %}

![Full-screen in-app message as it would appear on a large screen in portrait orientation. The message appears as a large modal that sits in the center of the screen.]({% image_buster /assets/img/full-screen-large-viewport.png %}){: style="border:none;display:block;margin-left:auto;margin-right:auto"}

{% endtab %}
{% tab Landscape %}

![Full-screen in-app message as it would appear on a large screen in landscape orientation. The message appears as a large modal that sits in the center of the screen.]({% image_buster /assets/img/full-screen-large-viewport-landscape.png %}){: style="max-width:80%;border:none;display:block;margin-left:auto;margin-right:auto"}

{% endtab %}
{% endtabs %}

[3a]: {% image_buster /assets/img/full-screen-spec.png %}
[3b]: {% image_buster /assets/img/full-screen-large-viewport.png %}
[3c]: {% image_buster /assets/img/image-safe-zone-full-screen-in-app-message.png %}
Binary file modified assets/download_file/Braze-In-App-Message-Design-Templates.zip
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/img/full-screen-large-viewport.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/full-screen-spec-landscape.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/img/full-screen-spec.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.