main logo 2

Blog

Email Design Best Practices: A Comprehensive Guide for Developers

Email design banner

Making an email stand out requires more than just interesting content and captivating images. As a developer, you need to think about technical things like best practices for coding, design features, image usage, content-to-image ratio, and how the email looks on different devices. For those who are interested in coding, the following is a comprehensive overview of the best practices for email design:

1) Coding Best Practices

Using CSS: Use all styles using internal & inline CSS, as email clients does not support external stylesheets.

Table-Based Layouts: To ensure uniform rendering across email clients, use table-based layouts. Use <table> tags with proper widths and padding for alignment.

Avoid JavaScript and Flash: Most email clients does not support / block scripts and Flash. Keep your email functional in the absence of them.

Fallback Fonts: Use web-safe fonts (Arial, Verdana, Georgia, and others) and add a stack of fonts that can be used if the main fonts don’t work.

Responsive Design with Media Queries:
  • Utilize media queries to create mobile-friendly emails.
  • Example:
				
					@media only screen and (max-width: 600px) 
{ 
    .responsive-table 
    { 
        width: 100% !important; 
    } 
}

Alt Text for Images: For better accessibility and to convey the information in the event that images do not load, it is essential to always add informative alt text.

2) Design Elements

Consistent Branding: Use your brand colors, logo, and typography for recognition.

Hierarchy in Content:
  • Use a clear structure (Header, Body, CTA).
  • Highlight important sections using bold text or contrasting colors.

Whitespace: Ensure sufficient spacing between sections for better readability and a clean look.

3) Image Usage and Optimization

Optimize File Size: Compress images to reduce the overall email size while maintaining quality. Tools like TinyPNG or ImageOptim are helpful.

 

Formats: Use JPG or PNG for standard images and GIFs for animations. Avoid heavy GIFs; try to keep them under 1MB.

 

Image Dimensions: Use images with a maximum width of 600px to fit most email clients. For retina displays, use 2x resolution images.

 

Image-to-Text Ratio: Maintain a 60:40 ratio (text to images) to avoid spam filters. Ensure the email is still informative without images.

4) Rendering on Different Devices

Test Across Clients and Devices: Use tools like Litmus, Email on Acid, or Mailtrap to preview your email on various devices and clients (e.g., Gmail, Outlook, Apple Mail).

 

Fallbacks for Unsupported Features: Some clients like Outlook don’t support advanced CSS (e.g., rounded corners, gradients). Use simple designs with fallback styles.

 

Font Rendering: Web-safe fonts are recommended as not all email clients support custom fonts.

 

Below are some code examples to render the curved CTA and background images in Outlook.

 

Add below code in the <head> section to have the images rendered properly in outlook with different DPI’s.

				
					<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
Example for Curved CTA
				
					<!-- BUTTON -->

<table border="0" cellpadding="0" cellspacing="0" style="width:100%;" width="100%">
<tr>
<td class="" align="center" style="">

<!-- CTA | DESKTOP AND MOBILE -->

<p class="" style="font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 18px; line-height: 20px; font-weight: normal; margin: 10px 0 10px 0;">

<!-- Generic CTA -->

<!--[if mso]>

<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="v-text-anchor:middle; width:200px; height:40px;" arcsize="80%" strokecolor="#ED7766" strokeweight="2px" fillcolor="#ED7766">

<w:anchorlock/>
<center style="color:#0E1941; font-family:sans-serif; font-size:28px; font-weight: bold;">
<![endif]-->
<a class="" style="background-color:#FFFFFF; border:2px solid #000000;mso-border-alt:none; border-radius:50px; color:#000000; display:inline-block;font-family:sans-serif; font-size:14px; line-height:40px; text-align:center; text-decoration:none; -webkit-text-size-adjust:none; font-weight:700; width:200px;" href="#">CTA Button</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</p>

<!-- end /CTA | DESKTOP AND MOBILE -->

</td>
</tr>
</table>

<!-- BUTTON -->
Example for hide and show image
				
					@media only screen and (max-width:599px) {
.hide { display: none !important; }
.expand { width: 100% !important; display: block !important; }
}

<!-- Image -->

<table border="0" cellpadding="0" cellspacing="0" style="width:100%;" width="100%">
<tr>
<td valign="bottom">
<!--[if mso]>
<img loading="lazy" decoding="async" class="hide" src="images/desktop_banner.png" width="270" height="268" style="width: 270px; height: 268px; font-size: 0px; line-height: 0px;" alt="desktop_banner">
<![endif]-->

<!--[if !mso]><!-->
<img decoding="async" class="expand" src="images/mobile_banner.png" width="" border="0" style="display: none; font-size: 0px; line-height: 0px;" alt="mobile_banner">

<img loading="lazy" decoding="async" class="hide" src="images/desktop_banner.png" width="270" border="0" height="268" style="width: 270px; height: 268px; font-size: 0px; line-height: 0px;" alt="desktop_banner">

<!--<![endif]-->

</td>
</tr>
</table>

<!-- Image -->

5) File Size Optimization

Why File Size Matters

 

  • Loading Time: Emails that load quickly improve the user experience, especially on mobile devices with slower connections.

 

  • Spam Filters: Large emails may be flagged as spam or fail to deliver.

 

  • Email Client Compatibility: Some clients truncate emails exceeding size limits (e.g., Gmail truncates at ~102KB).

 

  • Keep Emails Under 100KB: Heavy emails may trigger spam filters or slow down loading times.

    Reduce unnecessary code, compress images, and avoid embedding videos or excessive media.

 

  • Minimise Code: Remove redundant spaces, comments, and unused styles to keep the email file lightweight.

Conclusion

An effective email design strikes a balance between aesthetics, functionality, and technological optimization. Following these coding best practices ensures that your emails are lightweight, visually beautiful, and render reliably across all devices and email clients.

Follow AgileSpace Digital for more of these curated topics and content based on our expertise and experience. We are committed to creating and sharing insightful information for marketers and the marketing community.

Recent Posts
AgileSpace Digital
Services
Teams
Resources
Partners
Work
Careers
About Us
whitelogo
Services
Teams
Resources
Partners
Work
Careers
About Us

Privacy Policy      

Linkedin Youtube-square Facebook-square Pinterest-square

© 2025 AgileSpace Digital