"Write letters": Three techniques of layout of good emails
The layout of letters and newsletters devoted a huge number of educational articles . In such a volume of information is very easy to get lost, and still need to write letters and do the newsletter. Therefore, today we have prepared a material in which we collected three popular techniques for effective layout of emails, suitable for beginning layout designers.
Interactive elements dilute monotonous text and save the reader's time, therefore they are a convenient tool for creating advertising letters and beautifully designed texts.
As an example, let's look at a simple way to create interactive images. It consists of three steps:
')
1. Create a table from a single cell and set a background image for it, which is shown immediately after the page loads.
2. Install the main image and “hide” it in a link with the img-swap class. This will create a hover effect: when you hover over a background image, the main thing will appear in its place.
3. Configure the: hover command and set the styles for the img-swap class.
This option of creating an interactive image is supported by services such as: Mail, Outlook, Yahoo! and Gmail (with modifications ).
Progressive improvement is a strategy that involves the phased creation of web pages - from simple to complex. First, the structure of the letter is indicated, and then work is underway to improve the appearance and usability.
First, the content of the letter is laid out using HTML to form its structure, build a layout. After this, the design is debugged with CSS tools — CSS style sets improve the design and presentation of the document — here you set the background images, set the font parameters, and so on. At the third stage, new features of the CSS3 specification are applied. After marking the content and putting it in order, the time comes to JavaScript, which is responsible for interacting with the interface and dynamic elements.
Step-by-step work with the document allows you to track errors and correct them on the spot, because the appearance of one flaw can affect the result of all the work. If you want to see a progressive improvement in action, then pay attention to the example from html academy.
Media queryMedia query –– is a component of the CSS language that allows you to select different sets of CSS styles. Style sets are the key to creating an attractive document look (you can find a good practical example of CSS in action here ).
The media request includes three consecutive components that are configured step by step:
Media queries are indispensable for optimizing the format for displaying letters on mobile devices. They allow you to switch from a fixed design to a “floating” one — such a document will look good on different platforms.
Moreover, the technology of media queries can be used for targeting services (identifying services that meet specified criteria) and adapting to them. By analogy, and targeting devices, where it is important to consider the screen size. For example, the standard code for iPhone 6 Plus looks like this:
Media queries allow you to create beautiful and, most importantly, responsive 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 letters, progressive improvements and media inquiries are quite common techniques that can turn your e-mails into small works of art, moreover, they are a good base for the further development of your layout skills.
What else do we write on the Pechkin-blog blog:
Interactive letters
Interactive elements dilute monotonous text and save the reader's time, therefore they are a convenient tool for creating advertising letters and beautifully designed texts.
As an example, let's look at a simple way to create interactive images. It consists of three steps:
')
1. Create a table from a single cell and set a background image for it, which is shown immediately after the page loads.
<table cellpadding=0 cellspacing=0 border=0><tr> <td width=240 background="http://.../alternate-image.jpg"> </td></tr></table> 2. Install the main image and “hide” it in a link with the img-swap class. This will create a hover effect: when you hover over a background image, the main thing will appear 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. Configure the: hover command and set the styles for the img-swap class.
<style> .img-swap { display: block; width: 240px; height: 170px; } .img-swap:hover img { height: 0px; } </style> This option of creating an interactive image is supported by services such as: Mail, Outlook, Yahoo! and Gmail (with modifications ).
Progressive enhancement
Progressive improvement is a strategy that involves the phased creation of web pages - from simple to complex. First, the structure of the letter is indicated, and then work is underway to improve the appearance and usability.
First, the content of the letter is laid out using HTML to form its structure, build a layout. After this, the design is debugged with CSS tools — CSS style sets improve the design and presentation of the document — here you set the background images, set the font parameters, and so on. At the third stage, new features of the CSS3 specification are applied. After marking the content and putting it in order, the time comes to JavaScript, which is responsible for interacting with the interface and dynamic elements.
Step-by-step work with the document allows you to track errors and correct them on the spot, because the appearance of one flaw can affect the result of all the work. If you want to see a progressive improvement in action, then pay attention to the example from html academy.
Media queries
Media queryMedia query –– is a component of the CSS language that allows you to select different sets of CSS styles. Style sets are the key to creating an attractive document look (you can find a good practical example of CSS in action here ).
The media request includes three consecutive components that are configured step by step:
- Media type - defines the environment for applying the rules. There are types such as all, print, screen (used for email) and speech
- Expressions is a list of device properties that describe, for example, the width (width) and height (height) of the screen, color
- Style rules are applied when opening a letter in the environment corresponding to the type and properties in the expression
Media queries are indispensable for optimizing the format for displaying letters on mobile devices. They allow you to switch from a fixed design to a “floating” one — such a document will look good on different platforms.
Moreover, the technology of media queries can be used for targeting services (identifying services that meet specified criteria) and adapting to them. By analogy, and targeting devices, where it is important to consider the screen size. For example, the standard code for iPhone 6 Plus looks like this:
@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, responsive 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 letters, progressive improvements and media inquiries are quite common techniques that can turn your e-mails into small works of art, moreover, they are a good base for the further development of your layout skills.
What else do we write on the Pechkin-blog blog:
- Email Marketing: Recipe for Correct Plain-Text Letters
- How-to: interactive writing guide
- Pechkin-mail "wiki": Checklist for email newsletters
- Interfaces and usability: Who designs UX and how
- "Let's talk about it": The work of the designer
Source: https://habr.com/ru/post/311572/
All Articles