7 posts tagged with "Email"

Outlook's massive font support​

Last year, I discovered that Outlook had quietly rolled out a major update to its email rendering system.

I was testing the Google Font Fira Sans, and to my surprise, it kept rendering correctly across all my Outlook test emails. If you're familiar with email development, you know that we never trust anything until it’s been tested at least 50 times and confirmed by other experts.

Niven Ranchhod | Megan Boshuyzen

Could it really be true?​

It turned out that Outlook had decided the nine standard web-safe fonts weren’t enough. But instead of simply allowing fonts to be loaded directly from Google Fonts, Microsoft secretly made 939 new fonts available—served via their own cloud-based infrastructure.

This means that every Outlook desktop client, going all the way back to Outlook 2003, now supports these newly added fonts.

What it means for you​

Are you an email developer?​

If you develop emails, you can now take advantage of new font-stacking strategies to enhance your designs.

For instance, if a client has a custom font, you can now:

• Find a visually similar font from Google Fonts.
• Check if that font exists in the new Outlook font stack.
• Combine them in your CSS like this:

font-family: 'Custom-font', 'Google-font', 'Outlook-font', Websafe-font, sans-serif;

This approach ensures a much better look across email clients—even in Outlook, which has historically been the most restrictive. As of today, Google has 1855 different fonts.

Are you an ESP user?​

Many smaller and larger ESPs (Email Service Providers), such as Klaviyo and Salesforce, support a limited variety of non-web-safe fonts.

With Outlook's expanded font support, now is the time to ditch Arial and explore more creative, on-brand typography in your email campaigns.

The list​

Ready to start making Better emails? Book a demo here.

The problem with calendar links in emails​

Traditional methods of adding calendar invites to emails often fall short. Whether it’s embedding dates in written, numeric, or spoken formats, many email clients struggle to consistently interpret and support these formats. Even link generators that create ICS files for download can fail to work properly in widely used clients like Apple Mail or Outlook for desktop.

The result? Empty calendar events that force users to manually input details or links that simply don’t work, leading to frustration and missed opportunities.

The Solution:​

The only reliable way to ensure full support for calendar links in all email clients is to bypass the email client entirely. By generating an ICS file and triggering the browser to open it, users can seamlessly add events to their calendars without any manual input or compatibility issues.

At Better Email, we’ve developed and integrated this tool directly into our system. Here’s how it works:

Try It for Yourself?​

Try the demo here here.

The code​

First we need to URL encode everything, so the browser does not crash.

{% assign calendarTitle = calendar.title | url_encode %}
{% assign calendarDescription = calendar.description | url_encode %}
{% assign calendarStartdate = calendar.start_date | url_encode %}
{% assign calendarStarttime = calendar.start_time | url_encode %}
{% assign calendarEnddate = calendar.end_date | url_encode %}
{% assign calendarEndtime = calendar.end_time | url_encode %}
{% assign calendarWarning = calendar.warning | url_encode %}
{% assign calendarUrl = calendar.url | url_encode %}
{% assign calendarLocation = calendar.location | url_encode %}
{% assign calendarLocationPlus = ' ' | append: calendarLocation %}

Then we need to assign the URL that creates the ICS file

{% assign calendarLink = 'https://ics.better.email/?title=' | append: calendarTitle | append: '&description=' | append: calendarDescription | append: '&location=' | append: calendarLocationPlus | append: '&startDate=' | append: calendarStartdate | append: '&startTime=' | append: calendarStarttime | append: '&endDate=' | append: calendarEnddate | append: '&endTime=' | append: calendarEndtime | append: '&alertBefore=' | append: calendarWarning | append: '&url=' | append: calendarUrl %}

Now create text strings settings for all the fields:

• description
• start_date
• start_time
• end_date
• end_time
• warning
• location
• url

If you want to wrap it in a nice round button like this, use this code:

