What is adaptive layout? Playground by ZURB. Email template codenamed “Focus”

Let's imagine the situation: Sergey is a Netology graduate and a novice marketer. He works in a small online store, one of his tasks is to launch a mailing list to his client base. The strategy, plan and texts for letters are ready. What to do with design and adaptive layout? The budget is running out, so Sergei has a serious choice: save money and do everything himself, in the editor of the mailing service. Or hire a freelancer.

Our advice: Sergey must decide what letters he needs. If he doesn’t pursue creativity, he can handle the design and layout himself. We tell you how to do it correctly, without the help of third-party specialists. The result will be different, but in a situation where the budget is running out and it is necessary to do it more or less efficiently, this is the way out.

Choosing a built-in editor or layout designer services

Large mailing services have a built-in block editor. It collects simple adaptive emails and is included in the subscription price. It will not be possible to format a complex creative letter in an editor - this is the work of the designer and layout designer. First, let’s figure out which letter is classified as complex and which is classified as simple.

Next come the “chips”. In some places you can set the exact size for individual blocks, but in others you can’t. In one editor you can only collect single-column letters, in another there are no restrictions on the number of columns. In some editors, you can even configure which blocks to show on the desktop version, and which ones only on mobile devices.

The designer and layout designer offer individual solutions, the editor - standard ones. Keep in mind that when compiling a letter in an editor, you are in any case limited, for example, by the set of fonts and their sizes. The designer will do it the way you wanted. The layout designer will think about how to rearrange the blocks on mobile devices - just as you planned. When working in the block editor, you rely on solutions proposed by the developers.

The editor adapts the letter according to his own algorithm; the algorithm cannot be changed.

If you have worked out the structure, written the text and selected pictures, then creating a letter will take from thirty minutes to two hours. Let us remind you that you do not pay for layout; work with the editor is included in the cost of the account.

A team of a designer and a freelance layout designer will make a letter in two or three days, it will cost from 5,000 to 15,000 rubles. If you order from an agency, it is several times more expensive. Remember the story from the intro? For Sergei, the choice is obvious: he will collect the letter himself, in his situation it is cheaper and faster.

It is better to compose a simple adaptive letter in the built-in editor. If you want to non-standard solutions- outsource.

How to compose a letter in the built-in editor

Those who assemble the letter in the editor do not need to know the code. The only thing you need is to think through the structure of the letter, select pictures and write the text. No “manual” layout - you will assemble the letter from blocks, just like in a landing page builder.

Step 1. Letter outline or prototype

Start with a draft, draw on paper a diagram of the future letter: where the heading will be, where the picture is, where the button is, etc. If you have time, assemble a full-fledged prototype in Balsamiq or NinjaMock. There is no shame in showing such a prototype to the director and handing it over to the designer.

Step 2. Layout of the letter in the editor

Add required quantity columns, based on already ready-made scheme or prototype

Drag the necessary elements into the body of the letter

Typically, built-in editors use the Drag-and-drop principle. If this is not the case in yours, look at the articles from the Knowledge Base - the principles of working in the editor are described there.

Customize the content of elements: indents, spacing, alignment and style

Here you enter the required text, add a photo or illustration, with or without links. Don't forget that you can add an animated picture; most editors support the GIF format.

Just don't go overboard with the file size. Email clients do not like “heavy” letters and can hide their contents under the “Show Full” button - this is what Gmail does, for example. Select files so that the finished letter weighs no more than 600 KB, this is the optimal size.

Don't forget to customize the buttons and add navigation links to them.

Step 3. Checking responsiveness in the built-in editor

When the email is ready, check how it appears on different devices.

In 90% of cases everything will be fine, the blocks will be “rebuilt” automatically. If the layout still “flies” or the result does not suit you, check the indentation values ​​in the blocks, they should be the same. If one block retreats by 10 points, and the other by 30, in mobile version they may change lanes incorrectly. If both blocks move back 10 points, you'll likely be fine.

