Go to ortto.com
Home Campaigns Email Emails Best practices for email design

Best practices for email design

Overview

When it comes to email campaigns, it's essential to follow best practices in email design. From image formats to email size, every detail matters. In this guide, we'll walk you through the most important aspects of email design to ensure your messages are visually appealing, functional, and optimized for performance.

Best practices

Optimal email width

The ideal width for an email is generally around 600 to 650 pixels. This width is widely considered the standard because it ensures that emails display properly across a variety of devices and email clients, including both desktop and mobile. Emails that are wider than 650 pixels can cause users to have to scroll horizontally, which can be inconvenient and lead to a poor user experience.

Adjusting the email width (Click on the GIF to maximize it)

Image-to-text ratio

A good email design balances visuals and text to ensure readability and deliverability. An image-to-text ratio of approximately 40:60 is recommended. This means 40% of your email should consist of images, while 60% should be text. This balance not only makes your email more visually appealing but also helps avoid spam filters, which often flag emails that are too image-heavy.

TIP: Test your email with a tool like mail-tester to view the percentage of text in the email.

Email file size

Many email clients, including Gmail, clip messages that exceed 102KB in size. This means recipients must click View entire message to see the full email, which can disrupt the user experience. To prevent this, keep your entire email under 102KB.

Example of a clipped email in Gmail

NOTE: When a message gets clipped, the Gmail mobile may stop using its mobile-responsive design and instead show the email in desktop view. This change may also reveal any sections that are set to be hidden on mobile.

TIP: Test your email with a tool like mail-tester to view the weight of your email.

Best image formats

Choosing the right image format and size is key to ensuring your emails look great and load quickly. Use JPEG or PNG formats for images, as these are widely supported across all email clients. JPEG is ideal for photographs, while PNG works best for graphics with transparent backgrounds and logos.

NOTE: While the maximum allowed file size you can upload is 10MB, we recommend compressing your images as much as possible to ensure quick loading across email clients and networks.

Custom fonts

TIP: Gmail does not support custom fonts, which can lead to the loss of button colors and images. To ensure your email design remains intact across different email clients, use more common fonts.

Avoid unsupported code

It's important to note that email clients operate very differently from web browsers. Unlike websites, which can support a wide range of code, most email clients do not fully support JavaScript or advanced CSS features. This means that interactive elements, such as forms or content powered by JavaScript, will either not work or could even break the email layout entirely. To ensure that your emails function properly across all email clients, it's best to stick to widely supported HTML and CSS.

NOTE: If you use the HTML component in our drag-and-drop builder, be sure to use only inline CSS, as other methods are not supported.

TIP: If your goal is to encourage recipients to submit a form, it's best to include a button or link that redirects them to a landing page where the form is embedded. By doing so, you ensure that the form works correctly. On the landing page, you can easily use Ortto's capture widgets to track and sync submissions to Ortto.

Display issues with Outlook

While the recommendations provided above are generally effective across most email clients, Outlook often presents specific display challenges.

Learn more about common display issues with Outlook.

In addition to the recommendations provided above, we suggest exploring the following additional resources:

  • Litmus: Test your emails thoroughly across different email clients before sending them to your contacts.
  • Mail-tester: Test your emails for deliverability and overall quality before sending them out. You will receive a detailed report highlighting potential issues, including spam score and suggestions for improvement.