Best Practices & FAQ

Ascent360 Email Platform best practices and questions about the editor, settings, and most other email-related topics. Note: this applies to the Email Designer within the Ascent360 Marketing Platform, not any external email provider. With the Ascent360 Email Designer, you have an easy-to-use but powerful tool to create your emails. We know it can be overwhelming to make sure your email designs cover all bases, particularly with a wide variety of devices used to view email and the recent adoption of dark mode by many apps/platforms.

Overview: Email Design Best Practices

Following these best practices will help ensure you are able to design your emails to cover the vast array of email clients and devices being used to view emails today.

To summarize, here are some key best practices: (we have separate articles on each element below - if you want to dig deeper)

  • Email Structure – Content width is 600px and footer contains proper links/info for SPAM compliance.
  • Responsive Design – Columns stack left to right and all elements in a single row/column will stack first. Use the “Hide on” desktop/mobile feature for more complex content blocks.
  • Image Optimization – Make sure your images are sized correctly for the content section, are 2x size for apple devices and have a consistent aspect ratio so they scale to the same size when side by side. They should be under 1mb in size to mitigate load time and also contain a descriptive Alt tag and a hyperlink.
  • Dark Mode – Make sure your logo is visible in both light and dark modes and that your image backgrounds are consistent (solid/transparent). When adding in colors for your row and content backgrounds, fonts, buttons, make sure they will invert as intended and nothing will be hidden/difficult to view.

Additional email design best practices:

  • Row Background Color - should provide contrast and aesthetic appeal to the email. Again, this will not be displayed on Mobile devices.
  • Footer Background Color – Should stand out from the body of the email and typically is a different color from the row and content background colors. This typically is a primary brand color.
  • Footer Content – Always add your company contact information in the footer for compliance and legitimacy. Make sure that all emails, website info and phone numbers are active links. Any compliance language should be added at the very bottom of the footer beneath all other content.
  • Font Sizes
    • Headers/Titles (H1 Tags): 24px – 28px
    • Sub-headers (H2 Tags): 18px – 20px
    • Body text/copy: 15px
    • Buttons: 15px
  • Hyperlinks
    • Should always be a tertiary/easy to spot branded color if in the body copy so they are noticeable and easy to find/click.
    • Should always open to a new window if going to a website URL.
    • All images should contain a hyperlink.

Basic Elements of an Email Template

Email templates have specific elements built into them like the Header, Footer, Hero Image and a variety of content blocks that contain images, copy, buttons (Calls to Action or "CTAs") and other content. Here is a graphic that outlines the various elements of an email template.  

  • Email Width – Best practice for email width is 600px. This is not the width of the entire email but rather the content area of the email.  

  • Row Background vs. Content Background – The row background is on display for desktop devices only. This is not an area where any content will be placed and a color that accentuates your brand/email aesthetic is the most critical factor here. The content background is the background of your actual email content. The width of this section is determined by the Email Width setting.  

  • Header – The header is the top section of your email. This should always contain your company/brand logo. In many cases, brands like to also add in a menu here for quick access links to key pages on their website. The goal of the header is to clearly identify who is sending the email.  

  • Hero Image – The Hero Image is your most prominent image in the email and always follows the footer. This image should be related to the content of the email exactly and help tell your story. The goal of this image is to capture attention, show off your product/service and amplify the response you are hoping to create from the recipient. 

  • Content Block– Content blocks vary as this is the real “meat and potatoes” of your email. These contain your email titles/images/buttons/copy (AKA “content”) and can be formatted with a variety of layouts and aesthetics to match your brand/company. 

  • Footer – The footer is the bottom most section of your email. This should always contain your company information (Mailing Address, Phone Number, Email) for spam compliance as well as any legal or compliance statements related to your products/services that may be required. This is also the location of where links to update email preferences or to unsubscribe will be located as well.  

     

Designing Responsive Emails

All email designs built in the Ascent360 Email Designer are responsive designs. This means that they will automatically stack rows with multiple columns and adjust the layout to the device size and orientation that will be used to display the email.  However, it is still a good idea to make sure your designs render as you expect on both mobile and desktop.  