Step 4. Check adaptability on third-party services

Check the result via Litmus or Email on Acid. These services will show how the letter will be displayed on different devices, in different browsers and different mail clients.

In some editors, checking through Litmus is integrated by default. If your editor does not have this option, send a test copy of the letter to a special e-mail that will be given after registering with Litmus.

The service is paid, a monthly subscription in Litmus starts from $79, in Email on Acid - from $45. If you send one email once a month, it gets a little expensive. As a last resort, try Browser Shots, it's old and inconvenient, but free. Please remember that such services do not provide a 100% guarantee. Even if everything is good in Litmus, this is not a reason to immediately launch a newsletter. Send the letter to your personal email and open it there.

Choose an editor that shows you how your email looks on different devices. Ideally, the editor is integrated with the Litmus service. If there is no integration, check adaptability manually via personal email.

How to evaluate the result of the work - yours or the layout designer's

If you are putting together a letter yourself, check the adaptability inside the editor and look at the letter from your personal email - that’s enough. If you want to test responsiveness on many devices, browsers and email clients at once, then buy an account with Litmus or Email on Acid and see the results there.

For those who outsourced their layout, it is not necessary to buy an account; ask the layout designer for screenshots from Litmus. If he is a professional, he checks emails on similar services; sending a screenshot is not a problem for him.

When checking, take a closer look at your email clients; mostly, bugs pop up here. Be sure to check how the letter opens in Outlook, Gmail, Yandex and Mail.ru - these are the most popular email clients in Russia.

There is no need to waste time correcting the layout if it is not displayed correctly on the third iPhone, in the seventh version of Internet Explorer or in the email client The Bat. Yes, there will always be those who use a third iPhone, but they are a minority. Is it worth redoing the layout for the sake of 1-2% of the total base? Depends on the quantity and “quality” of the base.

We hope you have segmented it and know everything about your subscribers. If 1-2% is 10,000 people, then it’s worth the trouble. If you work in b2b and these 1-2% are company managers, business owners and other VIP clients, you will have to adapt the letters to them.

Make sure that the letter is adequately displayed in Outlook, Gmail, Yandex and Mail.ru - this is enough.

Marketer's Memo

1) Decide on the format of the letter, what it will be: standard and simple or complex and creative. Give letters with a complex structure to the designer and layout designer. Collect simple letters in the editor of the mailing service; they are adapted by default.

2) Check the result in the built-in editor and, if your budget allows, on third-party services. When accepting a letter from a layout designer, ask for screenshots that confirm that the letter is displayed correctly - at least in popular email clients and popular browsers.

3) Be sure to view the letter through personal mail, at least in the main email clients and from current smartphone models on iOS and Android.

Multi-channel marketing platform

Updated material 06/20/2018

The layout of letters differs from the usual web layout due to the peculiarities of interpretation in various web interfaces and email clients.

Let's look at examples of how to achieve good display of an email in all the variety of ISPs and email clients.

What does a general template look like? adaptive writing:

To solve the issue with auto-scaling emails in iOS 10 and iOS 11, we added:

Autoscale error example

Next hack:

Webkit-text-size-adjust:none; -ms-text-size-adjust: none;

prevents iOS devices from changing the content of the email to make it easier to read. This usually goes against the design and can break the layout:

Let's move on to the body of the letter - the body section. The background color of the web interface can be different, so you need to wrap everything in a table with the desired background color, even if it is white, as in this case:

…

Due to limited support for style properties, such as max-width, by Outlook 2007–2016 email clients, as well as IE-like Outlook 2003 and Lotus Mail email clients, it is necessary to build an auxiliary table structure in conditional comments that will limit the width of the message in these email clients:

After this comes the main content table with a width of 100% and a maximum width limit of 600 px.

What you need to remember when creating email layout:

