LogoLogo
  • Welcome
  • Daily Training Sessions
  • Downloadable Guides
  • What's New?
    • Turn Visitors Into Leads: Add a Lead Capture Form to Your Website
    • Create CMA Presentations from the Search Center
    • Post to Your Instagram Story Directly from Rechat! Craft. Click. Share.
    • Full-Service Mode: Manage Open House Registrations
    • A Simpler Navigation Experience
    • Email Drafts & Impersonation Support in Marketing Center
    • Manage Duplicate Contacts, Simplified
    • Digital Ads
    • Enhanced Account Settings
    • Admin Impersonation for Websites & Presentations
    • Websites & Presentations Have Moved!
    • New Look for New Contacts
    • Introducing ‘History’
    • Fresh Deal Summary
    • Revamped Contact Profiles: Cleaner, Faster, Smarter!
    • Lucy: Your AI Assistant
    • Email Previews
    • Enhanced Placeholders
    • Rechat Marketing Studio
    • Notes on Android
    • Lead Sources & Routing
    • Today Page & Digital Business Card on Android
    • Social Post Building Blocks
    • Improved Deals Profile
    • Google News In Articles
    • Personalized Stickers
    • Holidays in Calendar
    • Refreshed Contact Cards
    • Easier-to-Use Calendar on iPhone
    • Refreshed My Designs
    • Email Quota
    • Simplified Marketing Center Navigation
    • Security Beyond Passwords
    • Pages
    • Introducing Lucy
    • Activity Feed
    • Realtor.com & Zillow Lead Integration
    • Digital Business Card
    • Forms Library
    • Filter & Scroll Contacts
    • Digital Open House on iOS
    • Celebrate Your Contacts
    • Notify Agents of Missing Docs (Admin)
    • Improved Contact Filtering
    • Unsubscribed Contacts
    • Tasks
    • Videos in Email
    • Touch Reminders
    • Email Campaigns
    • Improved Contacts
    • Post to Instagram from Rechat
    • New Navigation Menu
    • Private Forms in Deals
    • GIF Previews in Email
    • All-New Today Page
    • Rechat on iPad
    • Filtering Deals
    • Deals Archiving
    • Impersonate Agents (Admin)
    • Searching Multiple Zip Codes on iOS
    • CSV Imports
    • Marketing Center on iOS
    • Searching Multiple Zip Codes
    • Listing Link Preview on Social Posts
    • Celebrate Your Contacts
    • Filtering Deals
    • Uploading Assets (Admin)
    • Social Links in Agent Profile
    • All-New Property Searches
    • Contacts in Deals
    • Creating Deals
    • Expanded Marketing Center Options
    • Connect Multiple MLSs
    • Making Deals Visible to Admins
    • Customizing Deals (Admins)
    • Cover Photos for Accounts
    • Impersonating Agents (Admin)
    • Personal Recipient Attributes in Email
    • Fluid Text on Forms
    • Seamless Communication on Deals
    • Override Form Fields
    • YouTube & Vimeo Videos in Email
    • Notify Agents on Deals
    • Cover Photos for Accounts
    • Search Deals on iOS
    • Mailing Addresses for Deal Contacts
    • Improved Address Descriptions
    • Marketing Center Search
    • Celebrate Your Contacts
    • August 3
    • All-New Listings Page
    • Improved Flows Experience
    • Redesigned Deals Page
    • Adding Notes to Contacts
    • Simplified Account Activation
    • Board View for Contacts
    • Sharing Marketing Templates
    • Audience Confirmation
    • Property Websites
    • Simpler Deal Creation
    • Contact Tags
    • Daily Email
    • Stock Images in Marketing Center
    • Agent Profile on iOS
    • Adding Events to Calendar
    • Redesigned Listing Page
    • Improved Deals Experience
    • Agent Network
    • Improved Listing Cards
  • Self-Guided Learning
    • 👋Intro & Account Setup
    • ⚡Automate Your Workflows
    • 🏡New Listing
    • 🧑New Buyer
    • 🖥️Marketing Admins
    • 📼On-Demand Onboarding
    • 📼On-Demand Workshops
  • Guides
    • 🚀Getting Started
      • Sign up, Sign in
      • Multi-Factor Authentication
      • Connect to Outlook & Google
      • Upgrade to Agent
      • Add An Email Signature
      • Add Your Headshot
      • Account Settings
      • Get the Mobile Apps
      • Delete Rechat account
    • 📗People
      • Contacts
        • Add Contacts
          • Outlook/Google Sync
            • Auto-Created Contacts
          • Manual Contact
          • Import a CSV Spreadsheet
          • Import Phone Contacts
          • Connect to Lead Sources
            • Realtor.com
            • Zillow
            • Union Street Media
            • Placester
          • Lead Routing
        • Organize Your Contacts
          • Tags
          • Smart Lists
          • Search
          • Managing Duplicates
        • Contact Profile Overview
        • Set Follow-Ups
        • Touch Reminders
        • Client Celebrations
      • Calendar
      • Tasks
      • Inbox
      • Rechat Daily
      • FAQ
      • Email Deliverability
    • 🎉Marketing
      • Marketing Center
        • Email Marketing
          • Newsletters
          • Select a Template
          • Customize Your Email
          • Google News Articles
          • Placeholders
          • Best Practices
          • Send or Schedule
          • Email Quota
          • Campaigns
            • Creating Campaigns
        • Social Marketing
          • Social Post Building Blocks
          • Connecting to Instagram
          • Digital Ads
        • Print Marketing
      • Flows
      • Agent Network
      • Listing Marketing Dashboard
      • Websites
      • Presentations
      • Insights
        • Activity Feed
    • 🌎Searches & Tours
    • ✍️Deals
      • Deal's Dashboard
      • Create a deal
      • Deal Profile View
      • Editing Forms In Rechat
      • Collecting eSignatures
      • Uploading & Splitting Documents
      • Messaging Back-office
      • Managing Listings & Accepting Offers
        • Manage Listing Photos
        • Order Yard Signs
        • Post Open House on MLS
        • Accepting Offers
        • Counter Offer
      • Closing Out Deals
    • 🔮Lucy: Your AI Assistant
    • 🏠Open House Registrations
    • 📱Mobile Sales Machine
      • 🤳Rechat On-The-Go
      • 💬Texts for Leads & Clients
      • 📸Personalized Stickers
  • Appendix
    • Finding Support
    • Brokerage Set Up
      • Account Settings
      • Marketing Templates
        • Template Design Guidelines
        • Understanding Studio
        • Fonts
      • Video Clip Stickers
      • Deals Customization
        • Smart Forms
      • Pages
      • Single Sign On (SS0)
      • Email Delivery
        • DNS Self-Service Setup
        • Setup DNS Records
      • Lead Capture Integration
      • Whitelisting Rechat bot in Cloudflare
      • Import Contacts
      • Connecting to your Listing Pages
      • Adoption Rate Dashboard
    • MLS Coverage
    • Integrations
