hyMail
      Back to home
      1. Hyly AI Help Center
      2. Account & Setup
      3. hyMail

      How do I get started with designing custom email templates?

      Concept Summary

      • When designing an email that will be converted into a Hylet, there are three main guides that you should always follow: 1.) Personalize Your Design, 2.) Make your email scalable, and 3.) Focus on a single Call-To-Action link.
      • Last year, the majority of the people who opened their emails did so by using a mobile device. Therefore, you need to make the design of your email template work on a mobile format since that is most likely where the majority of your audience will open it.
      • Scalable Design is the best design when you are creating an email template because then your team will only have to create one simplified template, and it will work on any email client.
      • Most of the emails you will be creating will have the goal of engaging your customers or prospects. Therefore, these "Conversion-Focused Emails" should only use one CTA.
      • There are also additional "Dos" and "Do Nots" when you are creating multifamily email templates: DO make your template 600px wide; DO NOT create your email with a Responsive Design; DO design your template with horizontal slices in mind; DO use fonts that are email safe.
      When you are creating an email that will be converted into a Hylet, these are the guidelines you should keep in mind:

      1. Personalize Your Design 

      According to this report on Personalized Email Marketing, Email personalization is a dynamic way to deliver individualized content to your customers based on their data. Experian reports that not only has personalization proven to lift transaction rates and revenue, but personalized promotional mailings also have 29% higher unique open rates and 41% higher unique click rates.

      2. Your Email Is Scalable, Not Responsive

      When a person views an email from their Email Client as opposed to viewing it from their web browser, there are multiple factors that can interfere with the formatting and design of your email. For example, certain clients can support external fonts, but others might not be able to. Likewise, if you create an email with a Responsive Email Design, not all email clients - such as Outlook - might be able to support that.
       
      Because of this, it is best to create your email templates using the Scalable Design. With Scalable Design, you only need to create one template with no extra coding to adjust the email's tables or images. Although there are design limitations, such as restricting the visuals to a single-column layout, emails with Scalable Design are viewable on all devices and are easy to implement and test.
       multifamily-guidelines-scaleable-email-design-1

      3. Focus On A Single CTA

      If most of your emails have the goal of engaging your customers or prospects (these are called "Conversion-focused Emails"), it is best to use only one call-to-action. For example, if the email you are sending out showcases available floor plans, have all of your clickable links redirect to your "Schedule A Tour Page." These types of emails also work best with a template design that has a single panel.
       
      multifamily-guidelines-conversion-focused-email-examples
      Alternatively, if you are creating emails that are informing your customers or prospects (these are called "Informational Emails") such as showcasing what features/ amenities an apartment has, you can create a template that has multiple panels. In this case, it is all right not to follow the single call-to-action rule since each panel will focus on one specific topic.
       
      multifamily-guidelines-informational-email-examples
       

      4. Design Your Template 600px Wide

      To ensure that your emails will be easily readable on a phone, ensure your email template has a width of 600px. Although wider emails have an aesthetic appeal, they do not retain their legibility when viewed on smaller and mobile devices.

      5. Design Your Template In Horizontal Slices

      When creating your email, keep in mind that it should consist of horizontal slices that can be coded as their own HTML block. Emails that have angled or multi-column designs may look aesthetically pleasing for a page-based email but are not practical when you are creating an email that will be coded into a Hylet, especially when it is being viewed on mobile.

      6. Use Email Safe Fonts

      Despite their limitations, web-safe fonts will show up across all operating systems and email clients without the text reverting to an unsightly default serif text. The following image below is what  MailChimp considers the best fonts to use for your emails and organizes them into their own typographic categories:
       
      multifamily-guidelines-safe-fonts
       
      If you have to use external fonts, it is best to convert the text into a graphic, which will then be rendered. However, we recommend that you only do this with fixed assets, such as a tagline, slogan, etc. Otherwise, your marketing team will spend time creating a graphic when it can be automatically done using an email-safe font.

      Recommendations for email template design:

      1. No Background Images
        There should not be any background image or background pattern to any of the email elements. Most of the email clients do not support background images. We can keep the background colors.
      2. No Rounded Buttons
        We do not recommend adding rounded buttons in the email template. Rounded buttons need a border-radius parameter to make the button round but many email clients do not support border-radius CSS. The solution for this is we can put the whole button image, but it will not be editable text.
      3. Overlapping of Text and Image
        To overlap text on the image, we need to either set the image as a background image or set the position CSS, but both of these are not supported by many email clients.
      4. No Custom Fonts
        External fonts just won't work in almost all email clients. You'd be better off using web-safe fonts in your email. Fonts such as Arial, Verdana, Georgia, Times New Roman, and Courier are considered web-safe fonts that can be used for live text in email because they're the default fonts that are found on different computers, devices, and operating systems.
      5. Layouts
        We prefer to keep the same layout for mobile and desktop, as many email clients do not support CSS. So, they are going to ignore the CSS written for responsive layouts in email clients.
      6. PSD
        When designing your email template, it is recommended to create a design with a width of 600px, as this is the standard layout width for emails. It is best to avoid creating PSDs that are wider or narrower than this standard width.