<table cellspacing="0" cellpadding="0" border="0" style="width: 1000%;">
        <tr>
          <td align="center">
          <!-- THIS CALCULATE THE WIDTH OF THE BUTTON FOR YOU -->
            {% assign buttonWidth = button.button_text | size | times: 10 | plus: 80 | round %}
            <div>
                <!--[if mso]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ calendarLink }}" style="width:{{ buttonWidth }}px; height:60px; v-text-anchor:middle; border: 1px solid #000000; mso-padding-alt: 12px 55px 12px 55px;" arcsize="120%" stroke="f" fillcolor="#000000" strokecolor="#000000"><w:anchorlock/><center><![endif]-->
                <a href="{{ calendarLink }}" style="background-color:#000000;border-radius:100px; color:#ffffff; display:inline-block;font-size: 18px; font-family: Open Sans, Helvetica, Arial sans-serif; font-weight:bold;line-height:22px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none; min-width:45px; padding: 18px 30px; mso-padding-alt: 0 30px;">
                    <img src="https://assets.better.email/1/62b6ad9d-fd1e-4226-a6f2-850154812b16.png" width="20" height="22" style="display:inline-block; border:0; height: 22px; width:20px; vertical-align:top;">&nbsp;&nbsp;&nbsp;
                    <span style="display:inline-block;">
                        {{ button.button_text }}
                    </span>
                </a>
                <!--[if mso]></center></v:roundrect><![endif]-->
          </div>
       </td>
    </tr>
</table>

Ready to start making Better emails? Book a demo here.

The previous code for expanding short preview texts is no longer functional. Here is the updated code that works in the fourth quarter of 2024.

Why it this important?​

Expanding the space in the preview text avoids the email client showing text from email itself, making you in full control of what is shows in the inbox of your receievers

The code​

 ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏ ͏  ͏  ͏  ͏

Code with preview text​

<div style="display: none !important; padding: 0; height: 1px; font-size: 1px; background-color: inherit !important; opacity: 0; color: transparent; mso-line-height-rule: exactly; line-height: 1px; mso-hide: all">
      Here goes the snippet text...
    <div style="display: none; max-height: 0px; overflow: hidden">
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847; &#8199;&#847;
    &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; 
    &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; 
    &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; 
    &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; 
    &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy; &shy;
    &nbsp;
    </div>
</div>

Ready to start making Better emails? Book a demo here.

Every year new emojis are added, and before you add them to your email campaign, you need to be sure that they actually work.

The emoji safe-to-use list as of 2024​

• ❌ Do not use the non-gender emojis
• ⚠️ Be aware that skin color has full support on the shown emojis

Smileys
😀 😃 😄 😁 😆 😅 😂 🤣 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹️ 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤫 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 🥱 😴 🤤 😪 😵 🫥 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑 🤠 😈 👿 👹 👺 🤡 💩 👻 💀 ☠️ 👽 👾 🤖 🎃 😺 😸 😹 😻 😼 😽 🙀 😿 😾

Gestures & Body parts
👋 🤚 🖐 ✋ 🖖 👌 🤏 ✌️ 🤞 🤟 🤘 🤙 👈 👉 👆 🖕 👇 ☝️ 👍 👎 ✊ 👊 🤛 🤜 👏 🙌 👐 🤲 🤝 🙏 ✍️ 💅 🤳 💪 🦾 🦵 🦿 🦶 👣 👂 🦻 👃 🧠 🦷 🦴 👀 👁 👅 👄 💋 🩸

