Designing Mobile-Friendly Emails in Yotpo Email

Creating emails optimized for mobile devices is crucial for engaging your audience and delivering a seamless customer experience. Well-designed mobile emails enhance readability, helping you get the most out of your marketing campaigns.

The Yotpo Email editor is designed to streamline the process and allow for maximum flexibility when customizing your messages.

In this article, you’ll learn how to use the email editor to create emails for mobile devices.

Email Editor Overview

Yotpo’s email editor supports responsive design by default so that your emails automatically adjust to various screen sizes. This eliminates the need for customers to zoom in or out, offering smooth navigation through your content. However, since some email apps and devices may not fully accommodate responsive design, it’s important to make sure your emails are styled to display correctly on mobile.

Important

We recommend keeping the Responsive design toggle in the editor’s Styles tab on for optimal responsiveness. If you turn it off, your emails will appear on mobile devices exactly as they do on desktop. In case you’d like certain elements to remain the same across both mobile and desktop, the editor allows you to adjust them accordingly. For more information, see Responsive Design.

The email editor is organized to help you easily define the email design settings and add content. In the Styles tab, you can adjust the overall appearance of your message. From the Content tab, you can drag and drop content blocks into your email template and customize them individually.

Tip

To learn how to add content to your email and style it, see Customizing Emails with the Email Editor.

Accessing the Email Editor

To create an email, open the email editor.

Customizing the Responsive Design of Your Emails

After adding content to your message, the next step in designing a mobile-friendly email is configuring the responsiveness settings—essentially, how the email adapts to the device it’s opened on. By default, all email templates are mobile responsive. However, you can turn off responsiveness for specific elements such as layouts, images, and menus, ensuring they appear the same on both desktop and mobile.

Responsive Design

The Responsive design toggle controls the overall appearance of your message. To manage this setting, go to the Styles tab > General settings and scroll to the Responsive design toggle.

Keep in mind that if the Responsive design toggle is turned off, your email might not display correctly on mobile devices.

Responsive Layout

When you add a layout with at least 2 containers, you can choose how they appear on mobile devices: either stacked one below the other when the toggle is on or arranged in a single row when the toggle is off. To manage this setting, hover over a layout, click it, and scroll to the Responsive layout toggle in the left sidebar.

Keep in mind that if the Responsive layout toggle is turned off, containers will display in a single row on mobile devices. This may affect the appearance, particularly if text size or other design elements are not optimized for smaller screens.

Responsive Image

One of the most crucial aspects of designing mobile emails is ensuring that images are rendered correctly on various screen sizes. When you add a block containing an image, such as an Image or a Logo block, in the left sidebar with the styling options, you’ll see the Responsive image toggle that is activated by default.

When the Responsive image toggle is turned on, images automatically adjust to fit the width of the screen on mobile devices, ensuring they are easy to view.

If you turn off this setting, images will remain at their original size and alignment, which could result in a less optimal display on smaller screens. Use this option if you want to maintain precise image dimensions, but keep in mind that it may affect readability and the overall mobile experience.

Tip

If the Responsive image toggle is off and an image isn’t resized proportionally, you can fix the issue by editing the code when the image was added using HTML. Simply click the HTML block in the email to open the code editor, then add class="adapt-img" before the image source (img src).

Adaptive Menu

The Menu block adds a horizontal list of links. When the Adaptive menu toggle is turned on, the links are displayed in a stacked, vertical list. This layout allows customers to view the entire menu without scrolling, making it easier to navigate longer menus or items with longer names. To manage this setting, click the Menu block in the workspace and scroll to the Adaptive menu toggle in the left sidebar.

By default, the Adaptive menu toggle is deactivated, meaning menus remain horizontal, just like they appear on desktop. This layout works well for shorter menus with 2-3 items and brief names that are still easy to read on smaller screens.

Tip

For a seamless user experience, we recommend turning on the toggle if your menu includes several items or longer text.

Responsive Spacer

The Spacer block adds a decorative line to help organize and improve the visual structure of your message. When you hover over a spacer in the workspace and click it, in the left sidebar, you’ll see the Responsive spacer toggle which is activated by default.

When the Responsive spacer toggle is turned on, the line’s width will adjust to fit the screen on mobile devices overriding the block’s Width and Alignment settings.

Hiding Elements

The Yotpo email editor allows you to hide specific elements, such as layouts and blocks, from the desktop or mobile version of your email. To manage this setting, click an element in the workspace to open the left sidebar, then scroll to the Hide element section.

Important

The elements will be hidden only in email apps that support media queries—a type of code used to apply different styles depending on the device or screen size. If an email app doesn't recognize media queries, the hidden elements will still be visible to the recipient.

Tip

We recommend hiding elements only when absolutely necessary, as it can increase the email's size and potentially cause Gmail clipping issues.

If an element is hidden, it will have an orange hide/show icon in the top right corner.

Mobile Formatting

It's essential to format your messages properly for mobile devices. To access the mobile customization options, click the Styles tab and select Mobile. These settings will apply to the mobile version of your email.

To ensure your emails are legible across all devices, you can adjust the text size in the header, content, footer, and info area sections, as well as in Menu blocks. You can also customize the size and alignment of headings in Text blocks. Adjusting the font size for mobile devices is essential, as the default desktop settings may result in text that appears too large on mobile.

For buttons, we recommend using a minimum font size of 18px for optimal readability. Additionally, turning on the Full-width buttons toggle ensures that buttons automatically expand to fit the mobile screen, providing a cleaner, more user-friendly appearance.

The Content margin toggle allows you to define the spacing around your content. Turn it on to set the parameters that would best suit your design.

Best Practices

Follow these best practices to optimize your emails for different email apps and mobile devices.