Powered by GitBook
On this page

Was this helpful?

  1. Appendix
  2. Brokerage Set Up
  3. Marketing Templates

Template Design Guidelines

Emails are a crucial component of digital marketing, and designing effective email templates can significantly impact the success of an email campaign.

PreviousMarketing TemplatesNextUnderstanding Studio

Last updated 3 months ago

Was this helpful?

Designing email templates, however, can be challenging due to the limitations imposed by various email providers and devices. This documentation explores some of these limitations that should be considered during the design process.

It's essential to maintain simplicity in email templates, especially when incorporating dynamic content such as text and images. While dynamic content can make emails more engaging and personalized, overly complex templates may lead to slower load times, increased chances of rendering issues, and lower deliverability rates.

Design Limitations To Consider

WIDTH 📧

There are limitations on the width of email templates across different email clients. These limitations are primarily due to the varying ways in which email clients render HTML and CSS. Here are some key points:

Standard Width: The standard width for email templates is generally considered to be around 600 pixels. This width is chosen to ensure compatibility across most email clients, including both desktop and web-based clients.

Variability Among Clients: Different email clients (like Outlook, Gmail, Apple Mail, etc.) can render HTML differently. A width of 600 pixels is widely accepted because it tends to be well-supported and prevents horizontal scrolling.

Although we already have email templates wider than 600 pixels that look good on most email clients, our recommendation is to stick to the standard 600-pixel width to ensure consistent rendering and optimal responsiveness across all platforms.

SIZE 💽

Limiting the size of emails is a common practice to ensure efficient delivery and to avoid issues such as slow loading times, potential delivery failures, and compliance with email service provider (ESP) or server limitations. The total size of the email, which includes the HTML content and any embedded images or media, contributes to the overall size. Keeping this size within reasonable limits is crucial for ensuring prompt delivery and quick loading times for recipients.

When designing your emails, it's important to consider responsiveness. This means optimizing images for email, using efficient coding practices, and employing responsive design techniques to ensure your emails display well on various devices, all without unnecessary data overhead.

Always take into account the overall user experience and the practicality of your email content when determining the appropriate size limits.

Keeping your emails as small as possible is essential. This can be achieved by optimizing the size of images or GIFs included in the email.

Our team is committed to reducing the size of images and other media as much as possible during the implementation of the email template. If you're adding blocks, GIFs, or images to your email, it's important to also consider their size. Optimizing them accordingly will help ensure your email is delivered smoothly and efficiently to your audience.

OVERLAPPING LAYOUTS 🖥️

Email template technology relies on older HTML rules and, to ensure consistent rendering across various email clients and devices, it still predominantly utilizes table-based layouts instead of modern techniques like using divs. This approach may seem unconventional, given the advancements in web design, but it’s necessary to maintain compatibility and provide a consistent user experience. Therefore, overlap layouts can cause issues. Designers can use tables to ensure proper spacing between elements or avoid using complex layouts that may cause issues.