• Use the simplest table structure possible. Complex tables are not always reproduced correctly by Outlook.
• Try to avoid merging cells (colspan, rowspan). Use nested tables instead.
• The values ​​of the table's cellpadding, cellspacing and border attributes should be set to zero.
• Explicitly specify the alignment within cells, both horizontal and vertical (align, valign), since the default values ​​may differ. This negatively affects the display of the letter.
• In Outlook (2007/2010), page breaks may appear, which appear as space breaking up a table or image. They occur if the table height exceeds 1800 px. To get rid of this problem, close all tables (including the parent) and reopen them so that the height of each table does not exceed 1800 px.
• The code should be easy to read. Big number tables often make it difficult to navigate the structure.
• Padding of nested elements should be present, but it should not be abused, as well as line breaks and stretching the block in height. Logic block V ideal must fit entirely on the screen.
• Use comments indicating the purpose of the block and its beginning/end.
• The size of the html code of the letter should not exceed 100 KB, otherwise it will be cut off in some web interfaces and email clients, in particular in Gmail. After the letter is designed and configured, check the size of the resulting html file. To reduce the size of the letter, you can exclude all tabs, line breaks, and all comments (except conditional ones).
• Use media queries carefully and be aware of those subscribers whose email clients do not accept them.

Basic elements of writing

Indentations

Platforms handle vertical and horizontal margins differently.

For example, at the beginning of 2013, Outlook.com began removing margins from email code. As a result, to create the necessary horizontal spacing in the email, you have to use the padding property. What complicates the situation is that the Outlook email client does not support padding for divs, but does support margin indents. In this regard, it is better to avoid using both padding and margin.

Horizontal indentation can be made using a blank cell with a non-breaking space character. To set the right and left margin, you can create a smaller nested table. The vertical offset can be set as follows:

Outlook 2013 has one more interesting feature: If you create a cell smaller than 19 pixels in height, it will stretch to 19 pixels. To avoid this, you can add the line-height style property when defining the cell style.

Text

There are also a number of features when formatting the text. Use tags that do not have a specific default design - span. The use of p, h1–h6, etc. should be abandoned.

Line-height must be specified for the parent cell or block. Since the default display for text may differ in different web interfaces and email clients, the following style properties must be explicitly specified:

• Color. The color must be specified for each text element, and, as mentioned earlier, it must be specified as a hexadecimal code, for example #4676a9.
• Font size (font-size). The size is usually indicated in px or pt. It is preferable to use the first option.
• Typeface (font-family). Only standard fonts should be used in letters. Typically, standard fonts mean pre-installed fonts in Windows XP. There are two families of fonts - serif (serif) and sans-serif (sans-serif). Most often used: Courier, Georgia, Times, Times New Roman, Arial, Verdana, Tahoma, Trebuchet MS.

• Line height (line-height). In different web interfaces and email clients, the line height value can vary greatly, and therefore the text may not be aligned with other elements or may not fit into the block at all, disrupting the overall structure and design.
• Special characters. All special characters (paragraphs, hearts, pseudographic elements, etc.) in the letter should be replaced with the corresponding html entities. They can be easily found, for example on the html5book website. Speaking about special characters, it is also worth mentioning the fight against “dangling” conjunctions and prepositions. Their presence is incorrect from a typographical point of view and is not encouraged from a layout point of view, so you should use the non-breaking space character to exclude them. Less often, the opposite situation occurs when there are very long words that may not fit on the screen mobile phone. To ensure correct display and proper hyphenation, you can use the “soft hyphen” symbol

Links

The design of links is similar to the design of regular text; accordingly, the “a” tag is used and the href attribute appears. And also for links in letters, you must specify the target attribute with the value _blank to open them in a new window.

The color of links should be set explicitly and the text-decoration style property should be specified with the desired value, since in many email clients and web interfaces this property has the default value of underline for links.

Example text

Images and background