People and Fantasy
👶 👧 🧒 👦 👩 🧑 👨 👩‍🦱 👨‍🦱 👩‍🦰 🧑‍🦰 👱‍♀️ 👱 👩‍🦳 👨‍🦳 👩‍🦲 🧑‍🦲 🧔‍♂️ 👵 🧓 👴 👲 👳‍♀️ 👳 👳‍♂️ 🧕 👮‍♀️ 👮 👮‍♂️ 👷‍♀️ 👷 👷‍♂️ 💂‍♀️ 💂 💂‍♂️ 🕵️‍♀️ 🕵️ 🕵️‍♂️ 👩‍⚕️ 👨‍⚕️ 👩‍🌾 👨‍🌾 👩‍🍳 👨‍🍳 👩‍🎓 👨‍🎓 👩‍🎤 👨‍🎤 👩‍🏫 👨‍🏫 👩‍🏭 👨‍🏭 👩‍💻 👨‍💻 👩‍💼 👨‍💼 👩‍🔧 👨‍🔧 👩‍🔬 👨‍🔬 👩‍🎨 👨‍🎨 👩‍🚒 👨‍🚒 👩‍✈️ 👨‍✈️ 👩‍🚀 👨‍🚀 👩‍⚖️ 👨‍⚖️ 👰‍♀️ 👰‍♂️ 🤵‍♀️ 🤵‍♂️ 👸 🤴 🦸‍♀️ 🦸‍♂️ 🦹‍♀️ 🦹‍♂️ 🤶 🎅 🧙‍♀️ 🧙‍♂️ 🧝‍♀️ 🧝‍♂️ 🧛‍♀️ 🧛‍♂️ 🧟‍♀️ 🧟‍♂️ 🧞‍♀️ 🧞‍♂️ 🧜‍♀️ 🧜‍♂️ 🧚‍♀️ 🧚‍♂️ 👼 🤰 🤱 🙇‍♀️ 🙇‍♂️ 💁‍♀️ 💁‍♂️ 🙅‍♀️ 🙅‍♂️ 🙆‍♀️ 🙆‍♂️ 🙋‍♀️ 🙋‍♂️ 🧏‍♀️ 🧏‍♂️ 🤦‍♀️ 🤦‍♂️ 🤷‍♀️ 🤷‍♂️ 🙎‍♀️ 🙎‍♂️ 🙍‍♀️ 🙍‍♂️ 💇‍♀️ 💇‍♂️ 💆‍♀️ 💆‍♂️ 🧖‍♀️ 🧖‍♂️ 💅 🤳 💃 🕺 👯‍♀️ 👯‍♂️ 🕴 👩‍🦽 👨‍🦽 👩‍🦼 👨‍🦼 🚶‍♀️ 🚶‍♂️ 👩‍🦯 👨‍🦯 🧎‍♀️ 🧎‍♂️ 🏃‍♀️ 🏃‍♂️ 🧍‍♀️ 🧍‍♂️ 👭 👬 👫 👩‍❤️‍👩 👨‍❤️‍👨 👩‍❤️‍👨 👩‍❤️‍💋‍👩 💏 👨‍❤️‍💋‍👨 👩‍❤️‍💋‍👨 👨‍👩‍👦 👨‍👩‍👧 👨‍👩‍👧‍👦 👨‍👩‍👦‍👦 👨‍👩‍👧‍👧 👨‍👨‍👦 👨‍👨‍👧 👨‍👨‍👧‍👦 👨‍👨‍👦‍👦 👨‍👨‍👧‍👧 👩‍👩‍👦 👩‍👩‍👧 👩‍👩‍👧‍👦 👩‍👩‍👦‍👦 👩‍👩‍👧‍👧 👨‍👦 👨‍👦‍👦 👨‍👧 👨‍👧‍👦 👨‍👧‍👧 👩‍👦 👩‍👦‍👦 👩‍👧 👩‍👧‍👦 👩‍👧‍👧 🗣 👤 👥

Clothing and Accessories
🧳 🌂 ☂️ 🧵 🧶 👓 🕶 🥽 🥼 🦺 👔 👕 👖 🧣 🧤 🧥 🧦 👗 👘 🥻 🩱 🩲 🩳 👙 👚 👛 👜 👝 🎒 👞 👟 🥾 🥿 👠 👡 🩰 👢 👑 👒 🎩 🎓 🧢 ⛑ 💄 💍 💼

