Annonce Responsive Newsletter Template

Annonce, the biggest classified ads newspaper in the Czech Republic needed to communicate with their 150 000 subscribers. They wanted a newsletter template that would be both in sync with the redesigned printed edition and - similar to the responsive website - optimised for mobile/tablet.

Design

We designed two versions. One for regular displays (600px width) and one for smartphone (320px width).

regular version of the email newsletter

regular version

smartphone version of the email newsletter

smartphone version

Technical aspects

There were a few things we first scratched our heads over.

  1. Disappearing content on smartphone
    We didn't want to show the navigation as well as one of the pictures. CSS display="none" did work there and it has support in all major e-mail clients.
  2. Tiling background
    It works fine with body tag. The only problem is that we needed it in the footer and Outlook seems to have a different grasp of line height. We had to resort to VML to achieve this. So we basically told different versions of Outlook to get different background files.
  3. Calling each recipient by name
    This is relatively easy, you just need variables passed on to the e-mailing software, in our case CampaignMonitor. The only problem was, Czech language has something called declension, so we had to change all names to a Vocative state. No easy task since there were more than 140 000 recipients. I couldn't be done by hand, but the client came to the rescue. His programmer designed a program that made the conversion based on language rules, detection of gender and data from the Statistical Office.
  4. Using transparency
    Transparent PNGs worked in most e-mail clients. But not in Outlook. Again. So we did some VML magic and made it work in all e-mail clients.
  5. Floating content
    The CSS float property is not supported in e-mail clients, but since we remember the table layout days, we knew to use the table align property. The only trouble is that some e-mail clients add a 3px margin around the floated table.
  6. A/B testing
    We split test all our client e-mails. We make two variations, send each version to 10-15% of recipients. See the results and then send the winning version to the rest of the recipients.

Clients

We have designed, coded and sent out e-mails for:

Allianz amadeus Annonce Google
Heineken Isebox Mandarin Oriental Renault