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.
![](http://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/designing-mobile-friendly-emails-image-iw0jr1i3.gif)
Adding images to emails
You can insert images into your emails by adding an Image block in the email editor:
Go to the Content tab > Blocks.
Select the Image block and drop it into your email.
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.
![image(63).png](http://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image(63).png)
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).
![image(66).png](http://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/image(66).png)
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.