Animals and nature
🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐻‍❄️ 🐨 🐯 🦁 🐮 🐷 🐽 🐸 🐵 🙈 🙉 🙊 🐒 🐔 🐧 🐦 🐤 🐣 🐥 🦆 🦅 🦉 🦇 🐺 🐗 🐴 🦄 🐝 🐛 🦋 🐌 🐞 🐜 🦟 🦗 🕷 🕸 🦂 🐢 🐍 🦎 🦖 🦕 🐙 🦑 🦐 🦞 🦀 🐡 🐠 🐟 🐬 🐳 🐋 🦈 🐊 🐅 🐆 🦓 🦍 🦧 🐘 🦛 🦏 🐪 🐫 🦒 🦘 🐃 🐂 🐄 🐎 🐖 🐏 🐑 🦙 🐐 🦌 🐕 🐩 🦮 🐕‍🦺 🐈 🐓 🦃 🦚 🦜 🦢 🦩 🕊 🐇 🦝 🦨 🦡 🦦 🦥 🐁 🐀 🐿 🦔 🐾 🐉 🐲 🌵 🎄 🌲 🌳 🌴 🌱 🌿 ☘️ 🍀 🎍 🎋 🍃 🍂 🍁 🍄 🐚 🌾 💐 🌷 🌹 🥀 🌺 🌸 🌼 🌻 🌞 🌝 🌛 🌜 🌚 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 🌙 🌎 🌍 🌏 🪐 💫 ⭐️ 🌟 ✨ ⚡️ ☄️ 💥 🔥 🌪 🌈 ☀️ 🌤 ⛅️ 🌥 ☁️ 🌦 🌧 ⛈️ 🌩 🌨 ❄️ ☃️ ⛄️ 🌬 💨 💧 💦 ☔️ ☂️ 🌊 🌫

Food and drinks
🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🍈 🍒 🍑 🥭 🍍 🥥 🥝 🍅 🍆 🥑 🥦 🥬 🥒 🌶 🌽 🥕 🧄 🧅 🥔 🍠 🥐 🥯 🍞 🥖 🥨 🧀 🥚 🍳 🧈 🥞 🧇 🥓 🥩 🍗 🍖 🦴 🌭 🍔 🍟 🍕 🥪 🥙 🧆 🌮 🌯 🥗 🥘 🥫 🍝 🍜 🍲 🍛 🍣 🍱 🥟 🦪 🍤 🍙 🍚 🍘 🍥 🥠 🥮 🍢 🍡 🍧 🍨 🍦 🥧 🧁 🍰 🎂 🍮 🍭 🍬 🍫 🍿 🍩 🍪 🌰 🥜 🍯 🥛 🍼 ☕️ 🍵 🧃 🥤 🍶 🍺 🍻 🥂 🍷 🥃 🍸 🍹 🧉 🍾 🧊 🥄 🍴 🍽 🥣 🥡 🥢 🧂

Activity and sport
⚽️ 🏀 🏈 ⚾️ 🥎 🎾 🏐 🏉 🥏 🎱 🪀 🏓 🏸 🏒 🏑 🥍 🏏 🥅 ⛳️ 🪁 🏹 🎣 🤿 🥊 🥋 🎽 🛹 🛷 ⛸ 🥌 🎿 ⛷ 🏂 🪂 🏋️‍♀️ 🏋️‍♂️ 🤼‍♀️ 🤼‍♂️ 🤸‍♀️ 🤸‍♂️ ⛹️‍♀️ ⛹️‍♂️ 🤺 🤾‍♀️ 🤾‍♂️ 🏌️‍♀️ 🏌️‍♂️ 🏇 🧘‍♀️ 🧘‍♂️ 🏄‍♀️ 🏄‍♂️ 🏊‍♀️ 🏊‍♂️ 🤽‍♀️ 🤽‍♂️ 🚣‍♀️ 🚣‍♂️ 🧗‍♀️ 🧗‍♂️ 🚵‍♀️ 🚵‍♂️ 🚴‍♀️ 🚴‍♂️ 🏆 🥇 🥈 🥉 🏅 🎖 🏵 🎗 🎫 🎟 🎪 🤹 🤹‍♀️ 🎭 🩰 🎨 🎬 🎤 🎧 🎼 🎹 🥁 🎷 🎺 🎸 🪕 🎻 🎲 ♟ 🎯 🎳 🎮 🎰 🧩

