Image for post
Image for post

Testing is super important.

Can you see that tornado in the top banner? That’s how I feel each time I have to test something. I know tornado is incoming ;)

Your email service provider should provide you with tools for sending out test campaigns without the need of broadcasting them. Mailchimp not only allows that but if you have a paid account you can preview your email in different inboxes.

It’s always a good idea to create email accounts in different services (gmail, yahoo, outlook) and then broadcast your campaign to those clients. …


Image for post
Image for post

There are few options to make interactive email campaigns.
You could use CSS animations, animated gifs, cinemagraphs, embed videos… It all depends on what you’re trying to achieve and what email clients your subscribers use the most. CSS animations or embed videos have poor support in most email clients. For videos it’s better to use image of your video first frame and link it to the actual video. Instead of css animations, it’s better to use gifs/cinemagraphs. Nonetheless I have created an example of css animation for our template, just for research/fun purposes. CSS animations work in IOS Mail and hopefully will work in more email clients soon. …


Image for post
Image for post

In our template we have 5 types of components we have not talked about yet. Let’s go through them one by one.

Standalone banner

Adding standalone banner is super simple, link your image (making sure path to the image is absolute, no /img/something.jpg) and set it to display:block and max-width:100%.

<tr>
<td>
<a href=”#” target=”_blank”><img src=”https://gallery.mailchimp.com/99296cba23fe4aa7d71093a67/images/7d939f97-72ea-49b6-a123-e83f82612148.jpg" style=”max-width: 100%; display: block” alt=”Awesome header” title=”Awesome header”></a>
</td>
</tr>

Two columns with copy

With two columns of copy right next to one another, we need to think about how they will behave on mobile. They have to stay two columns on desktop but span to full size on mobile.

<tr>
<td>
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%” style=”max-width: 600px;”>
<tr>
<td>
<! — [if (gte mso 9)|(IE)]>
<table border=”0" cellspacing=”0" cellpadding=”0" width=”600">
<tr>
<td align=”left” valign=”top” width=”300">
<![endif] →
<div style=”width: 50%; float: left; vertical-align: top;” class=”responsive-full”>
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%” style=”font-family:Arial, Helvetica, sans-serif; font-size: 14px;”>
<tr>
<td style=”width: 20px” class=”resp-equal-space”></td>
<td>
<p style=”padding: 0; margin: 0; font-size: 24px; font-weight: bold”>Title here</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a vestibulum lorem, sit amet aliquam turpis. Etiam id cursus lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </td>
<td style=”width: 10px” class=”resp-equal-space”></td>
</tr>
</table>
</div>
<! — [if (gte mso 9)|(IE)]>
</td>
<td align=”right” valign=”top” width=”300">
<![endif] →
<div style=”width: 50%; float: left; vertical-align: top;” class=”responsive-full”>
<table border=”0" cellpadding=”0" cellspacing=”0" width=”100%” style=”font-family:Arial, Helvetica, sans-serif; font-size: 14px;”>
<tr>
<td style=”width: 10px” class=”resp-equal-space”></td>
<td>
<p style=”padding: 0; margin: 0; font-size: 24px; font-weight: bold”>Title here too</p>Morbi blandit fermentum nunc, non pretium turpis convallis a. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed nibh nibh. In eget lorem in mi blandit auctor eget eget elit.</td>
<td style=”width: 20px” class=”resp-equal-space”></td>
</tr>
</table>
</div>
<! — [if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif] …

Image for post
Image for post

Preheader

Lets start from the top. First part of the email campaign is an optional preheader. It’s a good practice to keep it in your template but it’s not required. Preheader is a copy that will display as a description next to the subject line in your email client.


Image for post
Image for post

Ok! Let’s get to work.

Our email campaign is divided into sections. I want to show you how you can code/create different sections so later on you will be able to mix them however you want in your actual campaign.

Our email is a one big table with one column and many rows. Each row consists of another table… sometimes with a table inside. Nested tables keep everything stable, so you can be sure things don’t start to randomly float around in various email clients.

It’s important to note all styling should be done inline. A lot of email clients will strip anything inside <style></style> tag in the document head, so just to be on the safe side… put everything inline. Only exception would be css animations and mobile responsiveness because you can’t style media queries inline. Things you add in media queries should be ‘nice to have’ things, because if those are stripped off… you need a working desktop version as a fallback. …


Image for post
Image for post

I’ve been involved in email marketing for years now; from designing, coding to cleaning customer lists, broadcasting campaigns and reporting, I’ve done it all.

With this 6 part tutorial I will show you how to develop a mobile responsive email template that will hopefully make you excited about your future campaigns.

You might wonder why would you need to develop email templates yourself when there are so many different email service providers with ready to go templates. You just drag and drop things, easy!
True…
For most of your campaigns WYSIWYG editor will be just fine. Some emails though, you will want to look in a way that using WYSIWYG might be quite challenging or impossible to do. Once you learn how to develop your own templates from scratch, you’ll see how easy and fast it is to build them. …


Image for post
Image for post

I love email marketing. Absolutely love it!
It lets you engage with your subscribers/customers in a fun, personalized way at the time and place… they choose (e.g. lunch break in their car ;P).
Now… automated email campaigns are like the kings (and queens) of email marketing. Not only they save you precious time but also let you learn more about your subscribers.

*insert dramatic music*

Do you want better, faster, stronger campaigns? Do you want to know what your customers/subscribers are after? Do you want them to never unsubscribe and eagerly wait for your next campaign?

*thunder strikes in the…


What was Impact’18? It was a conference held in Krakow (Poland) that tackled the topics of industry 4.0, AI, IoT, technology, science, biotech, fintech, transportation, environment, innovation and all things digital. Focus is global and speakers were from all over the world (250+ of them!). It was brilliant, inspiring and fun! What more can you want from a conference?

Image for post
Image for post

So here’s my top 5 things I’ve learned during Impact’18

  1. We need to get ready for the future tech

Our world is changing rapidly and so does technology. We need to embrace the culture of new tech. We need to educate ourselves but also the world around us, especially that with new technologies, completely new set of skills will be necessary. …


See game first and then read about it below :) Please note everything is done in pure css, no images or js used.
https://bubble-festival-css-game.netlify.com/

Sometimes days like this happen… Special days… you wake up and think ‘I need to do something cool, like NOW. But coffee first’.
Definition of cool is very wide, it can mean anything from baking a blueberry pie to sewing hole in your favorite sock. For me it was making my own css game (I don’t have fav socks).

I saw examples of pure css games some time ago and they blew me away. I mean… I love css, totally love it and to be able to create a gaming experience, even a very limited one, with it was like a ‘OMG, that’s why I was born’ kind of moment (I’m overreacting a bit, but whatever). …


Recently I started a Front End Developer training. I’m not a complete newbie, I already could do some css/html and very tiny bit of js before starting the training but I definitely have LOADS to learn. One should never stop learning, right?

Anyway, during one of those lessons css drawings were mentioned. I remember seeing some examples few years back but I always thought it’s a complete madness and hardcore to make them. …

About

Alicja Wolkowska

Digital developer, technology enthusiast, gamer, photographer and an amateur painter. I also make awesome waffles.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store