How-to: interactive writing guide
Interactivity can change the attitude of email subscribers to receive emails, Internet marketers are sure . Many people believe that mailing letters are boring and static, although we, as marketers, know that this is far from being the case.
The possibilities for interactive emails are endless. ” It is enough to add animation and take into account the interests of users of mobile devices, and the distribution will play with new colors.
Interactive tabs, hover-effect and pagination - we studied the main trends in the development of interactive emails.
')
Pagination (it’s also paginated text navigation) is extremely convenient for use in letters of mobile mailings. The introduction of responsive design letters has led to the inevitable scrolling of content - the longer the letter, the more unnecessary movements have to make the user of the mobile device.
Despite the fact that the very popularization of sensory devices supports the “ endless scrolling ”, not every subscriber is ready to scroll through long messages. Some users suffer from slow scrolling altogether. That is why pagination, a mechanism for dividing content into separate pages, can be an excellent solution to the problem of "unread messages."
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, access to each of which will be done with a click. The “reader mode” launch button in this case is wrapped in a label that switches the checkbox using the navigation cell id.
In order for the pagination to work, the content should be easily logically divided into separate articles, each of which must be wrapped in two containers. After activating the: checked selector (which happens if the user chooses a version for reading), the outer container displays the first fragment of the letter to the full width and height of the visible screen area, leaving free space for the articles menu.
The inner container occupies the width of the visible area multiplied by the number of articles. Articles are ordered 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 the selected radio element has a selector call: checked, the internal container is shifted by the width of one or several leafed articles. To easily move between individual articles, you need to create arrow marks that, when clicked, will be able to activate the desired radio element.
The resulting "sliding effect" when turning the page helps the user to quickly find the necessary materials. This will also help in the index menu of articles containing a list of tags associated with individual parts of the letter (displayed when the user clicks the menu using the: hover selector).
Where it works: in the Mail Mail application for the iPhone (the Android version is in development)
A hover effect will help make emails more attractive to an email subscriber - changing content when you hover over. The technology is actively used on sites, however, “changing images” can also look organically 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 need two images - the background image and the one that appears when you hover. Then you need to assign the main image. It is wrapped in a link with the “img-swap” class added, 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 possible: Another hover-based technique allows you to navigate supported (iOS Mail, Android 4.x Mail, Yahoo! Mail, Outlook.com and Gmail.com) and unsupported (desktop Outlook, Gmail mobile apps and Gmail for business) customers: the latter see not the original image, but immediately appearing image.
If the mailer 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, you need to change the order of actions: the cover image will become the background image, 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 of no interest and without scrolling through the text.
How it can work:
The headings of the tabs are wrapped with labels and placed under a linked radio element that is hidden using styles. Each header is associated with a radio element using the for attribute — this is why clicking on the header activates a radio element with an id that matches the value of the for attribute.
However, this technology, which works perfectly with mobile and webkit-based mail programs (for example, applications for iOS and Android), has a number of errors when interacting with the web. Despite the fact that on the Internet you can find a lot of introductory materials on the layout of interactive tabs on CSS, not all of them take into account the features of CSS web mail client processors (for example, Gmail cuts out classes and id, Outlook.com does not support the pseudo-class: checked, and Yahoo! Mail cuts the selector (~) and renames id and classes when rendering, in which case the for attribute becomes useless).
This is how it works on the web:
In order to completely abandon the unsupported attribute of a number of web versions of e-mail clients, the radio element and the contents of the tab can be placed inside the label. Clicking a user on a tag will automatically activate the radio element embedded in it.
The use of the “nesting dolls method” is acceptable: tags, tags and content can be nested in each other. This will introduce a selector (+), in which the activated and target elements must be linked to each other - in the web version, the radio element and the wrapper span are linked.
In addition, it is necessary to take into account that users of unsupported mail programs may see a “broken” letter. To avoid this, you can completely hide everything on the page that is related to tabs, or you can wrap the content of tabs in a div container, which will be hidden. At the same time, a selector is added to the style block, which with the help of: checked displays the div-container if the selector is the same.
PS Other materials from the blog Pechkin-mail :
The possibilities for interactive emails are endless. ” It is enough to add animation and take into account the interests of users of mobile devices, and the distribution will play with new colors.
Interactive tabs, hover-effect and pagination - we studied the main trends in the development of interactive emails.
')
1. Pagination
Pagination (it’s also paginated text navigation) is extremely convenient for use in letters of mobile mailings. The introduction of responsive design letters has led to the inevitable scrolling of content - the longer the letter, the more unnecessary movements have to make the user of the mobile device.
Despite the fact that the very popularization of sensory devices supports the “ endless scrolling ”, not every subscriber is ready to scroll through long messages. Some users suffer from slow scrolling altogether. That is why pagination, a mechanism for dividing content into separate pages, can be an excellent solution to the problem of "unread messages."
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, access to each of which will be done with a click. The “reader mode” launch button in this case is wrapped in a label that switches the checkbox using the navigation cell id.
In order for the pagination to work, the content should be easily logically divided into separate articles, each of which must be wrapped in two containers. After activating the: checked selector (which happens if the user chooses a version for reading), the outer container displays the first fragment of the letter to the full width and height of the visible screen area, leaving free space for the articles menu.
The inner container occupies the width of the visible area multiplied by the number of articles. Articles are ordered 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 the selected radio element has a selector call: checked, the internal container is shifted by the width of one or several leafed articles. To easily move between individual articles, you need to create arrow marks that, when clicked, will be able to activate the desired radio element.
The resulting "sliding effect" when turning the page helps the user to quickly find the necessary materials. This will also help in the index menu of articles containing a list of tags associated with individual parts of the letter (displayed when the user clicks the menu using the: hover selector).
Where it works: in the Mail Mail application for the iPhone (the Android version is in development)
2. Creating Interactive Emails with CSS
A hover effect will help make emails more attractive to an email subscriber - changing content when you hover over. The technology is actively used on sites, however, “changing images” can also look organically 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 need two images - the background image and the one that appears when you hover. Then you need to assign the main image. It is wrapped in a link with the “img-swap” class added, 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 possible: Another hover-based technique allows you to navigate supported (iOS Mail, Android 4.x Mail, Yahoo! Mail, Outlook.com and Gmail.com) and unsupported (desktop Outlook, Gmail mobile apps and Gmail for business) customers: the latter see not the original image, but immediately appearing image.
If the mailer 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, you need to change the order of actions: the cover image will become the background image, 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 of no interest and without scrolling through the text.
How it can work:
The headings of the tabs are wrapped with labels and placed under a linked radio element that is hidden using styles. Each header is associated with a radio element using the for attribute — this is why clicking on the header activates a radio element with an id that matches the value of the for attribute.
However, this technology, which works perfectly with mobile and webkit-based mail programs (for example, applications for iOS and Android), has a number of errors when interacting with the web. Despite the fact that on the Internet you can find a lot of introductory materials on the layout of interactive tabs on CSS, not all of them take into account the features of CSS web mail client processors (for example, Gmail cuts out classes and id, Outlook.com does not support the pseudo-class: checked, and Yahoo! Mail cuts the selector (~) and renames id and classes when rendering, in which case the for attribute becomes useless).
This is how it works on the web:
In order to completely abandon the unsupported attribute of a number of web versions of e-mail clients, the radio element and the contents of the tab can be placed inside the label. Clicking a user on a tag will automatically activate the radio element embedded in it.
The use of the “nesting dolls method” is acceptable: tags, tags and content can be nested in each other. This will introduce a selector (+), in which the activated and target elements must be linked to each other - in the web version, the radio element and the wrapper span are linked.
In addition, it is necessary to take into account that users of unsupported mail programs may see a “broken” letter. To avoid this, you can completely hide everything on the page that is related to tabs, or you can wrap the content of tabs in a div container, which will be hidden. At the same time, a selector is added to the style block, which with the help of: checked displays the div-container if the selector is the same.
PS Other materials from the blog Pechkin-mail :
Source: https://habr.com/ru/post/308954/
All Articles