Travel and places
🚗 🚕 🚙 🚌 🚎 🏎 🚓 🚑 🚒 🚐 🚚 🚛 🚜 🦯 🦽 🦼 🛴 🚲 🛵 🏍 🛺 🚨 🚔 🚍 🚘 🚖 🚡 🚠 🚟 🚃 🚋 🚞 🚝 🚄 🚅 🚈 🚂 🚆 🚇 🚊 🚉 ✈️ 🛫 🛬 🛩 💺 🛰 🚀 🛸 🚁 🛶 ⛵️ 🚤 🛥 🛳 ⛴ 🚢 ⚓️ ⛽️ 🚧 🚦 🚥 🚏 🗺 🗿 🗽 🗼 🏰 🏯 🏟 🎡 🎢 🎠 ⛲️ ⛱ 🏖 🏝 🏜 🌋 ⛰ 🏔 🗻 🏕 ⛺️ 🏠 🏡 🏘 🏚 🏗 🏭 🏢 🏬 🏣 🏤 🏥 🏦 🏨 🏪 🏫 🏩 💒 🏛 ⛪️ 🕌 🕍 🛕 🕋 ⛩ 🛤 🛣 🗾 🎑 🏞 🌅 🌄 🌠 🎇 🎆 🌇 🌆 🏙 🌃 🌌 🌉 🌁

Objects
⌚️ 📱 📲 💻 ⌨️ 🖥 🖨 🖱 🖲 🕹 🗜 💽 💾 💿 📀 📼 📷 📸 📹 🎥 📽 🎞 📞 ☎️ 📟 📠 📺 📻 🎙 🎚 🎛 🧭 ⏱ ⏲ ⏰ 🕰 ⌛️ ⏳ 📡 🔋 🔌 💡 🔦 🕯 🪔 🧯 🛢 🛍️ 💸 💵 💴 💶 💷 💰 💳 💎 ⚖️ 🧰 🔧 🔨 ⚒ 🛠 ⛏ 🔩 ⚙️ 🧱 ⛓ 🧲 🔫 💣 🧨 🪓 🔪 🗡 ⚔️ 🛡 🚬 ⚰️ ⚱️ 🏺 🔮 📿 🧿 💈 ⚗️ 🔭 🔬 🕳 🩹 🩺 💊 💉 🩸 🧬 🦠 🧫 🧪 🌡 🧹 🧺 🧻 🚽 🚰 🚿 🛁 🛀 🧼 🪒 🧽 🧴 🛎 🔑 🗝 🚪 🪑 🛋 🛏 🛌 🧸 🖼 🛍 🛒 🎁 🎈 🎏 🎀 🎊 🎉 🎎 🏮 🎐 🧧 ✉️ 📩 📨 📧 💌 📥 📤 📦 🏷 📪 📫 📬 📭 📮 📯 📜 📃 📄 📑 🧾 📊 📈 📉 🗒 🗓 📆 📅 🪪 📇 🗃 🗳 🗄 📋 📁 📂 🗂 🗞 📰 📓 📔 📒 📕 📗 📘 📙 📚 📖 🔖 🧷 🔗 📎 🖇 📐 📏 🧮 📌 📍 ✂️ 🖊 🖋 ✒️ 🖌 🖍 📝 ✏️ 🔍 🔎 🔏 🔐 🔒 🔓 Symbols ❤️ 🧡 💛 💚 💙 💜 🖤 🤍 🤎 💔 ❣️ 💕 💞 💓 💗 💖 💘 💝 💟 ☮️ ✝️ ☪️ 🕉 ☸️ ✡️ 🔯 🕎 ☯️ ☦️ 🛐 ⛎ ♈️ ♉️ ♊️ ♋️ ♌️ ♍️ ♎️ ♏️ ♐️ ♑️ ♒️ ♓️ 🆔 ⚛️ 🉑 ☢️ ☣️ 📴 📳 🈶 🈚️ 🈸 🈺 🈷️ ✴️ 🆚 💮 🉐 ㊙️ ㊗️ 🈴 🈵 🈹 🈲 🅰️ 🅱️ 🆎 🆑 🅾️ 🆘 ❌ ⭕️ 🛑 ⛔️ 📛 🚫 💯 💢 ♨️ 🚷 🚯 🚳 🚱 🔞 📵 🚭 ❗️ ❕ ❓ ❔ ‼️ ⁉️ 🔅 🔆 〽️ ⚠️ 🚸 🔱 ⚜️ 🔰 ♻️ ✅ 🈯️ 💹 ❇️ ✳️ ❎ 🌐 💠 Ⓜ️ 🌀 💤 🏧 🚾 ♿️ 🅿️ 🈳 🈂️ 🛂 🛃 🛄 🛅 🚹 🚺 🚼 ⚧ 🚻 🚮 🎦 📶 🈁 🔣 ℹ️ 🔤 🔡 🔠 🆖 🆗 🆙 🆒 🆕 🆓 0️⃣ 1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🔢 #️⃣ *️⃣ ⏏️ ▶️ ⏩ ⏪ ⏫ ⏬ ◀️ 🔼 🔽 ➡️ ⬅️ ⬆️ ⬇️ ↗️ ↘️ ↙️ ↖️ ↕️ ↔️ ↪️ ↩️ ⤴️ ⤵️ 🔀 🔁 🔂 🔄 🔃 🎵 🎶 ➕ ➖ ➗ ✖️ ♾ 💲 💱 ™️ ©️ ®️ 〰️ ➰ ➿ 🔚 🔙 🔛 🔝 🔜 ✔️ ☑️ 🔘 🔴 🟠 🟡 🟢 🔵 🟣 ⚫️ ⚪️ 🟤 🔺 🔻 🔸 🔹 🔶 🔷 🔳 🔲 -️ ▫️ ◾️ ◽️ ◼️ ◻️ 🟥 🟧 🟨 🟩 🟦 🟪 ⬛️ ⬜️ 🟫 🔈 🔇 🔉 🔊 🔔 🔕 📣 📢 👁‍🗨 💬 💭 🗯 ♠️ ♣️ ♥️ ♦️ 🃏 🎴 🀄️ 🕐 🕑 🕒 🕓 🕔 🕕 🕖 🕗 🕘 🕙 🕚 🕛 🕜 🕝 🕞 🕟 🕠 🕡 🕢 🕣 🕤 🕥 🕦 🕧

