Lesson
Optimize for Mobile and Desktop
The Braze Email Drag & Drop Editor makes it simple for marketers to create emails that are optimized for both desktop and mobile devices. Braze automatically changes your desktop emails in the following ways to render better on mobile devices :
- The content area expands to the full width of the device screen.
- Rows with multiple columns are stacked, so rows become single-column.
- Backgrounds are not shown around the edge of the content area.
These default changes work well for most emails, but you might need to tweak your email layout manually to get the specific look you want. In this lesson, you'll review three key ways you can customize your emails for mobile.
- Row stacking (stack, do not stack, reverse stack order)
- Hiding elements on either desktop or mobile
- Mobile specific layout settings
The desktop version of an email is the base version of the email. Compose each section in the desktop view first. Any changes you make to the desktop version will impact the mobile version, but the opposite is not always true.
Row Stacking
By default, the Braze Email Drag & Drop Editor stacks row elements vertically on mobile devices. This means that elements that appear side-by-side on desktop will be displayed one on top of the other on mobile devices.
Header Stacking
You may not want to have the elements stack at all. For example, a header might look strange if stacked. You can disable stacking for such elements. The following video shows how you can control header stacking.
Alternate Ordering
You may also have a design that alternates the order of elements in a row. This looks good on desktop, but can be confusing on mobile with default settings. This video shows how you can use the mobile settings to ensure a consistent look.
To control row stacking, do the following:
- Step 1: Select the "Row" containing the elements you want to reorder by clicking on it within the editor.
- Step 2: In the right-hand panel, you have two options to control stacking. Do not stack on mobile and Reverse stack order on mobile.
- Step 3a: Select Do not stack on mobile to prevent the row from being stacked at all on a mobile device. Note that rows with many columns may have to significantly reduce the size of elements with this option.
- Step 3b: Select Reverse stack order on mobile to enable element stacking on mobile devices, but reverse the order they appear in. This will cause the right-most element to appear as the first as users scroll down the email.
Hiding Elements
You can choose to hide elements on either desktop or mobile devices. This feature can be used to hide items that aren’t relevant on certain kinds of devices.
For example, if you had a button that makes a phone call, you may wish to hide it on desktop devices. On a mobile device, you might want to show social network links for networks which have better mobile support, and hide those links on desktop.
The following video shows a common use-case of hiding mobile-specific elements on desktop.
To hide certain elements depending on the type of device:
- Step 1: Select the editor block you want to hide on either desktop or mobile devices by clicking on it within the editor.
- Step 2: Scroll down to Block Options in the right-hand panel.
- Step 3: Adjust the Hide On toggle to hide the element on desktop (screen icon) or mobile (phone icon).
- Step 4: Click the desktop or mobile preview buttons in the upper left to make sure to check that the email looks as expected.
Mobile Layout Settings
You can customize the layout for mobile devices. Click the mobile preview button on the top left corner of the editor. The Mobile icon will appear next to settings that you can adjust that only affect mobile display. Changes made here won't affect the desktop email appearance. Any other changes will show on both mobile and desktop views.
You can adjust the following Settings for mobile views specifically:
- Row padding
- Editor block padding
- Font size
- Horizontal alignment
- Button width
- Image width (toggle full width on mobile)
Watch the following video for a walkthrough of how you can modify an email layout specifically for mobile for an optimal viewing experience.