If you are a brand with a unique identity and highly complex design requirements, you must understand the core advantages of custom email templates. Let\u2019s roll! <\/p>\n\n\n\n
- Zero grid restrictions
<\/a><\/li>- Custom fonts addable
<\/a><\/li>- Advanced CSS features
<\/a><\/li>- Defuse the Dark Mode bomb
<\/a><\/li>- Note on custom email templates<\/a><\/li><\/ul>\n\n\n\n
1. Zero grid restrictions<\/strong><\/strong><\/b><\/h2>\n\n\n\n
Since you\u2019ll be designing emails from scratch, you\u2019ll be working on a blank canvas. You can define your own custom layout. Your developer will have the freedom to add any features or conditional logic to your emails. For instance, consider the following email from Epic for Kids.\u00a0<\/p>\n\n\n\r\n
\r\n \r\n \t\t\r\n\t \t\t\t\r\n\t\t\r\n\t\t \t\t\t <\/div>\r\n\t\t \t\t\t\r\n\t\t\t \t\t\t\t\t\r\n\t\t\t\t \t<\/div>\r\n\t\t\t\t <\/div>\r\n\t\t\t \t\t\t\r\n\t\t\t\r\n\t\t\t<\/span><\/span><\/span><\/div>\r\n\t\t\t \t\t\t\r\n\t\t\t![\"Email](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image4-9.png\")
\r\n\t\t\t <\/div>\r\n\t\t\t \t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t \r\n\t\t\t \tImage source<\/span><\/a><\/p>\n\t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t \t\t <\/div>\r\n\t\t \t <\/div>\r\n\t <\/div>\r\n<\/section>\r\n\r\n\n\n\n
The email is custom-coded. The template does not have a conventional hierarchy. The ribbon loops dancing across the email, combined with the avant-garde placement of products\u2014angular and slightly unsettling\u2014demand the viewer’s full attention.<\/p>\n\n\n\n
Obviously, predefined hierarchies can\u2019t accommodate such unique designs. The angular arrangement of the email requires CSS-level manipulation. It is difficult to achieve, but if your brand needs it, custom coding can do it. <\/p>\n\n\n
![\"email-templates\"](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2023\/10\/email-templates.jpg\")
<\/a><\/div><\/div>\n\n\n\n2. Custom fonts addable<\/strong><\/strong><\/h2>\n\n\n\n
If you think email-safe fonts don\u2019t reflect your brand, you can add brand-specific fonts in your emails. Now remember, not all clients support custom fonts. In addition, they might increase the load time of your emails. But if you need it, you need it. Keep these points in mind:<\/p>\n\n\n\n
- Host your custom fonts on a server. Use a font hosting service to upload the font files.
<\/li> - In your email template code, add a link to the font files hosted on the server. Use the @font-face<\/strong> CSS rule to specify the font family and the URL of the files.
<\/li>- Upon linking to the font files, you can define the font family in your code to use the custom font in your template.
<\/li>- If your custom font has characters not used in your email template, you can subset the font to include only the necessary characters. This will improve the email loading time.
<\/li>- You can also consider implementing font preloading to prioritize the loading of custom fonts.
<\/li>- Incorporate fallback font options in your code. In cases where your custom code fails to display, an email-safe font can be used as a backup to communicate the message. <\/li><\/ul>\n\n\n\n
Take a look at the following code snippet. You only need to replace \u2018YourCustomFont\u2019 <\/strong>with the name of your font, and \u2018https:\/\/example.com\/your-custom-font.woff<\/a>\u2019 <\/strong>with the name of the font file URL.<\/p>\n\n\n\n
![\"Code](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image1-11.png\")
<\/figure><\/div>\n\n\n\n3. Advanced CSS features<\/strong><\/strong><\/h2>\n\n\n\n
Depending on the complexity of your design, you may need the help of advanced CSS features. One such feature is Houdini, which allows you to create custom layout, paint, animation, and typography effects otherwise impossible with standard CSS. <\/p>\n\n\n\n
You can also leverage CSS Houdini to enable custom text effects, ligatures, drop caps, complex animations, sliders, custom checkboxes, and dynamic color manipulations such as gradients, patterns, color blending, etc. Transition effects can bring movement and interactivity to your emails. <\/p>\n\n\n\n
Other CSS attributes include Filters and Blend Modes to create effects like blurring, color adjustments, and overlays. You can also use Flexbox to design complex responsive layouts without media queries. With the help of CSS Opacity and Transparency properties, you can incorporate overlays, fade effects, and ghost buttons. <\/p>\n\n\n\n
In all these cases, testing client compatibility is critical. In fact, on being asked what was one of the first things she notices about an email, Nout Boctor-Smith, managing partner and cofounder of Nine Lives Digital, says, \u201cHow the email renders in my email client or on my phone…\u201d<\/p>\n\n\n\n
You might have to add specificity hacks in your code to override default browser styles. Plus, consider including CSS resets to establish a consistent baseline style for all elements. This is to minimize inconsistencies resulting from browser\/client styles. Just remember not to add complex resets, as email clients may strip them out.<\/p>\n\n\n\n
4. The Dark Mode bomb defused<\/strong><\/h2>\n\n\n\n
\u201cCustom coded HTML email templates also give you an opportunity to combat the impact of Dark Mode on your carefully chosen brand colors,\u201d states<\/a> Clyde Golden. Now that\u2019s one of the cooler benefits of custom email templates.\u00a0<\/p>\n\n\n\n
How to do that? By using media queries. Using @media (prefers-color-scheme: dark)<\/strong>allows you to create Dark Mode themes. This media query checks if the email recipient has selected Dark Mode as their preferred color theme. From text and background colors to specific visual elements in your email, this feature allows you to add specific styles to enhance the visibility and readability of emails in Dark Mode. <\/p>\n\n\n\n
Consider the following Dark Mode-optimized email from Brightwave.\u00a0<\/p>\n\n\n\r\n
\r\n \r\n \t\t\r\n\t \t\t\t\r\n\t\t\r\n\t\t \t\t\t <\/div>\r\n\t\t \t\t\t\r\n\t\t\t \t\t\t\t\t\r\n\t\t\t\t \t<\/div>\r\n\t\t\t\t <\/div>\r\n\t\t\t \t\t\t\r\n\t\t\t\r\n\t\t\t<\/span><\/span><\/span><\/div>\r\n\t\t\t \t\t\t\r\n\t\t\t![\"Emails](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image2-11.png\")
\r\n\t\t\t <\/div>\r\n\t\t\t \t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t \r\n\t\t\t \tImage source\u00a0<\/span><\/a><\/p>\n\t\t\t <\/div>\r\n\t\t\t <\/div>\r\n\t\t\t \t\t <\/div>\r\n\t\t \t <\/div>\r\n\t <\/div>\r\n<\/section>\r\n\r\n\n\n\n
The above email uses @media (prefers-color-scheme: dark)<\/strong>. Check it out:\u00a0<\/p>\n\n\n\n
![\"Generated](\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/05\/image3-9.png\")
<\/figure><\/div>\n\n\n\nThe line will initiate a media query that applies styles only when the email recipient has switched to Dark Mode. The prefers-color-scheme<\/strong> <\/strong>feature detects if the user has requested a light or dark color theme. <\/p>\n\n\n\n
Read more:<\/strong> Understanding Emails In Dark Mode For Apple (And Optimizing It)<\/a><\/p>\n\n\n\n
Note on custom email templates<\/strong><\/h2>\n\n\n\n
The advantage of custom email templates cannot be questioned. That being said, such emails demand exceptional coding skills, along with ESP familiarity. As far as custom templates go, ESPs tend to react in different ways. Take Mailchimp for example.<\/p>\n\n\n\n
Mailchimp tends to strip out the attributes that define the height and width of images. Now this creates a problem if you want to use retina images i.e. images that have twice the number of pixels per inch than regular images. In the absence of attributes, the images will appear larger than intended, leading to disrupted viewing.<\/p>\n\n\n\n
Similarly, HubSpot requires developers to use specific HubL variables for custom coded email templates to function properly. <\/p>\n\n\n\n
These ESP-specific quirks can limit the use of custom email templates<\/a> if your developer lacks expertise in working across multiple ESPs.<\/p>\n\n\n\n
Stunning Custom Email Templates: Your Choice, Our Chops!<\/strong><\/h2>\n\n\n\n
- Upon linking to the font files, you can define the font family in your code to use the custom font in your template.
- Custom fonts addable