How do they look, and which are missing?​

There are still no support on any email clients for the newest emojis, added last year 2022.

Newer emojis will not be recognized by email clients

So what Emojis are supported then?

We will here differentiate between Outlook clients, Apple devices, and Google and Android devices.

Outlook - Mood Emojis​

On Outlook we are missing 9 emojis for the mood palette and 3 emojis that have a combination of 2 emojis.

Apple devices - Mood emojis​

On Apple devices (Mac, iPad, iPhones, Watch) there is only 1 emoji missing in the mood palette.

Google devices - Mood emojis​

On Google devices and the Chrome browser accessed on Windows, there is only 1 missing emoji

Ready to start making Better emails? Book a demo here.

Here I will explain the rules of email marketing. Be aware that statements made in this article only applies within the European Union

Should you double Opt-in your subscribers, and what about that checkbox?​

What does the law say in Denmark?​

*Chapter 3, § 10. A business operator may not contact anyone using electronic mail, an automatic calling system, or fax for the purpose of direct marketing unless the individual concerned has given their prior consent. The business operator must provide an easy and cost-free way to revoke the consent. (Reference)

What does a consent involve?

• A consent must be presented or accessible before sign-up.

• Who is the data controller (DPO) and their contact information? What is the purpose of the processing of personal data?

• What information is processed?

• What treatment takes place?

• Inform about the data protection regulation.

When selling goods, you will be able to collect more information about your customer. That is why you will need an extra check-box, when signing people up for your newsletter, to inform them about your data processing

The yes no list​

• ❌ Should you pre-check checkboxes with newsletter sign-ups: (Illegal)

• ❌ Should you buy contact lists from others: (Illegal)

• ✅ Should you be able to document every single sign-up for your newsletter

• ✅ Should you always have an unsubscribe link in your newsletters

