Design Guidelines : Email Designs for Multifamily

Design Guidelines : Email Designs for Multifamily

Concept Summary

  • When designing an email that will be converted into a Hylet, there are three main guides that you should always follow: 1.) Design for a mobile format, 2.) Make your email scalable, and 3.) Focus on a single Call-To-Action link.
  • Last year, the majority of the people that 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 between 520px - 580px 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, there are three main guidelines you should keep in mind:

Plan Your Design For Mobile Format

According to this  infograph from reporting on the 2016 Email Market Share, emails opened by mobile have significantly increased in recent years, and just last year, around 55% of the total email opens were mobile. You need to make sure that your email will reach your audience anywhere at any time.

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 that has a Responsive Email Design, not all email clients - such as Outlook - might be able to support that.

Because of this, it is best if you 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.

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 only use one call-to-action. For example, if the email you are sending out is showcasing 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.

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 alright to not follow the single call-to-action rule, since each panel will focus on one specific topic.

Tips When Creating Multifamily Emails

Design Your Template Between 520px to 580px Wide

To ensure that your emails will be easily readable on a phone, make sure your email template has a width between  520px and 580px, as even templates with a 600px width is still too wide for a phone's screen. Although wider emails have an aesthetic appeal, they do not retain their legibility when viewed on smaller and mobile devices.

DO NOT Make Your Email Responsive

Though an email with a Scalable Design may not be considered "true" mobile design according to websites, emails that have a Responsive Design requires your team to invest time in creating two designs with complex coding, with the end result being an email that will not work for most email clients. An email with Scalable Design will work well on both a desktop and a mobile device due to its simplicity.

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.

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:

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 tag line, slogan, etc. Otherwise, your marketing team will be spending time on creating a graphic when it can be automatically done using an email safe font.

Recommendations for creating design of an email template

  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 background colors.
  2. No Rounded Buttons
    We do not recommend to add 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
    Create a design with PSD with 600px wider as that's the standard layout width of emails. Prefer to not create PSDs wider than this or lower than this.

    • Related Articles

    • How to Verify an Email Address from the Sub-Org

      Overview In this article, you will learn how to verify the property email address from the sub-org. Step 1 - Navigate to Property Sub-Orgs Under your Property, go to Sub-Orgs. Step 2 - Click on Edit Under 'Property Essentials,' click the 'Edit' ...
    • How to Add your Email Signature in Hyly.AI

      Introduction For outgoing messages, you can create a personalized email signature which will sign off all communications sent through Hyly.AI. This tutorial will show you how to create an email signature. Step 1 - Log into Hyly.AI Log in to ...
    • DKIM Email

      Context In this article you will learn about DKIM Email and it's set up. 1. FAQ Why do I need Domain Verification? Once Domain Verification is setup, any email coming from @domain will be verified across all your properties. In other words, your ...
    • Overview : Navigating your Property Start Screen

      Concept Summary The home page has two sections: the App Suite and Recents. App Suite contains the applications that can be utilized on your account such as hyMail, hyTours, Automation, hyIQ, and Leads. Recents shows your "history" on ...
    • How DKIM Prevents Your Messages from Going to SPAM

      Context You may find your emails are going to your recipients' spam folders. This means prospects and residents could be missing eBlasts, lifecycle marketing materials, tour information, etc. There are two key ways to fix this: Include language in ...