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.).
Leave a Reply