• ⚠️ Should you have a checkbox: - If users are buying from your website - yes, if you have a normal newsletter, then no

Ready to start making Better emails? Book a demo here.

Discover the Brand Indicators for Message Identification - a game-changer for email authenticity. Learn how BIMI enhances trust and engagement in email marketing

1. What is BIMI?​

At its core, BIMI is an email authentication protocol that empowers brands to display their logos alongside their email messages in their recipients' inboxes. This simple yet effective concept provides an instant visual cue that the email is legitimate and originates from a trusted source. By implementing BIMI, brands can bolster their email deliverability, increase open rates, and cultivate a sense of authenticity that resonates with recipients.

2. Where is it supported?​

BIMI is gaining traction across the digital landscape. Major email providers like Gmail, Yahoo, and AOL are backing this protocol, ensuring that your brand's logo can be proudly displayed next to your email messages for a more engaging user experience. This widespread adoption signifies the growing importance of email authentication in establishing a brand's credibility.

3. What are the Benefits?​

The benefits of BIMI extend far beyond mere aesthetics. Here's how brands stand to gain from implementing BIMI:

• Enhanced Trust: Displaying your logo within the inbox provides an immediate visual trust indicator, reducing the likelihood of recipients mistaking your emails for phishing attempts.

• Increased Open Rates: A recognizable logo makes your emails stand out, encouraging recipients to open and engage with your content.

• Consistent Branding: BIMI ensures that your brand's visual identity remains consistent across all email clients, reinforcing brand recognition.

• Improved Deliverability: Email providers are more likely to route authenticated emails to the inbox, reducing the chances of your messages ending up in the spam folder.

4. How to set it up​

Getting started with BIMI might sound complex, but it's a worthwhile investment for any marketing professional. Here's a step-by-step guide to implementing BIMI:

Note: You will need to have access to your hosting service to set it up.

1. Test if your SPF, DKIM and DMARC is correctly setup. Use - Bimigroup and enter your website. Note: If you do not have a correct DMARC setup you can use this example that we use at Better email, and change out with your preferred email address.

   Copy

   v=DMARC1;p=quarantine;pct=25;rua=mailto:[email protected]:ruf=mailto:[email protected]
   

2. Prepare your logo. BIMI only accepts SVG format, and most mails clients will round the edges of the logo, so be sure to give it a little padding. After that, please convert your SVG via this website, for correct settings in the SVG code Easydmarc.com

1. Upload your image to your website or a public accessible server

2. Note: This step is not necessary and cost $1.499/pr year, but the benefit is to show up in Gmail Register your logo on https://order.digicert.com and after follow this guide

3. Prepare the TXT for your DNS

   default._bimi.[Your website] IN TXT "v=BIMI1; l=[URL for the SVG]"
   

   Here is the example for Better Email
   default._bimi.better.email IN TXT "v=BIMI1; l=https://assets.better.email/1/a8fbba63-2d6c-47e2-9289-994c00df3642.svg"
   

4. Check Bimigroup generator if all your settings are correct

5. The BIMI VMC HACK for Gmail​

If you do not want to pay for VMC, there is a sneaky hack to avoid it. If you register the email address on Google. Fx [email protected]. Then you can create a profile image for that specific email address.

Conclusion In the competitive landscape of email marketing, standing out and building trust are paramount. BIMI not only achieves this, but also adds a layer of visual authenticity that today's consumers demand. As the face of your company before it's even opened, BIMI holds the potential to transform your email campaigns, making them more engaging, effective, and ultimately, more rewarding for your brand and your audience.

For more in-depth insights about BIMI, I recommend checking out resources from BIMI Group, Postmark, and Litmus.

Remember, in the ever-evolving world of email marketing, adopting innovative solutions like BIMI could be the differentiating factor that sets your brand apart from your competitors and propels your campaigns toward success.

Common issues​

1. BIMI is not showing up A. Did you test your setup through Bimigroup? If yes, the problem can be, that you are sending from an address with a unique ID such as [email protected] Be sure to send from a generic ID, such as [email protected] or [email protected] B. Did you check if your SVG got approved? BIMI requires specific code inside your SVG, and you therefor need to run your SVG through. bimi-logo-converter C. Did you check that the email client you are receiving your email supports BIMI? Fx Gmail only supports VMC BIMI (the paid BIMI)