Working with images in letters also has a number of features. In addition to the required attributes (src and alt), here it is necessary to explicitly specify the dimensions (width and height) of the image, and also to exclude unwanted indents, specify the display style property with the value block:

If a cell contains only one image, which does not exceed 19 px in height, then this cell should have the line-height style property indicating the required height - to avoid display problems in Outlook 2013.

Most email clients and some web interfaces (outlook.com, in some cases yahoo and in some cases gmail) do not load images by default, so you need to ensure an acceptable display without images by using alternative text (alt) styled as letter design, background colors, etc.

Since we are talking about modern adaptive letters, it is impossible not to mention . This term refers to the preparation of images for clear display on screens with increased pixel density.

When inserting images into a responsive email, it is not always possible to specify the width and height dimensions in pixels; sometimes you have to specify them as a percentage: creatives often have a width of 100%. However, most web interfaces and email clients will stretch this image to 100% of the width of the parent block, but Outlook 2007–2016 will display the image at a scale of 1:1. Therefore, the width of such an image must match the displayed width.

Background images

Outlook 2007–2016 does not support background images. The exception is the background image specified in the body. However, using this technique greatly increases the risk of the letter ending up in spam, so it is not recommended to use it.

This limitation can be overcome by using VML. For convenient use, you can use ours.

Product grid

The basic approach to adapting letters is “rubber” layout. To ensure convenient interaction with writing on the small screen of a mobile device and on the screen of a desktop computer or laptop, the block rearrangement technique is often used.

It is based on the use of inline blocks. When the screen shrinks and the blocks no longer fit, they are rearranged one below the other:

Since Outlook 2007–2016 does not support floating blocks, an auxiliary structure is built specifically for them in conditional comments:

Block1

Block2

The code between:

will be ignored by all email clients except Outlook 2007–2016 and IE-like email clients.

And each of the blocks will have the following structure:

Also in letters, sometimes there is a situation where the blocks are arranged in a checkerboard pattern, however, when rebuilding, it is desirable to maintain the logical sequence of the blocks and rebuild not the right block under the left, but vice versa - the left block under the right. This can be done by changing the direction of the text, it will look like this:

Block 2 Block 1

Other elements and techniques

Invisible preheader

Almost all web interfaces also display the first text next to the subject of the email:

In mailings, this is usually technical information, such as “unsubscribe” and “open in browser”, which clearly does not motivate the subscriber to open the letter, however, by controlling the text displayed, you can significantly increase the chance of opening the letter.

To do this, add code with the following structure to the very beginning of the html body of the letter:

Using an invisible preheader can negatively affect deliverability, so use this technique carefully and carefully monitor deliverability through the postmaster.

Videos in letters

The standard Mail email client has once again started playing html5 videos, however, there is a direct link to the YouTube video placed on the image.

With this implementation, the video will be displayed on a layer in the web interfaces of Mail.ru (about 55%) and Gmail (about 14%). In this case, on most mobile devices the video will be opened in the Youtube application, without opening the browser.

The disadvantage of this approach is the inability to collect click statistics, since the link to Youtube must be direct, and click tracking for this mailing will have to be disabled in your ESP.

Testing

The most important stage of layout is testing letters. The best way is still to manually check the display of the letter in various web interfaces and email clients; this can help to send the “raw” layout of letters in the form of an archive. You need to know which platforms your subscribers use, which email providers they prefer, and conduct a manual check of at least the most popular ones.

To speed up the testing process, you can use the Litmus and EmailOnAcid services, but this does not eliminate the need to check the display of each individual letter manually.

The article mentioned some services, resources and tools that will undoubtedly be useful to letter layout designers and others. Here is a short list of useful resources.

Tools and services:
Email buttons - button generator using VML.
- inserting background images into letters using VML.
Litmus - testing the display of letters.
Email On Acid - alternative to Litmus: testing email display.

