Truly responsive letters. Part one
Writing this post is inspired by the recent truly awesome work , Niole Merlin. In many ways, her layout technique is similar to mine and I’m happy that this direction is also developing in the west. Why is this method so good? Everything is very simple. There is no need to explain how important it is to adapt written letters to mobile platforms in order for them to be read. Few people will read the sheets on the phone. What did the western developer do all this time? He made a tabular layout with blocking elements, then brushed this code with media queries to support mobile phones. How is this approach flawed? And the fact that neither the Android nor the Apple media queries are not supported by the following email clients: Gmail, Yandex, Mail.ru. By and large, Western colleagues could not give a damn about Yandex with the mail, but Gmail is the first among the mailers.
For Nicole Merlin, this became obvious and she developed her own technique, which is based on rubber layout with minimal use of media queries (progressive enhancement) and it works! But not much as we would like in Russia. All author's rubber is kept on inline-block elements and operating on max-width. But the trouble is, our guys from Yandex and mail do not support max-width. First, I will talk about the differences between my approach and Nicole's techniques, and then I will smoothly turn to my thoughts and code examples that should be used in preparing letters.
')
And now let's look at the image above. In the first case, we see the arrangement of the blocks, which we obtain by applying the advice of Nicole in practice. In the second screenshot, my option is for mail clients that do not support media queries. The third is for all other normal email clients.
At first glance, you might think that my version loses a bit, but I support domestic mailers. And this is a significant plus.
Now let's talk directly about the layout. Nicole uses the classic typesetting method that most layout designers are used to. Those. it costs a DOM with naming classes and writes styles in an external file, after which it drives the inliner written through CSS. The advantage of this approach is that it is easier to write such code for those who are used to typeset ordinary websites. Minus is very significant - DOM is complicated by unnecessary elements. And all this is done in the name of simplifying development. But this simplicity is noticeable only after a complete understanding of the methodology. To master it is extremely difficult.
In my case, everything is much simpler. I immediately write the inline code. It may be a bit unusual at first, but you get used to it quickly. All the code is always in front of your eyes and you clearly understand what will happen. Due to this, it is not necessary to complicate the tag tree. Let your eyes be a little clogged with styles, but the tree is clear and understandable.
In my case, the layout is not always rubber. Sometimes it has fixed items. In this case, you need to understand what screen sizes you will have to deal with. First of all, it should be understood that if the fifth iPhone has a display width of 640px, this does not mean that in the mail client it will correspond to this value. Mobile mailers use their values to calculate the width and height. The most common screen width in mobile mailers is 320px (portrait orientation). But it tends to vary from 300px (Yandex mail android) to 600px (any tablet or some shovel phones). If we talk about landscape orientation, then there is no point in worrying. Here we are talking about numbers from 480 to more than 600px. So, if in the landscape we have less than 600px, then believe me, on this screen (in this orientation), reading the letter will simply be inconvenient (extremely low vertical), so the usual 300px adaptation will work here. And if we have 600 or more in the landscape, then we show the usual fixed 600px version of the letter.
Why am I telling all this? For two-column elements in the layout, fixed values of 300px will be used. The previous paragraph explains exactly where this value came from.
If suddenly you want to test the working permission of your mobile email client, you can send yourself the following test to your email:
The first image will indicate the width of the working area of the mail client. The second is customer support for media queries.
Note:
- For headers you can use h1-h6 tags if you are not bothered by their upper indents. I, for example, do not like the behavior of the header in the block for which the top padding is specified.
- For paragraphs, you can use a div instead of p, but in this case, beat them apart through br. I prefer paragraph breaks.
- line-height works ONLY for block elements. Use it for headings, paragraphs, and div blocks. In principle, it can be used for table cells, but I prefer not to clutter it with formatting.
- About the list. I have not yet studied the behavior of UL. It is extremely unpredictable. It is better to use paragraphs. Markers can be executed unicode. The only thing you may not like: the second line of the list item will fall under the mark of the marker, and not to the right of it. In my opinion the solution with paragraphs is the most optimal. If you want a super pixel perfect list, draw a complex table. But this truth is not worth it.
- To align text or one element, use the align attribute of the div tag.
- To align the table, specify align for the table itself.
- To align the flow of elements, specify align for the table cell in which they are located
The information you read will allow you to make an adaptive information letter without the frills in the form of multicolonularity, optimizing retina and other whistlers. In the following topics I plan to talk about pictures, links, buttons, multi-column layout, and real examples with their nuances. Therefore dzhite 2-3 more topic. Stey Tund, as they say. Any questions on the topic will be answered in the comments or in person.
For Nicole Merlin, this became obvious and she developed her own technique, which is based on rubber layout with minimal use of media queries (progressive enhancement) and it works! But not much as we would like in Russia. All author's rubber is kept on inline-block elements and operating on max-width. But the trouble is, our guys from Yandex and mail do not support max-width. First, I will talk about the differences between my approach and Nicole's techniques, and then I will smoothly turn to my thoughts and code examples that should be used in preparing letters.
')
And now let's look at the image above. In the first case, we see the arrangement of the blocks, which we obtain by applying the advice of Nicole in practice. In the second screenshot, my option is for mail clients that do not support media queries. The third is for all other normal email clients.
At first glance, you might think that my version loses a bit, but I support domestic mailers. And this is a significant plus.
Now let's talk directly about the layout. Nicole uses the classic typesetting method that most layout designers are used to. Those. it costs a DOM with naming classes and writes styles in an external file, after which it drives the inliner written through CSS. The advantage of this approach is that it is easier to write such code for those who are used to typeset ordinary websites. Minus is very significant - DOM is complicated by unnecessary elements. And all this is done in the name of simplifying development. But this simplicity is noticeable only after a complete understanding of the methodology. To master it is extremely difficult.
In my case, everything is much simpler. I immediately write the inline code. It may be a bit unusual at first, but you get used to it quickly. All the code is always in front of your eyes and you clearly understand what will happen. Due to this, it is not necessary to complicate the tag tree. Let your eyes be a little clogged with styles, but the tree is clear and understandable.
About smartphone screens
In my case, the layout is not always rubber. Sometimes it has fixed items. In this case, you need to understand what screen sizes you will have to deal with. First of all, it should be understood that if the fifth iPhone has a display width of 640px, this does not mean that in the mail client it will correspond to this value. Mobile mailers use their values to calculate the width and height. The most common screen width in mobile mailers is 320px (portrait orientation). But it tends to vary from 300px (Yandex mail android) to 600px (any tablet or some shovel phones). If we talk about landscape orientation, then there is no point in worrying. Here we are talking about numbers from 480 to more than 600px. So, if in the landscape we have less than 600px, then believe me, on this screen (in this orientation), reading the letter will simply be inconvenient (extremely low vertical), so the usual 300px adaptation will work here. And if we have 600 or more in the landscape, then we show the usual fixed 600px version of the letter.
Why am I telling all this? For two-column elements in the layout, fixed values of 300px will be used. The previous paragraph explains exactly where this value came from.
If suddenly you want to test the working permission of your mobile email client, you can send yourself the following test to your email:
Spoiler header
<style> body { margin:0; } @media only screen and (max-width: 600px) { img[class="image"] { width:50% !important; height: auto !important; } } </style> <img src="1450830405849711624888" width="300" height="150"><br> <img src="1450830405849711624888" width="300" height="150" class="image"> The first image will indicate the width of the working area of the mail client. The second is customer support for media queries.
Wrapper. He is a letter wrapper.
<meta charset="utf-8"> <style> body { margin:0; } @media only screen and (min-width: 600px) { /* , 600px. , . */ .wrapper { width:600px !important; } } @media only screen and (max-width: 600px) { /* 600px */ } </style> <!--[if gte mso 9]> <style> .wrapper { width:600px !important; } /* */ .flex-item { width:100% !important; } /* */ </style> <![endif]--> <!--[if lte mso 9]> <style type="text/css"> .wrapper { width:600px !important; } /* , */ </style> <![endif]--> <!-- , --> <table bgcolor="#eeeeee" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <!-- . . . . --> <table width="600" class="wrapper" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" style="border-collapse:collapse; margin:auto; width:auto; max-width:600px;"> <tr> <td> Newsletter content here... </td> </tr> </table> </td> </tr> </table> Typography
<div style="font-family:arial; font-size:24px; color:#000000; line-height:1.2em;"> <b> </b> </div> <div style="font-family:arial; font-size:18px; color:#000000; line-height:1.2em;"> <b> </b> </div> <div style="font-family:arial; font-size:16px; color:#000000; line-height:1.2em;"> <b> </b> </div> <p style="font-family:arial; font-size:14px; color:#000000; line-height:1.4em;"> , <b> </b>, <i></i> <s> </s>. <span style="color:#ff0000"></span> <span style="font-size:16px;"> </span>. </p> <p style="font-family:arial; font-size:13px; color:#000000; line-height:1.4em;"> <span style="color:#ff0000;">– </span> -, </p> <p style="font-family:arial; font-size:13px; color:#000000; line-height:1.4em;"> <span style="color:#ff0000;">– </span> </p> <p style="font-family:arial; font-size:13px; color:#000000; line-height:1.4em;"> <span style="color:#ff0000;">– </span> </p> Note:
- For headers you can use h1-h6 tags if you are not bothered by their upper indents. I, for example, do not like the behavior of the header in the block for which the top padding is specified.
- For paragraphs, you can use a div instead of p, but in this case, beat them apart through br. I prefer paragraph breaks.
- line-height works ONLY for block elements. Use it for headings, paragraphs, and div blocks. In principle, it can be used for table cells, but I prefer not to clutter it with formatting.
- About the list. I have not yet studied the behavior of UL. It is extremely unpredictable. It is better to use paragraphs. Markers can be executed unicode. The only thing you may not like: the second line of the list item will fall under the mark of the marker, and not to the right of it. In my opinion the solution with paragraphs is the most optimal. If you want a super pixel perfect list, draw a complex table. But this truth is not worth it.
- To align text or one element, use the align attribute of the div tag.
- To align the table, specify align for the table itself.
- To align the flow of elements, specify align for the table cell in which they are located
To be continued
The information you read will allow you to make an adaptive information letter without the frills in the form of multicolonularity, optimizing retina and other whistlers. In the following topics I plan to talk about pictures, links, buttons, multi-column layout, and real examples with their nuances. Therefore dzhite 2-3 more topic. Stey Tund, as they say. Any questions on the topic will be answered in the comments or in person.
Source: https://habr.com/ru/post/261455/
All Articles