2. BIMI is not showing on darkmode Simply put a white background behind the SVG.

Here is the guide to make a full supported button, rounded or square

Transparent Round button​

This button is fully transparent, and you will not have to worry about which background color you will put on top of. To work properly in Outlook, the button needs to have a width.

<td align="center">
    <div>

    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="width:111px; height:45px; v-text-anchor:middle;" arcsize="73%" stroke="#245157" strokecolor="#245157"  strokeweight="2pt">
            <w:anchorlock/>
            <center>
        <![endif]-->

         <a class="button_outline" href="#" style="mso-border-color-alt: none; mso-border-alt: none; background-color:transparent; border:2px solid #245157; border-radius:100px; color:#245157; display:inline-block;font-size: 16px; font-family: Montserrat, Arial, sans-serif; font-weight:500;line-height:22px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none; min-width:85px; padding: 8px 30px; mso-padding-alt: 0 20px;" target="_blank">I'm a button</a><!--[if mso]>

                 </center>
            </v:roundrect>
        <![endif]-->

    </div>
</td>

Within our platform, we calculate the width in Liquid, and therefore the will the width of the button always be the perfect size. The Liquid code looks like this:

{% assign buttonWidth = article.cta_text | size | times: 8 | plus: 55% | round %}

Full color Round button​

This button has a background color, and is less tricky to deal with. Not only is the whole button clickable in Outlook, it is also rounded and size-accurate

<td align="center">
  <div>

    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="width:111px; height:45px; v-text-anchor:middle; border: 1px solid #245157; mso-padding-alt: 12px 55px 12px 55px;" arcsize="73%" stroke="f" fillcolor="#245157" strokecolor="#245157">
        <w:anchorlock/>
        <center>
    <![endif]-->

    <a class="button" href="#" style=" background-color:#245157;border-radius:100px; color:#ffffff; display:inline-block;font-size: 16px; font-family: Montserrat, Arial, sans-serif; font-weight:500;line-height:22px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none; min-width:85px; padding: 8px 30px; mso-padding-alt: 0 20px;; pointer-events: none;">I'm a button</a>

    <!--[if mso]>
        </center>
        </v:roundrect>
    <![endif]-->

  </div>
</td

Hover animation on the buttons​

.button{
  background-color:#245157;
  color:#ffffff;
  border: 2px solid #245157;
  -webkit-transition:.5s;
      -moz-transition:.5s;
      -ms-transition:.5s;
}
.button:hover{
  background-color:#54bdcb !important;
  color:#ffffff !important;
  -webkit-transition:.5s;
      -moz-transition:.5s;
      -ms-transition:.5s;
}

Square responsive button for Outlook​

Unfortunately, if you do not use Better.email, you cannot have a responsive AND round button. We use liquid to calculate the width of the button, and other systems are simply not able to do that. However, here is a square responsive button. That means you do not have to add a width.

<tr>
<!--[if mso]>
<td align="center">
  <table cellspacing="0" cellpadding="0" border="0" style="vertical-align:middle; background-color: #191919; mso-padding-alt: 12px 40px 12px 40px;">
    <tr>
      <![endif]-->

          <td align="center">
   <a href="#" class="button" style="mso-line-height-alt: 22px; border: 1px solid #191919; background-color: #191919; color:#ffffff; display:inline-block;mso-bidi-font-family: Helvetica, Arial, sans-serif; font-family: 'Special Font', Helvetica, Arial, sans-serif; font-size:14px;font-weight:400;line-height:44px;text-align:center;text-decoration:none;min-width:145px; -webkit-text-size-adjust:none; padding: 0 20px 0 20px; text-transform:uppercase;" target="_blank">I'M A BUTTON</a>
          </td>

        <!--[if mso]>
      </tr>
      </table>
    </td>
  <![endif]-->
</tr>

Ready to start making Better emails? Book a demo here.