html_coding

Working with email templates

Working with email templates is not easy as it looks on designed template (usualy it's just one page).
In few paragraph I will try to describe what i so hard about coding email templates, so here are my views.

If you wan't your email newsletter to look nice on all devices (Android, Iphone, Tablets, Desktops), or how we progammers say to be responsive, you will have to work a lot to acomplish that. My exprerience is not so far, I working just about a year with email templates, but for that time I come to many problems with viewing my freshly coded email on providers like Gmail, Outlook , IE, Lotus and etc and especialy on mobile.

A conditional table for Outlook

To place elements beside each other in Outlook, we need to introduce an HTML table. But to prevent it from messing up our mobile version, the table will be hidden inside conditional comments:

Conditional comments enable us to specifically target Outlook. To other email clients the code looks like regular HTML comments, which are ignored when rendering the email.

The [if (mso)|(IE)] expression means we’re targeting all versions of Microsoft Office, i.e. Outlook 2007/2010/2013/2016 which share their rendering engine with Word, and all versions of Internet Explorer, which is used to render emails in Outlook 2000/2002/2003.

 

Gmail

The main problem with this client provider is that he don't read CSS code in the head. So applying styles in head and making responsive with media queries will not help. So you will probably ask , what to do next ? As it usualy goes, coding and styling will apply on every client if you write your code in-line.

But  general question is how to make email responsive, to look and fit nice in all browsers. Here are some answers which I found.

Instead of setting a CSS property to a fixed number value like 600px, you can set it to a calc() function containing a mathematical expression. In our case, we want the width of our layouts and columns to change depending on the width of the email client.

 

For our .layout width, we’ll use the following function:

The layout has a desktop width of 600px and a mobile width of 320px. And we’ll use the same 620px breakpoint as in our media query to switch between the two.

With the numbers filled in, the function looks like this:

When the email client executes this function, the 100% is replaced with the email client width.

We can mathematically simplify the function:

When the email client width is exactly 620px, this function returns 600px, which is the desktop width we want. But if the email client width is reduced by just one pixel to 619px, the result is 320px, our mobile width. This allows us to switch successfully between desktop and mobile views on the right screens.

pic7

The email client width will rarely be exactly 619px or 620px though. So to limit the range of possible widths to just the two we want, we set 600px as the max-width and 320px as the min-width.

With these inline styles, we can achieve something similar to our media query, without the need for media query support. While calc() isn’t supported everywhere, it does work in all of Google’s email clients, both webmail and mobile.

Because older mobile email client versions don’t support calc() functions, we’ll also keep the pixel based width from before as a fallback.

Here’s how it looks when combined:

pic8

We’ll do a similar calculation for the columns too, but we’ll base it on the width of .layout since that’s the parent of the .column elements. That means we’ll use the layout’s desktop width of 600px as the breakpoint, so when the layout switches to its desktop width, so will its columns.

The function for the 400px column works the same way as the layout:

pic9

But for the 200px column, which is wider on mobile than on desktop, we need to switch it up slightly:

pic10

We’ll also float the columns to the left, so that they’ll sit beside each other at the desktop width, but stack on mobile when only one column can fit width-wise:

pic12

And with that, we have a responsive layout that works in all of Google’s clients, as well as all other major clients.

 

pic13

 

Read next

Drupal Dev Days, Milan 2016

Between June 22nd and 26th, we were in Milan, Italy, one of the global capitals of fashion and design. But we didn't there to see some of famous fashion shows.

By Ratomir Vasiljevic