Customized Responsive Behavior

Kombai allows you to bring multiple designs to add custom support for smaller screens. If you add your desktop and mobile designs to a separate Figma section and load them in Kombai, then the generated email will switch to the mobile design when viewed on all capable mobile clients.

This feature is available to our users on the Business plan.

How does responsive design work in Kombai?

Kombai allows you to bring multiple designs based on the screen sizes you want to target. When you convert these designs to code through Kombai, the auto-generated code will include the code for both desktop and mobile designs and the necessary CSS classes to customize responsive behavior.

If the email is viewed on a device with a width less than the configured breakpoint width, then the mobile design becomes visible. Note that this will only work on those email clients that support CSS media queries. In all other cases, the larger design will be visible.

Suppose you have two different designs, 600px and 480px. When viewing on a Gmail android app running on a Pixel 7 phone, which has a device width of 412px, the email will appear similar to the 480px design. When using Gmail in the browser or in Outlook, the email will appear similar to the 600px design.

Generating emails with custom responsive behavior

Follow the steps below to generate a single HTML code for both desktop and mobile designs:

1. Create two separate designs with different widths for your email campaign in Figma. We suggest using 600px width designs for larger devices and 480px for smaller devices.
2. Place both designs in a single section. To do this, select the frames corresponding to both designs, right-click, and select Wrap in new section. Ensure that the section is not placed inside any other frame or section.
3. Run Kombai for Email plugin.
4. Select the section and wait for the code to be generated.
5. Customize the value of the breakpoint if required in App Settings. The mobile design will appear only if the device width is less than the breakpoint.

Preview responsive design

You can preview how the email will look on larger and smaller devices by selecting the device width in the preview pane(see the example below).

Customizations for custom responsive emails

If you have loaded two separate Figma designs, one for desktop and one for mobile, you can individually customize both designs for the following customizations: Manage Fonts, Customize Dark Mode, Mark Elements to Edit in ESP, Mark Sections to Replace in ESP, Convert Layers to Images.

Follow these steps to customize your email based on the screen width:

1. Go to the setting you want to customize.
2. Make all the customizations you want for the default desktop version.
3. In the Viewing Design Settings for, choose Mobile Design.
4. Make all the customizations you want for the mobile version.
5. Click Confirm.

Set Default Breakpoint

The mobile design will appear only if device width is less than the breakpoint width. We use 480px as the default breakpoint, but you can change it according to your preference.

Follow the steps below to change the default breakpoint width:

1. Go to App Settings and scroll to Set Default Breakpoint.
2. Change the default width to your desired value.

Best practices for designing for desktop and mobile screen sizes

For an optimum experience, we suggest you to keep note of the following best practices while designing desktop and mobile designs for your email campaign:

1. The desktop design should not be larger than 660px as 600px-660px is the ideal email size according to industry standards.
2. The mobile design should not be larger than the defined breakpoint, as it is rendered only on screens with widths equal to or smaller than the breakpoint width.
3. The desktop design should not be smaller than the breakpoint width, as only the mobile design is rendered on screens equal to or smaller than the breakpoint width.