Design Guidelines: Multifamily Email Design

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.

Guide

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 Litmus.com 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.