Layout of responsive emails: a detailed guide (part 2)

In the past, we talked about why we need to adapt the letters of mailings for mobile devices, considered some points that should be considered when creating letter templates, and played with the layout code.

Today we will focus on the use of media queries for different devices, optimizing images for the "Mobile" and improving the efficiency of subscription forms.

Media queries for different devices

You may have noticed that earlier in this tutorial we used one standard media query: @media only screen and (max-device-width: 480px) { ... } . With it, you can work well with the old iPhone and other mobile devices of the same form factor.
')
But if letter recipients can view it on new iPhones, tablets and Android devices with a large screen of various exotic resolutions, then it is necessary to use both unique media query and unique styles.

As you must know, media query is not supported by all mobile mail clients without exception - for example, Gmail will not show the adaptive version of the letter on any of the platforms.

Debugging media queries

Now back to the media query already mentioned and the max-device-width: 480px rule. It as if tells the mobile mail application (and browser) that the maximum value for displaying a template is 480 pixels. If the screen is larger, then you should use CSS.

At the same time, using media queries, you can carry out more fine-tuning the display of letters on different screens. For example, to aim at displays whose width is 320px and higher, but not more than 480px, you can write this:

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { ... }

Many do not know, but media queries can be very focused - they can be used to create letters not only for display ranges, but also for different screen orientations (landscape, portrait), as well as pixel ratios (ratio of pixel in the image to screen width, on which it is displayed).

As a result, it is possible to work with jewelery accuracy - you need to create a “for iPad” template - there are no problems, you need to adjust to devices with Retina - please. Adding new styles can take time, but media queries allow you to achieve an acceptable display of letters on many devices with a couple of lines of code.

Here is a good guide for working with different screens for beginners.

At the same time, some designers and layout designers oppose the creation of templates oriented to a fixed screen size (for example, 480px) - these values ​​are also called “breakpoints”.

If you use adaptive design techniques (which is definitely worth doing!), This means that using default media queries with breakpoints in screen sizes is simply useless.

- Mark Drummond , “ Adaptive design with breakpoints dead ”

Building “liquid” templates using media queries

Using a media query, which instead of using a fixed width applies a percentage width to the elements of the letter. This leads to the compression and stretching of content, oriented to large screens, when displayed on small displays. With this method, you can achieve adequate content display even on older Nokia:



The described method was used in due time by the designers of Starbucks - try opening this letter in the browser and playing around with the window sizes.

Optimize images for display on mobile devices

The lack of screen space on mobile devices requires thoughtful use of images in mailing lists. At the same time, good CSS support in some mobile clients (such as Mail for iPhone) gives designers a certain amount of creativity.

Next, we look at several methods and techniques for using CSS to optimize images for display on mobile devices.

Background Images and Headers

In general, the use of background images is a thing that can be bypassed per kilometer, but in the case of default email applications on the iPhone and Android, good CSS support gives some flexibility. One of the possible advantages is the ability to replace the default images with those optimized for Mobile in the event that a letter is viewed on a mobile device.

As a rule, designers advise to optimize images for a selected array of screen sizes. But when resizing images, a problem may arise - sometimes some content (for example, text) becomes too small and cannot be disassembled with the eye.

In this case, it is better to create a unique image for each individual target device. This is done by positioning the image in a cell of a table or div tag and using a media query that hides the original image and instead displays a different background image in the header:

CSS:

 @media only screen and (max-device-width: 480px) { td[class="headercell"] { background-image: url(images/header-325.png); width: 325px !important; height: 115px !important; } td[class="headercell"] img { display: none; } } 

HTML:

 <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="headercell"> <img src="images/header.png" border="0" width="600" /> </td> </tr> </table> 

Here is the letter in the mobile client before and after this procedure:



The advantage of this technique is that it allows you to reduce the length of the letter by using shorter images. As you know, in “Mobile” the shorter the better .

Resize images for “liquid” templates

The problem with the method described above is that it is effective only when it comes to templates with a fixed width. Nowadays, there are a huge number of devices with a variety of screen parameters, so using “liquid” letter templates that are adequately displayed on each of them is a more logical solution.

The obvious solution seems to be the use of background-size: 100% options in our media query above background-size: 100% . But there is a better option - background-size: cover :

 @media only screen and (max-device-width: 480px) { td[class="headercell"] { background-image: url(images/header-480.png) !important; background-size: cover; } td[class="headercell"] img { display: none; } } 

Browsers on the Webkit engine fully support background-size , so everything will work fine in the default iPhone and Android mail clients. In other cases, you can use the traditional approach with the use of the tag and further resize the image:

 @media only screen and (max-device-width: 480px) { td[class=headercell] img { height:auto !important; width:100% !important; } } 

Displaying high-res images for Retina displays