The issue of overlapping elements in email templates is particularly challenging due to the limited support for advanced CSS properties by many email clients. Unlike modern web browsers that can handle complex CSS styles like position:absolute or z-index for overlapping elements, email clients often lack this capability. As a result, attempts to create overlapping designs in emails can lead to inconsistent and unpredictable results. Elements that are meant to overlap might instead stack or display in an unintended manner, disrupting the email's layout and potentially making content unreadable. To avoid these complications, email designers are encouraged to use simpler, more robust layout techniques. This often means designing within the constraints of a grid system or using tables, which are universally supported and rendered more consistently across different email clients. By avoiding the use of overlapping elements, designers can ensure that the email content is accessible and visually coherent on any device or email platforms.

EQUAL COLUMNS HEIGHTS 📏

Equal column heights in email templates present a unique challenge due to the limited and varied support for CSS styles across different email clients. In web design, creating columns of equal height is relatively straightforward with modern CSS techniques like Flexbox or CSS Grid. However, these methods are not consistently supported in the world of email templates, leading to potential rendering issues.

  • Variation in Email Clients: Different email clients (like Outlook, Gmail, Apple Mail, etc.) interpret HTML and CSS in their own ways. Some might support certain CSS properties, while others do not. This inconsistency makes it difficult to use advanced CSS techniques reliably.

  • Table-Based Layouts: As a result, many email designers resort to using table-based layouts, a throwback to early web design practices. Tables provide a more predictable rendering across various email clients. However, achieving equal height columns using tables can be tricky because tables naturally adjust their height based on the content within each cell.

  • Content Considerations: When designing with equal height columns in mind, it's important to consider the content volume. If one column has significantly more content than another, it can lead to layout imbalances, making the design look uneven.

  • Responsive Design Challenges: The challenge increases when trying to make these templates responsive. On smaller screens, columns often stack vertically, and maintaining equal heights becomes irrelevant. However, ensuring that the stacked content remains visually appealing and coherent is crucial.

BACKGROUND IMAGES 📸

When using background images in email templates, there are some important things to keep in mind because not all email clients show these images the same way because not all email clients handle background images in the same way. For instance, clients like Outlook 2007+ and Hotmail are known to have issues with displaying background images.

  • Compatibility: Some email programs, like Outlook, might not show background images properly.

  • Text and Images: It's better to consider your background image and text as a single editable image. In this case, we use just the image without utilizing a background.

  • Fallback Colors: Use a backup color for the background. If the image doesn't load, the color will still be there.

  • Where to Use Images: It's safest to use background images in parts of the email where they won't cover important information.

BORDER RADIUS ⭕️

Dealing with border radius in email templates can be tricky due to varying levels of support across different email clients.For instance, some clients like Outlook do not support this feature. Here's a simplified explanation of the issue:

  • Inconsistent Support: Not all email clients handle CSS properties like border-radius in the same way. While modern web browsers generally support these properties for rounded corners, some email clients, especially older or less advanced ones, may not.

  • Default Square Corners: Because of this inconsistency, an email template designed with rounded corners might appear with default square corners in some email clients. This can affect the intended visual design of the email.

  • Fallback Design Considerations: When designing emails, it's important to consider how the template will look if the border-radius is not supported. The design should still be visually appealing and functional with square corners.

SHADOWS 💡

Both shadow and gradient features can cause problems in email templates because some email clients, like Outlook, don't support them. If you use shadows or gradients in your design, they might not show up correctly in these email clients. This can change how your email looks. To avoid this, it's better to use simpler designs. Stick to basic elements like solid colors that work well in all email clients. This way, your emails will look the same for everyone.

TABLES 🗓️

Use of Tables: Traditionally, tables have been a fundamental part of email template design, primarily for layout purposes. They are used to overcome compatibility issues with different email clients, as many clients do not support modern CSS layout techniques reliably.

Responsiveness Issues: While tables are widely used for their compatibility, they do have limitations in terms of responsiveness, especially on smaller screens. This is particularly true for complex layouts or when dealing with dynamic text that needs to adjust to different screen sizes.

Design Challenges on Small Screens: On smaller devices, tables can sometimes lead to awkward layouts or hard-to-read text, especially if the table is too wide or the text size does not scale down appropriately. However, we can still use tables effectively by minimizing the number of columns and choosing the correct font size. (We already have a Rechat template with table).

While we do face limitations in the email template medium, it's important to recognize the scope of possibilities still available to us. These constraints, often related to compatibility and responsiveness across various email clients, challenge us to innovate within set boundaries.

Despite these challenges, our marketing center is a testament to creativity under constraints, showcasing thousands of exceptional designs. This rich collection demonstrates our ability to combine functionality with aesthetic appeal, offering a wide range of templates that cater to diverse marketing needs.