Some tips to consider when thinking Responsive Email Design: 

  • Columns always stack from left to right unless Reverse Stack Order on Mobile is enabled on the row.  Image above displays Row Properties with Reverse Stack Order on Mobile enabled (right column stacks on top of left column)
  • All content within a column in a row will stack so place all content (EG Image/Text/Button) in the same column/row to ensure proper stacking.  
  • Images for rows that have 3 or more columns will not by default display at full width on mobile. If you’d like for them to display full width on mobile, deselect the auto-width option in the content properties and select the display full width on mobile check box. 
  • Padding is critical. If you have too much padding for desktop then you will have a large gap in your mobile display. Make sure the padding for your images/text/buttons and in between rows works for both desktop and mobile. Note, you can adjust padding for both the row itself and for the content block itself. Also, you can adjust padding for each individual column in a row to align different sized content more effectively.

If you are unable to find a layout/format that works for both desktop and mobile devices, there is an option in the email designer to hide rows or specific content from displaying on a mobile or desktop device. 

  • This means you can design desktop and mobile specific content sections in your email so you get the best of both worlds. 
  • For example, if you’d like to have a menu at the top of your email you can have it formatted for desktop to be horizontal but that display won’t work on mobile. 
  • You can then create another menu that is vertical and hide that from desktop. This means you will have a menu that is optimized for whatever device will be used by the email recipient.


Reach out to the Ascent360 help desk or to your CSM for additional help.

Image Sizing & Optimization

Images are a critical part of telling your story and creating engagement with your readers, but you can't insert “any sized” images and expect them to render correctly. They also might not have the same aspect ratio as other images.  

Before importing and using an image, there are some adjustments you need to make. This is not overly complex but does involve cropping the images to a specific size/ratio before inserting into an email design.  

Optimal file size: In addition to pixel width and height, you need to consider the overall file size. It is recommended to stay below 1MB for any image or graphic file -- this will help with email load times. Smaller is always better when it comes to image file size! 

Additionally, Apple devices feature a 2x resolution on their displays. We recommend you double the intended image size so it displays optimally on Apple devices. Example: if you need a 300px (pixels) wide image, crop and save the image at 600 pixels wide. 

To determine the size of the image, consider how many columns are in the content block/row you are working on. For the Ascent360 Email Designer, this is easy to figure out based on the numeric value in the row properties of the designer. The largest value is 12 and that would be for a single column row. The row breakdown and sizing goes as follows (this table assumes the email width is 600px). 

Column Value 

Column Width (%) 

Column Width (Pixels) 

Image Width 

12 

100% 

600px 

1200px 

10 

80% 

500px 

1000px 

8 

60% 

400px 

800px 

6 

50% 

300px 

600px 

4 

33.33% 

200px 

400px 

2 

.167% 

100px 

200px 

 The image height will be dependent on the aspect ratio of the images being used. Make sure all images are utilizing the same aspect ratio so when they are side by side they are the same width/height.  

ALT Tags 

Additionally, we recommend you add descriptive ALT tags to all images in your emails as well. These tags can be used to identify what the image is without the user downloading/viewing the image on their email client and they also assist visitors that require assistive software like screen readers or other text to speech software that read the page contents aloud to the user.  

Tips for Alt Tags: 

  • Every image should have an Alt Tag unless the image is strictly decorative 

  • The Alt Tag should describe the information of the image, not the image itself 

  • If the image has information in it, the Alt tag should also have this descriptive information 

All images and buttons within your email should contain a hyperlink so they link out to relevant content. Consider linking some text content as well. 

Background images are not recommended as many email clients cannot properly render the code for and end up displaying a solid color instead. If you want to create an image with text overlay, this should be done outside in photoshop or a program like Canva. The text will not wrap or scale with the image since it is not a live text overlay.  

Designing Emails for Dark Mode

Dark Mode is an inverted app display where the background of the app is black instead of white and the text is white instead of black.

This feature is designed to reduce blue light exposure while also saving battery life. It is becoming increasingly popular amongst both desktop and mobile apps and email clients. With adoption of Dark Mode becoming more prevalent, it is critical to make sure you understand how your email may be impacted and how to optimize your emails for display in both light and dark modes.

