September 1, 2016 at 09:27How-to: Interactive Email Creation Guide
Interactivity is able to change the attitude of email newsletter subscribers to received emails, Internet marketers are sure . Many people are sure that mailing lists are boring and static, although we marketers know that this is far from the case.
The possibilities for interactive emails are simply endless. ” It is enough to add animation and take into account the interests of users of mobile devices, and the newsletter will sparkle with new colors.
Interactive tabs, hover effect and pagination - we have studied the main trends in the development of interactive emails.
Pagination (aka page-by-page text navigation) is extremely convenient for use in mobile mailing letters. The introduction of the adaptive design of letters led to the inevitable scrolling of content - the longer the letter, the more unnecessary movements the user of the mobile device has to make.
Despite the fact that the popularization of touch devices supports the “ endless scrolling ”, not every subscriber is ready to leaf through long messages. Some users even suffer from slow scrolling. That is why pagination - a mechanism for splitting content into separate pages, can be an excellent solution to the problem of "unread letters."
By clicking on a special button, the user can convert the text of the message into an adapted version for reading - the usual “sheet” will be divided into several pages, each of which will be accessed by clicking. The “reader mode” start button in this case is wrapped in a label that switches the checkbox using the id of the navigation cell.
In order for pagination to work, the content should easily be logically divided into separate articles, each of which must be wrapped in two containers. After activating the: checked selector (which happens if the user selects a reading version), the external container displays the first fragment of the message to the full width and height of the visible area of the screen, leaving free space for the article menu.
The inner container occupies the width of the visible area times the number of articles. Articles are arranged in a horizontal position, which helps to avoid “overlapping” - only one fragment of the letter should be displayed at a time. In addition, the necessary radio element is created for each individual article - when a selector element is triggered for a certain radio element: checked, the inner container is shifted by the width of one or more scanned articles. For easy movement between separate articles, you need to create arrow marks that, when pressed, can activate the desired radio element.
The resulting "sliding effect" when scrolling helps the user quickly find the necessary materials. The index menu of articles, which contains a list of labels associated with individual parts of the letter, will help (this is displayed when the user clicks on the menu using the: hover selector).
Where it works: in Mail for iPhone (Android version in development)
To make emails more attractive for the email subscriber, the hover effect will help - changing the content when you hover over. The technology is actively used on sites, but “changing images” can organically look in the text of the letter. How it works: It is necessary to create a table that will contain a cell with an image as a background. To implement the hover effect, you will need two images - a background image and a hover effect. Then you need to assign the main image. It turns into a link with the added class “img-swap”, and the display: block property is applied to the image itself. Where it works: Yahoo! Mail, Outlook.com and Outlook 2003. There is a modification for Gmail
Another option is also possible: Another hover-based technique allows you to focus on supported (iOS Mail, Android 4.x Mail, Yahoo! Mail, Outlook.com and Gmail.com) and unsupported (desktop Outlook, Gmail mobile applications and Gmail for business) clients: the latter do not see the original image, but the image that immediately appears.
If the mail program does not support interactivity, the user will not miss the basic information. The letter will not look so impressive, but the subscriber will be able to see exactly the image on which the emphasis was placed.
In order to display the attached image immediately, it is necessary to change the procedure: the cover image will become the background, and the opened image will be used as an overlay.
Interactive tabs allow you to display information in a letter in a more compact and structured way - the user gets the opportunity to access the necessary information, bypassing sections that are not interesting and without scrolling through the text.
How it can work:
Tab headers are “wrapped” in labels and placed under the associated radio element, which is hidden using styles. Each title is associated with a radio element using the for attribute - this is why a click on the header activates the radio element with an id that matches the value of the for attribute.
However, this technology, which works well with mobile and webkit-based email programs (for example, applications for iOS and Android), has a number of errors when interacting with the web. Despite the fact that you can find a lot of familiarization materials on the layout of interactive tabs on CSS on the Internet, not all of them take into account the features of CSS processors of email web clients (for example, Gmail cuts classes and id, Outlook.com does not support the pseudo-class: checked, and Yahoo! Mail cuts out the selector (~) and renders the id and classes when rendering, in which case the for attribute becomes useless).
So it works on the web:
In order to completely abandon the for attribute unsupported by several web versions of email clients, the radio element and the contents of the tab can be placed inside the label. A user’s click on the label will automatically activate the radio element embedded in it.
It is permissible to use the “nested doll method”: labels, inputs and content can be nested together. This will allow introducing a selector (+), when using which the activated and target elements must be connected to each other - in the web version the radio element and the span wrapper are connected.
In addition, please note that users of unsupported email programs may see a “broken” message. To avoid this, you can completely hide everything related to tabs on the page, or wrap the contents of the tabs in a div container that will be hidden. At the same time, a selector is added to the style block, which, using: checked, displays the div container if the selector matches.
PS Other materials from the blog Pechkin-mail :
The possibilities for interactive emails are simply endless. ” It is enough to add animation and take into account the interests of users of mobile devices, and the newsletter will sparkle with new colors.
Interactive tabs, hover effect and pagination - we have studied the main trends in the development of interactive emails.
1. Pagination
Pagination (aka page-by-page text navigation) is extremely convenient for use in mobile mailing letters. The introduction of the adaptive design of letters led to the inevitable scrolling of content - the longer the letter, the more unnecessary movements the user of the mobile device has to make.
Despite the fact that the popularization of touch devices supports the “ endless scrolling ”, not every subscriber is ready to leaf through long messages. Some users even suffer from slow scrolling. That is why pagination - a mechanism for splitting content into separate pages, can be an excellent solution to the problem of "unread letters."
How it works:
By clicking on a special button, the user can convert the text of the message into an adapted version for reading - the usual “sheet” will be divided into several pages, each of which will be accessed by clicking. The “reader mode” start button in this case is wrapped in a label that switches the checkbox using the id of the navigation cell.
In order for pagination to work, the content should easily be logically divided into separate articles, each of which must be wrapped in two containers. After activating the: checked selector (which happens if the user selects a reading version), the external container displays the first fragment of the message to the full width and height of the visible area of the screen, leaving free space for the article menu.
The inner container occupies the width of the visible area times the number of articles. Articles are arranged in a horizontal position, which helps to avoid “overlapping” - only one fragment of the letter should be displayed at a time. In addition, the necessary radio element is created for each individual article - when a selector element is triggered for a certain radio element: checked, the inner container is shifted by the width of one or more scanned articles. For easy movement between separate articles, you need to create arrow marks that, when pressed, can activate the desired radio element.
The resulting "sliding effect" when scrolling helps the user quickly find the necessary materials. The index menu of articles, which contains a list of labels associated with individual parts of the letter, will help (this is displayed when the user clicks on the menu using the: hover selector).
Where it works: in Mail for iPhone (Android version in development)
2. Create interactive emails using CSS
To make emails more attractive for the email subscriber, the hover effect will help - changing the content when you hover over. The technology is actively used on sites, but “changing images” can organically look in the text of the letter. How it works: It is necessary to create a table that will contain a cell with an image as a background. To implement the hover effect, you will need two images - a background image and a hover effect. Then you need to assign the main image. It turns into a link with the added class “img-swap”, and the display: block property is applied to the image itself. Where it works: Yahoo! Mail, Outlook.com and Outlook 2003. There is a modification for Gmail
Another option is also possible: Another hover-based technique allows you to focus on supported (iOS Mail, Android 4.x Mail, Yahoo! Mail, Outlook.com and Gmail.com) and unsupported (desktop Outlook, Gmail mobile applications and Gmail for business) clients: the latter do not see the original image, but the image that immediately appears.
If the mail program does not support interactivity, the user will not miss the basic information. The letter will not look so impressive, but the subscriber will be able to see exactly the image on which the emphasis was placed.
In order to display the attached image immediately, it is necessary to change the procedure: the cover image will become the background, and the opened image will be used as an overlay.
3. Layout of interactive tabs
Interactive tabs allow you to display information in a letter in a more compact and structured way - the user gets the opportunity to access the necessary information, bypassing sections that are not interesting and without scrolling through the text.
How it can work:
Tab headers are “wrapped” in labels and placed under the associated radio element, which is hidden using styles. Each title is associated with a radio element using the for attribute - this is why a click on the header activates the radio element with an id that matches the value of the for attribute.
However, this technology, which works well with mobile and webkit-based email programs (for example, applications for iOS and Android), has a number of errors when interacting with the web. Despite the fact that you can find a lot of familiarization materials on the layout of interactive tabs on CSS on the Internet, not all of them take into account the features of CSS processors of email web clients (for example, Gmail cuts classes and id, Outlook.com does not support the pseudo-class: checked, and Yahoo! Mail cuts out the selector (~) and renders the id and classes when rendering, in which case the for attribute becomes useless).
So it works on the web:
In order to completely abandon the for attribute unsupported by several web versions of email clients, the radio element and the contents of the tab can be placed inside the label. A user’s click on the label will automatically activate the radio element embedded in it.
It is permissible to use the “nested doll method”: labels, inputs and content can be nested together. This will allow introducing a selector (+), when using which the activated and target elements must be connected to each other - in the web version the radio element and the span wrapper are connected.
In addition, please note that users of unsupported email programs may see a “broken” message. To avoid this, you can completely hide everything related to tabs on the page, or wrap the contents of the tabs in a div container that will be hidden. At the same time, a selector is added to the style block, which, using: checked, displays the div container if the selector matches.
PS Other materials from the blog Pechkin-mail :