Here the whole trick is to create images that are twice as large as those that are planned to actually use - this allows you to achieve crystal clarity on the displays of the iPhone and iPad. For example, you can create an image of 650px X 230px, and then cut it in half for mobile devices. You can do this with the following media query code:

 @media only screen and (max-device-width: 480px) { td[class="headercell"] { background-image: url(images/header-650@2x.png) !important; background-size: 325px 115px; width: 325px !important; height: 115px !important; } td[class="headercell"] img { display: none; } } } 

In order to work with Retina displays using a specific style sheet, you can declare CSS as follows:

@media all and (min-device-pixel-ratio : 1.5) { ... }

Not everything is perfect with this method either. All mail clients that support media query will be forced to upload large hi-res images - which means that in the Inbox folder the letter will also open longer. Therefore, the described approach should be used with caution and only when the advantages of displaying high-definition images outweigh the associated disadvantages.

Subscription form optimization

Optimization of mailings for mobile devices is not limited only to work to improve the readability of messages on small screens. Among other things, what is the point in spending so much effort on this optimization if the users of mobile devices cannot easily subscribe to the newsletter?

IOS and Android smartphones allow users to interact with forms quite easily, but there are several ways that designers and developers can use to make this process even easier. Optimization of forms is needed to make it easier to fill them from a mobile device. For businesses, “easy filling” results in increased conversions and new subscribers.

Here are some tips for working with forms and consider a small example that is useful for beginners:

• Align top . In the case of mobile devices, a situation often arises in which the user selects a form field and does not see its name. For example, at the initial zoom level, the “Enter your email” text aligned to the left may be visible, but after the user taps around the input field, a “hitting” will occur on it, as a result of which the text will disappear from view. There may be two ways out of the situation - use the top-justification or add a description of the form as its text value. In the latter case, less space is required on the screen, but it can sometimes annoy users - no one likes it when the field that you just started filling out suddenly disappears behind the left telephone keypad.
• Use input type=”email” . When using the input type=”email” parameter in the forms for entering an email address, a special keyboard will appear on iOS phones, including characters like @.
• It is better to make the forms more narrow . Using media queries and CSS can significantly improve usability of forms. However, nothing annoys users more than situations in which a significant part of the input fields on the screen is blocked by other elements or simply does not fit into it after the start of typing. If you make the length of the input field, say, no more than 80% of the screen width, this can significantly improve the usability of the forms.
• It is necessary to make forms with several possible answers more concise . All content on a mobile device is better arranged in one column - especially for checkboxes. Often the drop-down lists will be more convenient radio buttons and will eliminate the need for scrolling to work with the form.
• Practical advice on scaling . Described above relates more to the design as a whole, and not just to the forms. Now, one practical tip that relates exclusively to forms. Using the viewport meta tag will help prevent an unintended zoom of the form - and, as a result, the loss of the majority of its content. Here’s how such a meta tag might look like in the header of an HTML page: /> Detailed information on this topic is presented, for example, in the Apple documentation.

In order to better understand the optimization of forms, you can use this example of a CSS template that contains a form. Download the sample by the link .

How to create text email for mobile environment

In many cases, it is possible to effectively use text, not HTML letters. When it comes to formatting such messages, specialists are often divided into two camps - some include a line break after 60-65 characters, and those who do not. Both camps have their pros and cons.

According to CampaignMonitor, the 60-65 character limit works well for desktop and web mail clients. There are no special boundaries of paragraph widths on the desktop, so limiting them at the design stage of a letter template makes it more readable - scrolling a very long line is not very convenient.

In a mobile environment, things are not so simple. Sometimes in the same iPhone Mail, a 65 character string looks worse than if it were much longer.

Case: Twitter feed

Having considered a lot of theory, it is time to move on to practice. And consider not just some kind of newsletter, but such a newsletter, the letters of which are received by millions of people.

A few years ago, Twitter email notifications were “not so” when viewed from mobile devices. The problem was in the small text and wide pattern - the need for constant zoom and scrolling killed all the desire to read such a message on a small screen. To improve the situation did not take much effort.

Understanding the little text

First of all it was necessary to understand the display of the text. The reason for its so small size was the use of a 710px wide pattern — in order to show it across the entire width of the mail client, it would be hard to “move off” when viewed. The use of a special media query helped:

@media only screen and (max-width: 480px) { ... }

Similar advertisements are located between tags — HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email- — HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-

 —         HTML- ,    @media only screen and (max-width: 480px) .     ,   : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;"> 
           wrappertable , wrappercell  structure : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure"> 
      media query: 
 
 @media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; } 
    ,    iPhone (     2012  — .  .)       320px.                100%    —  ,       ,   ,      . 
 
      
  ,    « »     Twitter,       . ,    ,      . 
 
    : 
 
 <img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" /> 
    : 
 
 <img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo"> 
  ,   logo     logo-left.png , logo.png  logo-right.png .       : 
 
 img[class="logo"] { display: none !important; } 
       : 
 
  
 
        . 
 
   ,   ! 
 
        email-   «»: 
 
 How-to:   email-   :  -    5   email-      Youtube  email- 

— HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-

 —         HTML- ,    @media only screen and (max-width: 480px) .     ,   : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;"> 
           wrappertable , wrappercell  structure : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure"> 
      media query: 
 
 @media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; } 
    ,    iPhone (     2012  — .  .)       320px.                100%    —  ,       ,   ,      . 
 
      
  ,    « »     Twitter,       . ,    ,      . 
 
    : 
 
 <img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" /> 
    : 
 
 <img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo"> 
  ,   logo     logo-left.png , logo.png  logo-right.png .       : 
 
 img[class="logo"] { display: none !important; } 
       : 
 
  
 
        . 
 
   ,   ! 
 
        email-   «»: 
 
 How-to:   email-   :  -    5   email-      Youtube  email- 

— HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-

 —         HTML- ,    @media only screen and (max-width: 480px) .     ,   : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;"> 
           wrappertable , wrappercell  structure : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure"> 
      media query: 
 
 @media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; } 
    ,    iPhone (     2012  — .  .)       320px.                100%    —  ,       ,   ,      . 
 
      
  ,    « »     Twitter,       . ,    ,      . 
 
    : 
 
 <img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" /> 
    : 
 
 <img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo"> 
  ,   logo     logo-left.png , logo.png  logo-right.png .       : 
 
 img[class="logo"] { display: none !important; } 
       : 
 
  
 
        . 
 
   ,   ! 
 
        email-   «»: 
 
 How-to:   email-   :  -    5   email-      Youtube  email- 

— HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-

— HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-

— HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-

 —         HTML- ,    @media only screen and (max-width: 480px) .     ,   : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;"> 
           wrappertable , wrappercell  structure : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure"> 
      media query: 
 
 @media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; } 
    ,    iPhone (     2012  — .  .)       320px.                100%    —  ,       ,   ,      . 
 
      
  ,    « »     Twitter,       . ,    ,      . 
 
    : 
 
 <img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" /> 
    : 
 
 <img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo"> 
  ,   logo     logo-left.png , logo.png  logo-right.png .       : 
 
 img[class="logo"] { display: none !important; } 
       : 
 
  
 
        . 
 
   ,   ! 
 
        email-   «»: 
 
 How-to:   email-   :  -    5   email-      Youtube  email- 

— HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-

 —         HTML- ,    @media only screen and (max-width: 480px) .     ,   : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;"> 
           wrappertable , wrappercell  structure : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure"> 
      media query: 
 
 @media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; } 
    ,    iPhone (     2012  — .  .)       320px.                100%    —  ,       ,   ,      . 
 
      
  ,    « »     Twitter,       . ,    ,      . 
 
    : 
 
 <img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" /> 
    : 
 
 <img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo"> 
  ,   logo     logo-left.png , logo.png  logo-right.png .       : 
 
 img[class="logo"] { display: none !important; } 
       : 
 
  
 
        . 
 
   ,   ! 
 
        email-   «»: 
 
 How-to:   email-   :  -    5   email-      Youtube  email- 

— HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-

 —         HTML- ,    @media only screen and (max-width: 480px) .     ,   : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;"> 
           wrappertable , wrappercell  structure : 
 
 <table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure"> 
      media query: 
 
 @media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; } 
    ,    iPhone (     2012  — .  .)       320px.                100%    —  ,       ,   ,      . 
 
      
  ,    « »     Twitter,       . ,    ,      . 
 
    : 
 
 <img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" /> 
    : 
 
 <img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo"> 
  ,   logo     logo-left.png , logo.png  logo-right.png .       : 
 
 img[class="logo"] { display: none !important; } 
       : 
 
  
 
        . 
 
   ,   ! 
 
        email-   «»: 
 
 How-to:   email-   :  -    5   email-      Youtube  email- 

— HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-

• — HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-
• — HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-
• — HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-
• — HTML- , @media only screen and (max-width: 480px) . , :

<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">
wrappertable , wrappercell structure :

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable"> <tbody> <tr> <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">
media query:

@media only screen and (max-device-width: 480px) { body { width: 320px !important; } table[class="wrappertable"] { width: 320px !important; } table[class="structure"] { width: 300px !important; }
, iPhone ( 2012 — . .) 320px. 100% — , , , .


, « » Twitter, . , , .

:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />
:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">
, logo logo-left.png , logo.png logo-right.png . :

img[class="logo"] { display: none !important; }
:



.

, !

email- «»:

How-to: email- : - 5 email- Youtube email-