A mobile-responsive email is an email that adjusts and displays properly on various screen sizes, including smartphones and tablets. Non-responsive emails might display incorrectly, leading to user confusion. Making sure that your email design is mobile-responsive is crucial, as around half of emails are opened on mobile devices. It ensures readability across different devices, preventing users from zooming in or out to view content. 

To simplify this task for you, we automatically adapt your email designs to mobile devices: elements such as images, text, and buttons are automatically scaled and rearranged to fit mobile screens. However, you can always optimize this default email design for mobiles by using the different options from our mobile mode preview and following our tips to give your recipients the most optimal experience. 

Good to know

• Ensure you understand the difference between section and content blocks.
• Learn how to effectively design your email for the dark mode setting, as it is often activated on mobile devices to prevent eye strain and save battery life. To learn more, check our dedicated article Design dark mode-friendly emails.

💡 Tips for mobile-responsive emails

• Keep it simple with a single-column layout
  Modify your content layout to avoid overloading your email layout. Mobile screens have limited space, and having too much content can be ineffective.
• Use square or landscape image
  For your images, it is recommended that you use square or landscape formats, as they are smaller than portrait ones. Also, ensure the pixel size of your image does not exceed mobile display sizes.
• Avoid large content
  Resize your content, especially if you have large images or logos when viewed on mobile. Keep your images width between 400 and 650 pixels; a 400-pixel wide image is the smallest size required for a full-width display on a mobile device. You can also increase the size of your buttons to boost clickability. We recommend that you test your emails before sending them to your recipients to check the size of your content and ensure they are suitable for mobile devices.
• Implement alt text in the image or logo
  For your image, it is recommended to add alt text, which is the textual description that appears when an image or logo fails to display in an email or when the recipient has blocked the image. It is also highly recommended as it enhances the accessibility of your content for those using screen readers.
  ➡️ To learn more, check our dedicated section in the article Use content blocks (Text & Links, Image, Button, etc.).

📱 Optimize your design for mobile

When designing your email from the Drag & Drop Editor, you can view and edit the default email design for mobile devices by clicking the mobile icon at the top-right of your screen:

We offer different possibilities to edit the default mobile version of your email design and choose how you want your content to display on mobile devices:

• Adjust your email to full width,
• Edit your content layout,
• Hide your content for desktop or mobile devices, or
• Resize content. 

Adjust your email body to full-width

Use the Full width on mobile option to extend the size of your email body to the full width of mobile devices. This is recommended to enhance the readability of your email:

1. Click the mobile icon at the top of your screen to access the mobile mode.
2. Click Style on the left of your screen.
3. In the Template section from the left panel, activate the Full width on mobile option.

Modify your content layout

For each section, you can choose the alignment and orientation of your content. Align it vertically to enhance readability or horizontally to conserve space. The orientation you choose will depend on the type of content you want to display. To help you choose how to display your content on mobiles, here are some examples of do's and don'ts:

	✅ Do	❌ Don't
Vertical alignment
Horizontal alignment

If the orientation of your content in the default mobile version of our editor doesn't suit you, you can edit it:

1. Click the mobile icon at the top of your screen to access the mobile mode.
2. Select the section for which you want to change the orientation.
3. In the left panel, select the content orientation desired:
   1. Align vertically, click the arrow pointing down.
   2. Align horizontally, click the arrow pointing right.
4. If you choose to align your content vertically, you can also swap it to reverse the order of your section content. This will display your text before the image, or vice versa, for example.
   To do so, activate the Swap content option from the left panel:
   

Hide a section or content block

Hiding a section or content block on mobiles helps reduce long content, create a minimalist design, and avoid email overloading on mobile. You can choose to transfer what you find most useful and important to mobile mode and hide non-essential content. To learn how to hide a section or content block on mobile devices, check our dedicated article Show or hide content based on device type.

Resize your content

The loading speed on mobile devices is slower than on desktops. Resize your buttons or images to allow your emails to load faster on mobile devices:

1. Click the mobile icon at the top of your screen to access the mobile mode option.
2. Select the button or image you want to resize.
   
3. In the Width section from the left panel, enter the width you desire for your content. You can change the size in percentage or pixels by clicking the drop-down next to %.
   We recommend keeping your image width between 400 and 650 pixels.

⏭️ What's next?

• Design dark mode-friendly emails
• Send test emails

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.