Building an impactful email can be challenging at times, and while website development continues to advance, email is living on older technologies. This guide will outline a couple points that you should consider when building your email template.

CSS with Email

CSS is a stylesheet language and is commonly used to style markup languages like HTML. In order to apply styling in email, you will need to inline the CSS directly into the HTML elements. The Sendwithus template editor will automatically inline your CSS, so you don’t need to worry about this. It’s important to note that not all CSS works with every email client.

To see if a CSS rule works for an email client, visit The Ultimate Guide to CSS.

Images in Email

Adding images to an email can emphasize the message you want to send to your customers and provide an overall better customer experience. Images are generally hosted on a server and you would insert them into the email using an absolute image source URL. Sendwithus offers to host your email images for free in the Images section of the Sendwithus dashboard.

When adding images to emails, it’s important to note that these images might not appear by default. Most email clients hide the images until the user clicks each image to show or “Display All Images”, so we recommend that you always have descriptive Alt text.

Supported Image Types

When designing HTML emails you should stick to these image formats:

  • JPEG
  • PNG
  • GIF

BMP and SVG can also be used, but client support is not as good as the above three formats.

Try testing with images not shown to preview the design and structure of the email before loading the images.

Add Images

Click the Images tab on the navigation bar in your Sendwithus dashboard.

Here you can upload an image by clicking the Upload Image button, and selecting an image from: your computer, Google Drive, Gmail, or a link (URL).

Once the image has uploaded, it will appear on the page. If you hover over the image three options will appear.

Image Hover Links

  • </> - Copies the image tag code.
  • - Copies the URL to the image.
  • x - Deletes the image.

To add the image to a template, copy the image tag code by clicking the “</>”, and insert this code into your template.

By default the ALT tag will be the Image Name. Change this as necessary.

Sample Image Tag

Insert this tag into your template to test it out!

<img src='https://d1pgqke3goo8l6.cloudfront.net/tkfNLkRPWbAGsGZ2bFKQ_swu_kit_logo_dark.png'
     alt='Sendwithus Logo' />

Videos in Email

Video support in email is growing, but many email clients still do not support inline video playback. Knowing that videos can provide a more engaging experience to your audience, even without inline playback support, there are several ways we can mimic this behavior.

The most popular tried-and-true method is to capture a screenshot of the video and overlay a clickable play icon on top of that image. Using that image, you can now add it to your email and link that image directly to an external video source.

Image with Playback Button

In recent times, we are seeing more and more users add GIFs in email. This is a great tactic to utilize and will encourage users to stop and view the video preview, which could directly result in an increased clickthrough rate. It’s worth noting many email clients are starting to support GIFs, and the ones that don’t currently offer support will render the first frame of the GIF.

GIF with Playback Button

Forms in Email

Most email clients do not supports forms in emails. If you want to include a form, the best way is to create a link that sends your customer to a form hosted on your end to obtain the desired results.

Test Emails on Email Clients

When building an email, the key to success is making sure you test it. Testing can range from all aspects of the email— from CSS formatting, content correctness, and simply making sure all links are working.

We recommend at a minimum to test your email across multiple email clients to ensure your users are not only getting a consistent experience, but more importantly, to verify all aspects of the email are viewable.

Device Testing provides a great and simple way of previewing your template in different email clients. For more information visit our Using Device Testing guide.

Add Buttons

Having a vibrant and clear call-to-action is crucial to the success of your email. Making sure it not only is visually pleasing, but also ensuring the user is able to access it through mobile or desktop email clients is vital. In the past, this was commonly done through images. But now, with the majority of email clients not showing images by default, this can heavily decrease your click rate.

Building the buttons using HTML and CSS will allow the button to be displayed within the email, even with images not showing. Adjusting the button to match the design of the email is easier because, instead of spending time building a new button as an image, you could modify a couple lines of code.

If you want to create some bulletproof email buttons, we recommend checking out Buttons.cm and play around with the buttons.

Unsubscribe links in an email provide a way for your customers to stop receiving certain emails you send. Adding these links will be different depending on the ESP you are using.

When implementing unsubscribe links we recommend using two different ESPs accounts. The reason behind this is, if a user unsubscribes from one of your marketing emails (Newsletter, Updates), we want your users to still receive your important transactional emails (Activation, Forget Password).

Certain ESP allows for subusers/subaccounts for this purpose like Sendgrid and Mandrill.

Visit the full documentation on Unsubscribes here.

Sometimes when an email doesn’t render properly for an email client, viewing the content can be near impossible. Adding a simple link to a browser will help the customer view the intended message.

Visit How do I add a webview link to learn how to insert a webview link.

This sample webview link is using a Sendwithus Built-in Variable.

<a href="{{ swu.webview_url }}"> Not working? Click here to View in Browser. </a>

Test this code in your own emails!

Include a Plain Text Version