Useful materials:
Litmus blog is the market leader in email testing. Interesting cases and the latest news from the world of email marketing and email layout.
Blog Email On Acid - interesting cases and the latest news from the world of email marketing and email layout.
- the first blog about email marketing, talks about how to make emails effective.
Tod’s blog - interesting cases and useful materials about layout and development.

In this tutorial, I'll show you how to create a simple HTML email template that will display consistently in any modern email client and current smartphone app.

Media queries: only half the battle

There was a time when it was enough to determine the device type to create a responsive email template that would display equally well in both iOS and Android email clients, both families of smartphones supported the @media CSS property.

Since then, the number of email apps for both platforms, with varying levels of support for responsive template development techniques, has increased quite a bit.

Most notable is the latest update to the Gmail Android app, which is twice as popular as the stock Android email app (accounting for 11% of total launches). It never supported media queries, and still doesn't, but it now scales your emails by compressing the size of the external table to fill the entire available screen display area. This process is difficult to control and, if all your emails depend on media queries to display correctly on mobile devices, creates some unpleasant results.

Why is the floating dark horse pattern

The good news is that you can design and develop an email template that will look good in any email application, including those that don't support media queries.

However, there are several design trade-offs that you must make. Everyone's favorite "collapsing" of columnar layouts into one feed doesn't work so well with this method. If you learn to do without them, you can use functional design that works best.

Today we will do this.

First stage

Let's start by creating a blank template.

Hello!

I centered the main content table using the "content" class.

note

Note: As you progress through this tutorial, you'll notice that I'm going to place some CSS in the head of the page. I usually put styles in the head of the page when I'm going to use them again, or leave one-off styles inline.

Important: When you use CSS in the head of your document, you are required to use tools at the end of development to convert them to inline ones. If you use services like MailChimp or Campaign Monitor, they will automatically prompt you to convert these styles to inline styles when you import your markup. You must do this because some email clients, such as Gmail, will ignore or cut out the content of your tag

Creating a title

We create the first row of the table - the header. We add the following to style the string we created:

Hello!

And then in our CSS styles, we set the background for our header.

Header (padding: 40px 30px 20px 30px;)

Creating your first responsive row

Now we will create the first adaptive row. The way we do this is by using two floating tables aligned with the HTML "align" property.

Left column

Let's replace our little greeting with the one below.

We create a table at 70px and also add a small background that will look like a gap between our two columns. The backing on the bottom will add vertical clearance when our speakers are piled on top of each other on a smartphone.

Right column

We'll also create a right column by applying left alignment again. The table will be 445px wide, which will allow us to save 25px for the right side. This is very important because Outlook will automatically clutter your tables if you don't leave at least 25px for each row you create.

If you leave at least 25px margin, your tables will be what you expect.

For the wider right table, we're going to apply the same technique as for our container table, which involves creating a class and also a conditional wrapper code. For this table, we also set 100% of the width available on a smartphone, on which it will fall down relative to the left table.

style="width: 100%; max-width: 425px;">

As you can see, I created a class called "col425" for this table and set the width to 425px. I placed a table that will contain another 425px wide table in the condition code. We then add our class to the media query we created for Apple Mail as well.

Col425 (width: 425px!important;)

Now we’ll add a stylized header inside our cell.

CREATING

Responsive Email Magic