Email clients (such as Gmail, Yahoo, etc.) render emails in dark mode differently. Some do not change the email contents at all while others invert all background colors and text. In some cases, an email featuring a black background may remain black in some email clients and in others may revert to a white background instead. To counter this, create a test list that includes multiple devices types and email clients -- to view how the email looks across a multitude of devices.

Focus on your email subscribers’ most commonly used devices/email clients, as those are most critical. It is not possible to design for all the iterations but it is critical to make sure the most popular amongst your email list are considered.

General tips for optimizing your emails for Dark Mode:

  • Images – Images are never modified for dark mode and will always display as intended.
  • Images/Icons - JPG vs PNG format – JPG images always have a solid background whereas a PNG file can in fact be displayed with a transparent background. Thus, a JPG image with a white background will display in dark mode with a white background as well. A transparent PNG will display the content background color so it is a good idea to ensure whatever content is in the PNG can display effectively on a darker background. There is no wrong way or right way here it is really a matter of your brand’s preferences and how you feel it best to display your products.

Product Image - Transparent PNG vs JPG w/ Solid Background:


Graphical user interface, website

Description automatically generated


Graphical user interface, website

Description automatically generated


Logo – Transparent PNG vs JPG w/ Solid Background:


A picture containing text, sky, outdoor, nature

Description automatically generated


TIP: For darker logos using a transparent PNG, place an outline around the image so it displays properly on dark mode. 

A picture containing text, outdoor, nature, mountain

Description automatically generated

  • Background Color – The background is the primary change in dark mode where the white background inverts to black. You can control the variation of the color changes here. White will invert to black for example but a light gray will render out as a dark grey or charcoal. The same principle will apply to all color variations so darker colors will display lighter on dark mode and lighter colors will display as darker.


Example of background color inversion:

A picture containing text, outdoor, mountain, nature

Description automatically generated

A picture containing text, outdoor, nature, mountain

Description automatically generated

  • Text Color - Text will follow the same guidelines as the background colors. It is best to use black or darker greys for text so they invert with good contrast on dark mode. Links can feature more branded colors so they still stand out as expected.


Example of text color inversion:

Text, email

Description automatically generated

Text

Description automatically generated

  • Buttons – Same principles apply to buttons as well for both the text and button background colors. Best advice here is to make sure your button background color and text have good contrast and the text is highly visible.


Examples of Button Color Inversions: 

A picture containing text

Description automatically generated




Text

Description automatically generated with medium confidence


A picture containing text, screenshot, person

Description automatically generated

A picture containing text, person, electronics, screenshot

Description automatically generated

Are email messages mobile-ready (responsive)?

What Responsive Design Means

Responsive design is a method used to adapt the way the message is displayed to the device in use. Mobile devices are smaller than desktop or laptop computers, and therefore you need email messages (or web pages) to adapt to the different width. When this happens, the text becomes easier to read, buttons and links are easier to click on, and images become as wide as the device allows them to be.

Things are more complicated in email compared to the web because, instead of a few browsers that are increasingly complying with shared standards, we are dealing with a vast array of email clients (Outlook, Gmail, AOL, etc.) that don't appear to like following a common standard at all.

More and More Responsive

Let's look at how responsive design works in email.

Not responsive

This is a standard message hand-coded with no mobile optimizations.

Here is how it looks in a desktop email client:

 

And here is the same message opened on a mobile device:

We have exactly the same message in desktop and mobile. Great, isn’t it?

Not really. If you tested the message on a mobile device you would notice how hard it is to read (text too small), how difficult is to click a button or a link (too small for the finger to click on it)... and you'd find yourself needing to zoom in all the time. Not an ideal situation.

Adding responsiveness

With the first version of our email editor we implemented the most common responsive design best practices, which allowed us to optimize the messages for popular email clients as iOS Mail, Android Mail, and Windows Outlook.

Here is the same message, built with editor v1 and displayed on an iPhone:

Now our message is not only beautiful but easy to read on many mobile devices.