It is generally good practice to include a plain text version. Plain text emails are more accessible and easier for users that require a screen reader, and many older email clients may not support HTML formatted messages. Additionally, most spam filters can detect if there is only an HTML version of the template, and this could have a negative impact on the spam rating.

To create the plain text version of your email, click the “Plain Text” tab and write out the email content that should be shown to a recipient who is unable to view HTML — this version will be sent alongside the HTML version and used as a fallback when needed.

Use Snippets

When building emails, if you are using repeated blocks of code, you should consider using Snippets! Snippets make it easy to manage and edit code blocks for multiple email templates containing repeated code.

For instance, if you are using one header for all your emails, putting this into snippets can help organize your templates. Snippets will reduce the time needed to edit templates by not having to edit individual emails. Best of all, this is super easy to do! Look below for a sample snippet or visit What are Snippets for more information.

Sample Snippet

Click on the Snippets tab on the Sendwithus dashboard.

Create a new snippet by clicking the + Create Snippet button and name your Snippet: test_snippet

Copy and Paste the sample below or input your own content!

<h1> Hello everybody! I'm testing out snippets! </h1>

Once completed, save the snippet and copy {% snippet "test_snippet" %} into a template to test it out.

For more information, visit What are Snippets

Dynamic Email Content

Having dynamic content can personalize the feeling of the email to a customer. Dynamic content can take personalized information and use that to display different content to different customers.

For instance, if you have information on a customer, like location, you can use our templating language, Jinja, to personalize the email to that customer.

Sample Code

Personalized Name

Hello {{ first_name|default('there', true) }}!

Personalized Greeting

{% if time_zone == "PST" %}
Good morning{% if first_name %}, {{ first_name }}{% endif %}!
{% else %}
Good afternoon{% if first_name %}, {{ first_name }}{% endif %}!
{% endif %}

Personalized Location

{% if city == "Victoria" %}
  I see you are in {{ city }}!
  Here are some local events!
  {% snippet "local_events" %}
{% else %}
  I see you are not in Victoria.
  {% snippet "default_events" %}
{% endif %}

Use Sendwithus Variables

Simple variable replacement can be achieved using the following syntax.

API Call

The provided JSON example below displays the template_data parameter on the Send API call. Replace the following parameters in the cURL example with your own data to run the command:

  • template: Template ID
  • recipient: Email Address
  • test_abcde12345: Test API key
            curl -i -X POST -d '{
                "template":"tem_abcde12345",
                "recipient": {
                    "address": "user@example.com"
                },
                "template_data": {
                    "first_name": "Bill",
                    "img": {
                        "url": "https://www.fillmurray.com/g/200/300",
                        "name": "cheers"
                    },
                    "link": {
                        "url": "https://www.sendwithus.com",
                        "text": "sendwithus!"
                    }
                }
            }' -u test_abcde12345: https://api.sendwithus.com/api/v1/send
            
            {
                "first_name": "Bill",
                "img": {
                    "url": "https://www.fillmurray.com/g/200/300",
                    "name": "cheers"
                },
                "link": {
                  "url": "https://www.sendwithus.com",
                  "text": "sendwithus!"
                }
            }

Template HTML

<html>
    <head>
    </head>
    <body>
        <h1>Hello, {{ first_name }}!</h1>
        <img src="{{ img.url }}" alt="{{ img.name }}" />
        <a href="{{ link.url }}">{{ link.text }}</a>
    </body>
</html>

Rendered HTML

        
Hello, Bill!

        cheers
        sendwithus!

Sample Data Tab

In the Template Editor, there is a tab called Sample Data. This tab allows you to preview your template variables with test data that you have added. This allows you to get a better understanding of what the email will look like before you send a test email.

The sample data in this tab will only work if the JSON is properly formatted. If there is a JSON error, a red x will appear. If you hover over the red x, there will be a brief description of the error.

Template:

Hello {{ first_name }}.
Confirm your order:
{{ item.name }} - {{ item.desc }} - x{{ item.quan }}
Total: ${{ item.price }}

Sample Data Tab:

{
  "first_name": "Bill",
  "item": {
    "name": "Cupcakes",
    "desc": "With Sprinkles!",
    "quan": 12,
    "price": 20.00
  }
}

Preview Tab (Results):

Hello Bill.
Confirm your order:
Cupcakes - With Sprinkles! - x12
Total: $20.00

Visit our Understanding Sample Data documentation for more information.

Preheader

In the most simplest form, the preheader is the text that appears after your subject line in an email.

Preheader Example

The text is automatically pulled from the copy of email body and is what your customer will see before they open the email. Customizing this can increase the open rate of the email by captivating your customer’s attention with an intriguing sentence or call to action.

How to Add a Preheader

Adding a preheader is simple in Sendwithus. Go to your Templates page in the Sendwithus dashboard and select a template to edit. Click the Preheader tab and add your text here.

Visit our What are Preheaders in Emails for more information.