Tag: marketing

  • “Write letters”: Three techniques of a good layout of emails

    “Write letters”: Three techniques of a good layout of emails

    To the layout of letters and mailings devoted to a huge amount of tutorials. In this volume of information is very easy to get lost, and to write letters and do mailings still need. So today we have prepared material, which was collected three popular techniques for effective layout of emails, suitable for beginner web designers.

    Interactive writing

    Interactive elements dilute the monotonous text and save the reader’s time, and therefore are easy tool for creating sales letters and beautifully designed texts.

    As an example, let’s look at a simple way of creating interactive images. It consists of three steps:

    1. Create a table of one cell and set an background image that is displayed immediately after page loads.

    <table cellpadding=0 cellspacing=0 border=0><tr>
    <td width=240 background="http://.../alternate-image.jpg">
    </td></tr></table>

    2. Set the main image and “hide” it in a link with the class img-swap. This will create a hover-effect: when you hover over the background image, the main image will be in its place.

    <table cellpadding=0 cellspacing=0 border=0><tr><td width=240 background="http://../alternate-image.jpg"><a class="img-swap" href="http://../link"><img src="http://../primary-image.jpg" width="240" height="170" border="0" style="display:block;" alt="the product"></a></td></tr></table>
    

    3. Set up a command :hover and set the styles for the class img-swap.

    <style>.img-swap {  display: block;  width: 240px;  height: 170px;} .img-swap:hover img {  height: 0px;}</style>

    This version of the creation of interactive images is supported by services like: Mail, Outlook, Yahoo! and Gmail (with modifications).

    Progressive enhancement

    Progressive enhancement is a strategy involving the gradual creation of web pages – from simple to complex. First is the structure of the letter, and then to work on improving the appearance and usability.

    First, the content of email is marked up using HTML to form the structure, to build the layout. After that comes the debugging of the design by tools of CSS – sets the CSS styles improve the design and presentation of the document – here you can set background image, set font options, and so on. In the third stage apply the new capabilities of CSS3. After marking the content, and bring it in order, comes time of JavaScript that is responsible for communication with the interface and dynamic elements.

    Step-by-step work with a document allows you to track bugs and fix them on the spot, because the appearance of a single defect can affect the result of all the work. If you want to look at progressive enhancement in action, then pay attention to the example from html academy.

    Media queries

    Media query is the component of the CSS language, allowing you to select different sets of CSS styles. Sets of styles – the key to creating an attractive appearance of the document (illustrative practical example of CSS in action you will find the link).

    A media query consists of three sequential components that are configured step by step:

    • Media type – identifies the environment the application of the rules. There are such types, as all, print, screen (used for email) and speech
    • Expressions is a list of device properties describing, for example, the width and height  of the screen, the color
    • Rules of styles are used when you open a message in an environment appropriate to the type and properties in the expression

    Media queries are indispensable for optimizing the display format of emails on mobile devices. They allow you to move from a fixed design to a “floating” – the document will look good on different platforms.

    Moreover, the technology of media queries can be used for targeting of services (selection services that meet the specified criteria) and adapting to them. By analogy devices are targeted, where it is important to take into account the size of the screen. For example, the standard code for the iPhone 6 Plus is as follows:

    @media screen and (max-device-width: 414px) and (max-device-height: 776px) {    /* Insert styles here */
    

    Media queries allow you to create beautiful and, most importantly, adaptive emails that look good on any device, but you need to be prepared for the fact that many email clients do not support this technology.

    Interactive writing, progressive enhancement and media queries – it’s quite common techniques that can turn your electronic message into small works of art, moreover, they are a good basis for further development of your layout skills.

    This text is a translation of the article “«Пишите письма»: Три техники верстки хороших email’ов”  published by @mailman on habrahabr.ru.

    About the CleanTalk service

    CleanTalk is a cloud service to protect websites from spam bots. CleanTalk uses protection methods that are invisible to the visitors of the website. This allows you to abandon the methods of protection that require the user to prove that he is a human (captcha, question-answer etc.).

  • How-to: Techniques of creating interactive e-mail using CSS

    In our blog, we have already talked about how to implement pagination in a letter, but this is not the only version of interactive e-mailing. In some cases, you can create eye-catching emails using the hover-effect when the content changes when you hover over it.

    Today we present to your attention a selection of FreshInbox blog articles about how to create an interactive email.

    The first method involves three simple steps.

    Step 1: the table and background image

    First, you need to create a table that will contain one cell with the image as the background:

    
    <table style="height: 31px;" border="0" width="389" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <td width="240"></td>
    </tr>
    </tbody>
    </table>
    

    Step 2: link and image

    For hover- effect you need two images — one is shown initially and the other appears when you hover. The second step is to define the main image to be “wrapped” by link. Also, add to the link the class “img-swap” and apply to the image property display:block.

    
    <table cellpadding=0 cellspacing=0 border=0><tr><td width=240 background="http://../alternate-image.jpg"><a class="img-swap" href="http://../link"><img src="http://../primary-image.jpg" width="240" height="170" border="0" style="display:block;" alt="the product"></a></td></tr></table>

    Step 3: style and hover

    The final step is to add to the link styles and setting for it pseudo-class :hover, “targeted” on the image. Set the height of the image to 0px in that case, when the cursor hovers over a link, you can hide the image that the “background” image of the cell. Style display is set to :block for the link kept the width and height, even if concluded in it hidden image.

    
    <style>
    .img-swap {
    display: block;
    width: 240px;
    height: 170px;
    }
    .img-swap:hover img {
    height: 0px;
    }
    </style>
    

    This method is supported in Yahoo! Mail Outlook.com (and Outlook 2003). There is a modification for Gmail, which we have discussed in detail in a previous article.

    Click to see a surprise

    Another technique allows you to create interactive emails using the hover-effect, and for mobile users to show “surprise” after a click on the picture.

    This method is similar to the one described above but it differs in that, initially, for unsupported clients is not shown the original image, and the picture appears. This allows users with unsupported email programs not to miss the very meaning of the letters (although all the interactivity they will not be available).

    Supported clients: iOS Mail, Android 4.x Mail, Yahoo! Mail Outlook.com and Gmail.com (with described at the link above hack with attribute selectors).

    Unsupported clients: desktop, Outlook, mobile Gmail and Gmail for business

    What is the difference from the previous method

    To make it possible to display the opened image, you need to implement small changes compared to the previous version of the technique. Instead of using image-cover as overlay, and opened the pictures as a background, we need to do the opposite:

    
    <table border=1 cellpadding=0 cellspacing=0 background="http://freshinbox.com/examples/rollover-reveal-simple/images/reveal-close-l.jpg"><tr><td><a class="reveal" lang="x-reveal" style="display:block;width:500px;height:400px;"   href="#">  <img src="1450830627199316115658"   style="display:block;" height=400 width=500 alt="A surprise!" border=0></a></td></tr></table>
    

    Opened the image will be the main, and the original “cover” will become the background. Then on supported email clients, we initially hide the overlay, showing only the cover (i.e. the background). When the user hovers the cursor over the image, he has to be shown the hidden image.

    So, instead of:

    
    rollover:hover img{    max-height: 0px;    height:0px;}
    
     
    
    The code will look like this:
    
    .reveal img{max-height:0px;height:0px;}.reveal:hover img{  max-height: none;  height: auto;}
    

    Thus, if your email program does not support interactivity, the user will see the image, which eventually opens on hover. In this case, the wow-effect is lost but retained the meaning of the message.

    Besides, the image is wrapped in a “dead link” – it is necessary in order to effect triggered by tap on iOS and Android. The link may be active, but then the Android users will be redirected to it. In principle, interactivity on mobile devices you can even turn off with a special media query:

    
    @media screen and (max-device-width: 1024px){  .reveal img{    max-height: none !important;    height: auto !important;  }     }
    

    Under the spoiler presents the full code for the example (to work with it, you can on Codepen):

    This text is a translation of the article “How-to: Техники создания интерактивных email-писем с помощью CSS”  published by @lol_wat on habrahabr.ru.

    About the CleanTalk service

    CleanTalk is a cloud service to protect websites from spam bots. CleanTalk uses protection methods that are invisible to the visitors of the website. This allows you to abandon the methods of protection that require the user to prove that he is a human (captcha, question-answer etc.).

    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Rollover to Reveal</title>
    <!--
    This version supports mobile
    -->
    <style>
    
    /* wrapping in media query prevents styles from activating in OWA */
    .yfix{}
    
    @media screen and (max-width:9999px) {
    .reveal img{
    max-height: 0px;
    height:0px;
    }
    .reveal:hover img{
    max-height: none;
    height: auto;
    }
    
    * [lang=x-reveal] img{
    max-height: 0px;
    height:0px;
    }
    * [lang=x-reveal]:hover img{
    max-height: none;
    height: auto;
    }
    }
    
    </style>
    </head>
    <body style="margin:0px; padding:0px;">
    
    <table border=1 cellpadding=0 cellspacing=0 background="http://freshinbox.com/examples/rollover-reveal-simple/images/reveal-close-l.jpg"><tr>
    <td><a class="reveal" lang="x-reveal" style="display:block;width:500px;height:400px;" href="#"><img src="1450830627199316115658" style="display:block;" height=400 width=500 alt="A surprise!" border=0></a></td>
    </tr></table>
    
    </body>