But not when we use Gmail on our phone:

Gmail does some things somewhat differently, driving email designers nuts along the way. The most common techniques - using what are called "media queries" - don't work.

Since Gmail is extremely popular, however, we needed to find a solution.

Editor v2 - Beautiful and responsive on Gmail too!

With the new version of the email editor, we completely reworked the HTML code created by the editor so that email messages would be fully responsive on Gmail too.

Here is the same message, rebuilt with editor v2 and sent to Gmail:

The result is a readable email, with buttons and links that are easy to click on and no horizontal scrollbars.

As you can see, there are some differences between this version and the one shown in other mobile clients: images don’t use 100% of the screen width, and sometimes on larger devices, some of the design elements are rendered a bit differently.

This is caused because we need to use 2 different approaches, one for Gmail and another one for all the others.

Still, the message provides a good user experience for both readers.

Technically Speaking

For those of you that are more technical: editor v2 uses the fluid hybrid design technique, enhanced by media queries.

  • Hybrid fluid design allows responsiveness across email clients, including the Gmail app.
  • Media queries allow us to add additional design optimization on those email clients that support them.

For more information on these topics, see for example:

Note that in the email design world, the term "responsive design" is often strictly associated with the use of media queries.

On this website, however, we talk about "responsiveness" in a more general way, referring to the ability to the email message to adapt to the device in which it is displayed, regardless of the technique used to do so.

Which email clients are supported?

We tested these email clients using internal test tools and email preview services as Email On Acid and Litmus.

Fully supported

All the options work properly. Fallback elements show for image backgrounds and web fonts.

 Desktop

  • Apple Mail 8, 9 & 10
  • Thunderbird
  • Airmail2
  • Microsoft Outlook for Mac 2011, 2016
  • Microsoft Outlook for Windows 2007, 2010, 2011, 2013, 2016 *
* Background images and web fonts are not supported

Mobile

  • Android 4.4 Mail
  • Gmail App (iOS)
  • Gmail App (Android)*
  • iOS Mail (iPhone & iPad)
  • Outlook App (Android & iOS)**
  • Samsung Mail App (Android)
  • Yahoo App (Android & iOS)
* When using a Gmail account
** Will show the desktop version when using Microsoft email accounts

Web

  • Gmail
  • G Suite
  • Inbox by Gmail
  • Outlook.com
  • Office 365
  • Yahoo
  • AOL Mail
  • Comcast
  • freenet.de
  • GMX.de (web version)
  • Mail.ru
  • Libero Mail
  • Tiscali
  • Virgilio
  • email.it
  • Web.de (web version)
  • Centrum.cz
  • Seznam.cz, Post.cz, Email.cz

Note: none of the above services supports web fonts

Partial support for some options

Messages display correctly, but some options (with low impact) may not display as expected.

Desktop

  • Microsoft Outlook 2013 in high-resolution displays *
  • Microsoft Outlook 2016 in high-resolution displays **
  • Microsoft Outlook 2000, 2002 & 2003 ***
    * Background images and web fonts are not supported. Applies a font resize that may expand the layout.
  ** Background images and web fonts are not supported. Applies a font resize that may expand the layout. The text is scaled at 200% by default in some devices.
*** Web fonts are not supported. Buttons don't display round corners. Social icons are not flexible.

Mobile

  • Huawei Mail App (Android) *
* Icons in social content block appear vertically stacked (tested on app version 3.1.0.27)

Web

  • qq.com *
  • Yandex.ru
  • Naver **
  * Buttons doesn't display properly.
** Minor glitches on separators

Not yet supported

This list includes new and updated mobile email clients with compatibility issues.

  • Huawei Mail App (Android)

Only basic settings works

When sending to this clients, we recommend using text and images in a simple one-column layout.

Desktop

  • Lotus Notes 7, 8 & 8.5
  • Windows 10 Mail
  • IBM Notes 9

Mobile

  • Gmail App using IMAP accounts
  • Web clients (mobile versions)

Web

  • T-online.de

E-mail servers

Some email servers alter sent email code.

Server type

Code changes

WebDav / Deltasync protocols

