Building a website with email in mind
What do you consider when building a website? SEO? User experience? Chances are, enhancing your email marketing isn’t at the top of your list. Good news is there are some quick wins; You’ll be surprised how many you’re leaving out. From enforcing a consistent brand image to providing a rich and seamless user experience, here are our top tips for improving your emails when developing a new website:
1. Fonts, Favicons & Static Assets – CORS Header settings
Enforcing a consistent brand image requires some effort, and fonts are often as important to a brand as the logo. In email, there are two things that are often overlooked and are likely to be used on the brand’s website: the brand’s font(s) and favicon. While not all email clients can display web fonts, some of the major email clients, including Apple Mail, do. And while your own favicon cannot be displayed when the user is inside the inbox, they are displayed when the user opens the email message in the browser.
There are different technical requirements for including assets in email in comparison to your website, such as fonts and images. Where you are likely to be self-hosting these static assets: you must set a CORS header that tells the web browser the email client is allowed to use these assets.
How to do this exactly varies based on your infrastructure. The goal is to set the “Access-Control-Allow-Origin” to a wild card “*” which allows any email client to use your assets.
The same requirements apply even if you are using a CDN or a DAM to host your fonts and favicon.
If you don’t know if your fonts are accessible use the parcel tool to check if your CORS header will block access: https://parcel.io/tools/cors-check
In email clients like Outlook 2013-2021web fonts won’t work and the fallback fonts from the font family declaration will display instead. And remember that saving copy in an image is bad for accessibility, and not best practice – it’s better to follow the advice above for the best user experience.
2. Live forms inside the inbox
While not seen often, HTML forms are supported in many major email clients. “GET” form submission is the form action type that’s more consistently supported among these email clients. This means HTML forms in email are well suited for search and filter forms such as filtering a product catalogue on an e-commerce site or searching the knowledge base on a website.
What prevents most brands from doing this today? The biggest obstacle we find is that form handlers on websites are not implemented in a way that allows them to process the submitted data from emails. What your web dev team may not know is that some email clients, like Outlook web, prefix the value of the “name” attribute on input tags. This effectively changes the name of the submitted fields. The form handler may only look for a field called “query” but the submitted data from an email client may include a field called “x_query” instead.
Technically, this applies to any functionality that relies on URL query string parameters – there doesn’t even have to be a form on the site, but a form can be added to the HTML email nonetheless.
3. Redirect right within your website
Traffic that comes from HTML emails (and other marketing channels) often includes query string parameters (e.g. UTM parameters) that help analyse the traffic and measure the effectiveness of various campaigns. It is not uncommon for sites to redirect traffic going to a specific page (e.g. no current sale offers, URL change, etc.) to what is deemed more relevant to the user.
Most redirects completely ignore URL query string parameters and don’t carry those to the new page. As a result, a gap in the analytical data is formed. Conversions are no longer attributed to the relevant campaigns.
When redirecting traffic, make sure you carry relevant URL query string parameters such as UTM parameters.
4. Special considerations to ‘AMP’ up your emails
AMP emails allow you to bring in live data directly from your website to your audience inboxes. AMP also lets your audience submit forms directly from their inbox without leaving their inbox.
For example, if your site has a JSON endpoint listing items that change over time like products on sale, the list can be updated each time the recipient opens the email. This ensures the email displays the latest products and prices.
Utilising these AMP features requires you to correctly set up your URL endpoints. These endpoints must have the CORS HTTP header “AMP-Email-Allow-Sender”. The value can either be the email address of the sender, which is the recommended practice, or a wild card “*” allowing any sender to use this endpoint.
On top of this, JSON endpoints used in AMP emails must not use any HTTP redirects. Using a HTTP redirect will cause the request by the AMP component to fail even if the URL it redirects to is correct.
Sources:
5. Updating file paths
If developers change the structure of the website and update file paths (e.g. from /assets/myfont.woff to /assets/fonts/myfont.woff)? – all the emails in your automated journeys will link to the old path and your emails won’t display as they were originally intended.
Before changing the site structure check with the marketing teams to understand what static assets are referenced in emails.
In summary…
Your email marketing requirements should be on the list of things your website development team considers when planning new features or maintaining existing ones. By considering the above points in the early planning phase, you’ll benefit by:
- Enforcing your brand image across different communication channels
- Opening the doors to seamless and engaging user experience across both your emails and website
- Ensuring you get the analytics data that is going to inform your future business decisions
Need help creating seamless customer journeys, optimising your email marketing and elevating your website? Get in touch with the experts at Flourish via our website or drop an email to [email protected].
