Designing Mobile-Friendly Emails

In the age of smartphones, crafting mobile-friendly emails has become paramount.

In this article, you’ll learn about responsive design principles and best practices for creating emails that shine on small screens.

How it works

Responsive design ensures that emails adapt to various screen sizes, delivering a seamless user experience. It eliminates the need for users to zoom in or out, making navigation smooth and content easily digestible. The email editor within Yotpo Email’s campaign builder seamlessly incorporates responsive design by default, ensuring your emails look great on any device.

Please note:

Responsive design is activated by default in the email editor. You can toggle this feature in the Appearance tab > General Settings.

However, we strongly recommend not relying solely on responsive design. Some email apps and devices don't support it, making basic mobile-friendliness essential.

Mobile formatting

When email apps and devices don't support responsive design, mobile formatting is required.

The mobile formatting settings can be found in the email editor’s Appearance tab > Mobile formatting. These settings will be applied to the mobile version of your email and will override the desktop settings you have set.

Important:

Make sure to check the mobile formatting sizes to avoid extremely small or large fonts or elements.

Formatting specific settings for mobile

When editing your email, you will notice that some settings have a mobile phone icon next to them. Click it to change this specific setting for a mobile format or hide it completely. For example, you can add padding to an element on the desktop version but remove all padding for the mobile version of your email.

Adding images to emails

You can insert images into your emails by adding an Image block in the email editor:

1. Go to the Content tab > Blocks.

2. Select the Image block and drop it into your email.

3. Make sure the Responsive image toggle is activated. This will guarantee the image will be displayed correctly on mobile devices which support responsive design.

   

If the Responsive image toggle is not activated, images may not be resized proportionally.

If you have used an HTML block to add an image, you can also edit the code to fix the issue. Simply click the HTML block in the email to open the HTML editor and add class = “adapt-img” before the image source (img src).

Previewing mobile version

Always preview how your email looks on mobile devices. You can do that by clicking the Preview button in the top right corner and clicking the mobile version.

Best practices

Follow these best practices when crafting emails to account for variations in email providers or mobile devices.

Content

• Keep subject lines under 30 characters for complete visibility on mobile

• Utilize pre-header text (under 30 characters) to enhance inbox previews

• Make content easy to read and concise for users on the go

• Consider mobile-specific content for your audience

• Be mindful of connectivity issues; minimize large files and images

Template design

• Prefer one-column layouts for mobile-friendliness

• Position key information and calls to action on the left

• Prioritize ease and speed of use over excessive design elements

Usability

• Use large, touch-friendly buttons for main calls to action

• Incorporate white space to enhance link visibility

• Understand that mobile users instinctively scroll downward

Onward journey

• Ensure linked landing pages and websites are mobile-friendly

By following these responsive design principles and best practices, you'll enhance your email marketing's effectiveness, ensuring a seamless experience for your mobile audience.