no
Normal POP/IMAP protocols

no

Microsoft Exchangeno, but there could be installed filters that do change the code
IBM Domino

yes, removes unsupported HTML elements to Lotus Notes

(Such as OBJECT, IFRAME, FRAME(SET), SCRIPT)

My forwarded email does not work - how to avoid this behavior

When a recipient forwards your email message, it's the email client that's responsible for the HTML rendering. So it's not your ESP or sending platform. Some email clients (such as Outlook) may not render the HTML correctly, which is a known limitation in email marketing.

This can include stripping out certain HTML elements, wrapping your email in a blockquote, or inserting extra lines of codeAll of which can break your design and make the email less functional for the recipient of the forwarded email.

There is very little we can do to completely avoid changes to your design when a subscriber clicks on the forward or reply button. 

rawpixel-651365-unsplash.jpg

What should you do when a forwarded email breaks?

Here's the bad news first: it's impossible to completely avoid that your email changes once forwarded. Whether an email client alters your code isn’t something you can control.

Yet, there are some workarounds you can take to optimize your emails.

  1. Keep your email design simple. While it doesn’t work for everyone, simpler layouts (e.g. single-column) typically hold up a little better when forwarded. If your email is less complex, there is less that can go wrong.
  2. Ask your CSM about a forward to a friend form, you can add the forward to a friend form link in your email message. 

Hope this helps! Let us know if you have any questions.

Why aren't my Social Links working in emails?

For some ISPs email links to social require full links.  To be safe it is a best practice to include the https://www. for all social links.  For example for Ascent360s Facebook page we would include the link, https://www.facebook.com/ascent360

Holiday Email Marketing Best Practices

  1. Choose your subject lines carefully. With more emails flooding into inboxes this time of year, subject lines can make or break your open rate – and your campaign success.
  2. Spend extra time testing and proof-reading. Make sure you thoroughly test how your email appears in multiple email clients across mobile and desktop. If you’re using personalization or dynamic content, test that as well. The more time spent up-front, the less room for error.
    • A test list should have multiple emails that go to desktop/mobile and different email clients (i.e. Gmail, Outlook, Hotmail, etc.). Learn how to create a test list here.
  3. Plan out your messaging. If you have a sale on a certain day, work backwards. When do you want to let people know about it? Will you have a follow-up email to remind people about it? Stay organized this holiday season by carefully planning your email sends, social ads, or direct mail campaigns. Create deadlines for when you want to have:
    • the creative content finished
    • the audiences/segments finalized
    • the email or advertisement scheduled
  4. Add extra time for your email to be deliveredWith high volumes to process, some ISPs will throttle the speed at which emails are delivered to the inbox. To account for this, make sure to add a couple hours of “padding” from when you hit the send button to when you must have it in the inbox. 
  5. Use holiday imagery, graphics and themes in your creative. Capture the spirit of the holidays in your email designs to bring out that holiday shopping excitement.  
  6. Create segments to speak to people where they are. It can be as simple as creating one version of an email for existing customers and a second version for prospects (people who haven’t purchased yet). If you’re new to segmentation, start small. People are more likely to engage with your messaging if it is more unique than a “one size fits all” message.
    • Sample segment: Past Holiday Purchasers (Transactions from previous years during holiday season) vs Non-Holiday Purchasers (Zero transactions from previous years)
      •  Offer greater incentive to non-holiday purchasers to buy now
      •  Standard promos to past holiday purchasers
  7. Remove your unengaged subscribersHolidays are not the time to try to reengage the unengaged.   Limit your audience to active subscribers only for better results. This will also limit issues with email deliverability.

We are here to help if you need help creating segments, scheduling emails, or have general questions about best practices. However, since we receive an influx of requests during the holiday season, we recommend engaging with us as early as possible. 

Holiday Coverage - during office closures, we have limited staff monitoring our help desk. Only urgent issues will be addressed; everything non-urgent will be addressed the next regular business day. Please utilize the best practices above to ensure success for your marketing campaigns this season.

December 2021: Ascent360’s office will be closed Friday 12/24 and Friday 12/31.