October 3, 2016 at 11:27“Write letters”: Three techniques for making good emails
A huge number of training articles are devoted to the layout of letters and mailings . It is very easy to get lost in such a volume of information, but you still need to write letters and do newsletters. Therefore, today we have prepared material in which we have collected three popular techniques for effective layout of emails, suitable for beginner typesetters.
Interactive elements dilute monotonous text and save reader 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 one cell and set a background image for it, which is displayed immediately after the page loads.
2. Install the main image and “hide” it in the link with the img-swap class. This will create a hover effect: when the cursor is over the background image, the main thing will appear in its place.
3. Set up the command: hover and set the styles for the img-swap class.
This option for creating an interactive image is supported by services such as: Mail, Outlook, Yahoo! and Gmail (with modifications ).
Progressive Improvement is a strategy that involves phasing your web pages — from simple to complex. First, the structure of the letter is indicated, and only then is work being done to improve the appearance and usability.
First, the contents of the letter are marked up using HTML in order to form its structure and build a layout. After that, the design is debugged using CSS - sets of CSS styles improve the design and presentation of the document - here you can set background images, set font options and so on. In the third step, the new features of the CSS3 specification are applied. After marking up the content and putting it in order, JavaScript comes in time, 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 in place, because the appearance of one defect can affect the result of all the work. If you want to look at progressive improvement in action, then pay attention to an example from html academy.
Media query Media 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 appearance for a document (you can find a practical and practical example of CSS in action here ).
A media query includes three sequential components that are configured step by step:
Media queries are indispensable for optimizing the display format of 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 to target services (highlight services that meet specified criteria) and adapt to them. By analogy, devices are also targeted where it is important to take into account screen sizes. For example, the standard code for the iPhone 6 Plus looks like this:
Media queries allow you to create beautiful and, most importantly, responsive letters 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 improvement and media queries are fairly common techniques that can turn your emails into small works of art, moreover, they are a good base for further development of your layout skills.
What else are we writing in the Pechkin-mail blog:
Interactive letters
Interactive elements dilute monotonous text and save reader 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 one cell and set a background image for it, which is displayed immediately after the page loads.
2. Install the main image and “hide” it in the link with the img-swap class. This will create a hover effect: when the cursor is over the background image, the main thing will appear in its place.
3. Set up the command: hover and set the styles for the img-swap class.
This option for 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 phasing your web pages — from simple to complex. First, the structure of the letter is indicated, and only then is work being done to improve the appearance and usability.
First, the contents of the letter are marked up using HTML in order to form its structure and build a layout. After that, the design is debugged using CSS - sets of CSS styles improve the design and presentation of the document - here you can set background images, set font options and so on. In the third step, the new features of the CSS3 specification are applied. After marking up the content and putting it in order, JavaScript comes in time, 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 in place, because the appearance of one defect can affect the result of all the work. If you want to look at progressive improvement in action, then pay attention to an example from html academy.
Media Queries
Media query Media 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 appearance for a document (you can find a practical and practical example of CSS in action here ).
A media query includes three sequential components that are configured step by step:
- Media type - defines the environment for applying the rules. Allocate types such as all, print, screen (used for email) and speech
- Expressions is a list of device properties that describe, for example, the width and height of a screen, color
- Style rules - apply when opening a letter in an environment that matches the type and properties in the expression
Media queries are indispensable for optimizing the display format of 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 to target services (highlight services that meet specified criteria) and adapt to them. By analogy, devices are also targeted where it is important to take into account screen sizes. For example, the standard code for the 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 letters 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 improvement and media queries are fairly common techniques that can turn your emails into small works of art, moreover, they are a good base for further development of your layout skills.
What else are we writing in the Pechkin-mail blog:
- Email Marketing: The Recipe for the Right Plain-Text Email
- How-to: Interactive Letters Guide
- Pechkin email "wiki": Email newsletter checklist
- Interfaces and Usability: Who and How Designs UX
- “Talk about it”: Designer's work