Subhead (font-size: 15px; color: #ffffff; font-family: sans-serif; letter-spacing: 10px;).h1 (font-size: 33px; line-height: 38px; font-weight: bold;) .h1, .h2, .bodycopy (color: #153643; font-family: sans-serif;)

Our header is complete and, as you can see in the image below, this is how our columns will overlap each other on a mobile device.

Creating a Single Column Line of Text

To create one line of text, we'll simply add a new line to our table with the class ".content". To this line we will add the class ".innerpadding" with reusable padding values. We'll also add a "borderbottom" class to create a border for each row.

Welcome to our responsive email!

CSS for this section:

Innerpadding (padding: 30px 30px 30px 30px;).borderbottom (border-bottom: 1px solid #f2eeed;).h2 (padding: 0 0 15px 0; font-size: 24px; line-height: 28px; font-weight: bold ;).bodycopy (font-size: 16px; line-height: 22px;)

Creating a two-column article

Now I'll add a responsive row, exactly the same as our title, but with slightly different dimensions so we can use a larger image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. Claim yours!

We have added a button with the "buttonwrapper" class. It contains a spacer cell with a background color fill and also a text link inside it. I prefer to use this method because it allows you to use floating-width buttons, which is very useful when creating reusable templates where the width of each button may be different. If the width of your button is fixed, you may prefer to use Bulletproof Button Generator.

Styles for our button:

Button (text-align: center; font-size: 18px; font-family: sans-serif; font-weight: bold; padding: 0 30px 0 30px;).button a (color: #ffffff; text-decoration: none ;)

We'll also set the width to a new class "col380", and add our size to the styles to take care of Apple Mail. And now the styles look like this:

@media only screen and (min-device-width: 601px) ( .content (width: 600px !important;).col425 (width: 425px!important;).col380 (width: 380px!important;) )

Creating one column per image

This is a very simple line. Let's just set the image to 100% letter width and make sure its height is set to auto.

In our CSS:

Img (height: auto;)

Creating the final line of plain text

Finally we'll add a line of text without a border at the bottom.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.

Creating a Footer

To create a footer, add a new row with a table inside. One of the rows will contain another table for our social media icons.

® Someone, somewhere 2013 Unsubscribe from this newsletter instantly

Let's add the required styles for the footer in CSS:

Footer (padding: 20px 30px 15px 30px;).footercopy (font-family: sans-serif; font-size: 14px; color: #ffffff;).footercopy a (color: #ffffff; text-decoration: underline;)

Optimizing buttons for mobile devices

For mobile devices, it is ideal if the entire button is a link and not just text, because it is much more difficult for our finger to hit a small text link. Since it's not possible to implement this for all desktop users (the a tag doesn't fully support the padding property), this is something I can add to the mobile version using media queries.

Let's remove the color from the td tag it was applied to and then add it to the a tag with a large background.

I'm using both the max-width and max-device-width properties in this media query in an attempt to avoid the Oulook.com IE9 bug

@media only screen and (max-width: 550px), screen and (max-device-width: 550px) ( body .buttonwrapper (background-color: transparent!important;) body .button a (background-color: #e05443; padding: 15px 15px 13px!important; display: block!important;) )

Now when you click anywhere on the colored button it will be a link.

Further improvements using media queries

If you wanted, you can now start refining your layout by assigning class names to the elements you wanted to control, and then adding new rules inside the media query we created earlier.

Unsubscribe from this newsletter instantly

and add the appropriate CSS styles to the media query:

Body .unsubscribe (display: block; margin-top: 20px; padding: 10px 50px; background: #2f3942; border-radius: 5px; text-decoration: none!important; font-weight: bold;) body .hide (display : none!important;)

You can also outline the .innerpadding, .header, and .footer classes to reduce the impact of the padding for clients that support media queries.

Test and move on!

Finally, as always, make sure you are validated (using the W3C Validator - you can only have one error with the body tag's own "yahoo" attribute) and test that everything is ok using real devices and on web browsers like Litmus or Email on Acid.

Have fun creating responsive emails that look great in any email client!

Today, users are increasingly reading emails on mobile devices. What is it like viewing a large HTML email on your phone? You have to zoom and scroll a lot, and in general it becomes very inconvenient to read. Therefore, emails should be made adaptive.

Preparation

First of all, let’s define the main features of adaptive emails:

• Clean and concise content: On small screens, it's much more important to make efficient use of available space.
• One column: Obviously, the content on the phone screen should not be divided into several columns.
• Brief subject line: emails with short headings stand out among many others in the inbox.
• Large “call to action” buttons: Apple iOS Human Interface Guidelines recommend making the button at least 44x44 px.
• Correct font: the text should be readable on any device.
• Pre-header: The initial text of the letter should reflect the content as much as possible.
• Align text left: Most users pay more attention to the left side of the screen. Additionally, some operating systems may not display the entire letter, so the content should be left-aligned.
• Vertical hierarchy: The most important information, including “call to action” buttons, should be located at the top of the letter.
• Minimum images: the user does not expect to see large pictures in letters. In addition, many have disabled image display.

Start

HTML emails are structured slightly differently from regular simple HTML pages. For example, CSS styles must be written directly in the markup, in addition, some email clients completely ignore any CSS styles inside the head tag. For convenience, you can use special templates with proper HTML letter markup. For example HTML Email Boilerplate.

Doctype

Hotmail and Gmail force the XHTML 1.0 doctype to be added to the code.

Viewport and Media Queries

For correct display on mobile devices, you should use the viewport meta tag. Unfortunately it doesn't work on Blackberry:

It is also advisable to define the content-type title tag. Many email clients will ignore this, but don’t forget about the “browser version” of the email. You can also add some CSS to set some display options yourself.

When adding Media Queries, we hide elements with the hide class using display:none if the screen width is less than 600 px:

@media only screen and (max-width: 600px) ( table, img, td ( display:none!important; ) )
This is a standard approach when designing responsive emails: rewriting the CSS in the head using!important. In this case, GMail will ignore the styles in the head. Therefore, you need to ensure that the content is displayed correctly everywhere. Using Media Queries, you can also limit the width of the block with content:

@media only screen and (max-width: 600px) ( table ( width: 92%!important; ) )

Buttons

After reading the letter, the user should ideally take some action. Therefore, the role of “call to action” elements is very important. Buttons should be large, visible and located, if possible, at the top of the letter.

Unfortunately, there is no single cross-platform solution for buttons in emails. One of the options:

@media only screen and (max-width:600) ( a( display: block; padding: 7px 8px 6px 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff!important; background: #f46f62; text-decoration: none!important;
Well, a very simple way is a regular link. However, usability suffers on devices with touchscreens:

Click me!
Download the example described in the article.

Rubber letters

Instead of adaptive email layout, you can use a regular rubber one. This is much simpler, and the email will be displayed correctly everywhere. However, in this case there are a number of disadvantages. First of all, usability will suffer greatly due to the fact that the elements of the letter cannot be moved depending on the width of the device screen. Therefore, rubber layout is not our way!

Examples of adaptive emails

Here are a couple of good examples of how responsive emails should display on large and mobile screens:

Conclusion

Due to the fact that there are a large number of types of platforms, devices and screens, it is very difficult to create a universal solution when designing adaptive emails. If we summarize all of the above, we can come to one simple rule - “Simplicity is the key to good usability of emails.”

I have compiled a detailed guide to the layout of adaptive emails for beginner layout designers: with step-by-step instructions, examples and links to frameworks, tools and templates.

In the guide: the basic principles of adaptive layout, tables with maximum width restrictions, rubber pictures, special comments, tools, frameworks, tips and a selection of cool letters.

Misha is an aspiring freelance layout designer. He has several landing pages and simple WordPress sites under his belt. A new client offers to design a website, and along with it a series of adaptive emails. The money is not bad, but Misha doubts it; he has not yet done letter layout. It seems to him that there are subtleties here and they cannot be mastered in a couple of evenings.

Misha is right, a couple of evenings will not be enough. The principles of layout of websites and letters differ - we will tell you about the main ones. We'll show you how to create a simple adaptive letter and avoid common mistakes. If you are already an experienced layout designer, scroll to the end of the article - there are links to frameworks, tools and templates that may be useful.

Basic principles of adaptive layout

Remember the main thing: when developing websites we use modern block layout, in letters we use outdated tabular layout. We write styles inside tags. And we work with fluid layout and media queries - not separately, but together, combining both approaches.

Beginning layout designers forget about tables and use block layout as they are used to - because of this, the layout “flies” and the letter is displayed incorrectly. This happens because most email clients don't see external styles. Therefore, the principle when you wrote styles separately and connected them in blocks will not work in half the cases. Letters designed using this principle look bad, especially if you open them in Outlook and the Gmail mobile application.

Media queries are responsible for website adaptability; they are written in the style sheet. When designing emails, you shouldn’t count on media queries - half of email clients won’t see them anyway. These email clients do not work with style sheets and "strip" media queries from. At the same time, unlike regular styles, you cannot write media queries inline.

Imagine that you have designed an email using media queries. You show it to the customer on an iPhone, open it via iOS Mail - everything works. The customer opens the same letter on the same iPhone, but views it through the Gmail app. Rest assured, the layout will fall off and the work will not be accepted. What to do? You can abandon media queries and use fluid layout. But this will not give a 100% guarantee.

Our advice: combine fluid layout and media queries. An email designed using this principle is not compressed to an unreadable state and does not extend beyond the viewing window - even in email clients that do not support media queries.

Combine flexible layout and media queries, essentially writing styles inside tags.

Adaptive layout using the example of a specific letter

We will use rubber tables with a specified maximum width in pixels and special comments (conditional comments) for Outlook, since this email client does not “understand” the (max-width) property.

Stage 1. Preparing the base

We use a table with a width of 100% as a container for writing. In it, if necessary, you can set the background of the letter and indicate the position of the main table:

Basic table with maximum width constraint:

Product s on promotion

Then we add styles inline. We place styles for text inside the td tag or any block elements, such as h1–h6, p, div. The example looks like this:

Add special comments for Outlook:

Products on sale

Add a rubber image that stretches across the entire width of the cell:

We get:

We make two columns that will fit one under the other on mobile devices:

Product No. 1 — 990 rubles

Product No. 2 — 990 rubles

In their standard state they look like this:

If we want, we change the order of the columns in the column. So that the right one is on top and the left one is below. dir parameter:

Product No. 2 — 990 rubles

Product No. 1 — 990 rubles

Let's look at an example:

You can add as many columns as you like this way. For example, five:

Product No. 1 — 990 rubles

Product No. 2 — 990 rubles

Product No. 3 — 990 rubles

Product No. 4 — 990 rubles

Product No. 5 — 990 rubles

Those same five columns:

This method allows you to align column blocks relative to each other both vertically (vertical-align:top;) and horizontally (text-align:center;).

Stage 2. Working with text

Pay attention to margin. For this style to work in Outlook, specify it with a capital M → Margin

If it is easier or more common for someone to write styles in external CSS when coding, no problem, you can add them to the inline before sending or testing the letter, using special tools, for example, Inliner.

Remember about users who have disabled the display of images in the browser. Maintain a “text-image” balance in order to convey information to the person in any case. And don’t forget about the “alt” attribute for the “img” tag.

Adhere to Mobile-First principles
Determine what information is key and put it on the first screen. Disable unnecessary blocks on small screens and remove at the end of the letter everything that looks fine on desktops, but on mobile devices prevents you from seeing the main content. Don’t try to show “everything at once”: minimize links to product categories, put one or two instead of ten photos. Simplify navigation; after all, the subscriber views the letter from top to bottom, and not from left to right. And don’t overload the letter, keep it “light” and open within 5 seconds.

An example of unsuccessful layout. When an email is opened from a mobile phone, the first screen contains not key information, but secondary information. You shouldn't do that.

Even if regular images are loaded, the background ones will not work everywhere. Keep this in mind, especially in cases where there is text on the background image. Play it safe and write in the cell with the background image the background color on which the text will be clearly visible. Even if the picture does not load, the user will see it on the “correct” background.