Adaptive letters? You are welcome!
Good day.
I have long been a purring user of Yandex money, but already for a couple of months I have been experiencing severe discomfort from transactional notification letters. The fact is that they are not adapted for mobile devices. On Twitter, they didn’t respond to my indignation, and I decided to set this task for myself to be implemented, as they say for fun.
So, the letter:
')
The footer doesn’t really interest us, because everything is ok there.
Here is what we see on the Android phone screen in Gmail:
It all went. If we open the letter in Android Mail, then it will be displayed normally, except that horizontal scrolling will appear. Those. the letter is not adapted to the screen of the smartphone. This is what I will do.
We study the source code of the letter:
In general, everything is adequate, like smart people did, but it was not there. Padding'i for block elements are used, text formatting is set through font, links to span wraps with the task of color. In general, spat on Outlook, by and large. So it is, there are a number of "jambs" in Outlook, but they are not lethal. Further analysis of the code showed no attempts to adapt the letter for small screens.
Before moving closer to the point, let’s focus on one more thing. List of incoming letters:
Sender - Yandex Money. OK.
Subject - you paid from the account
Further, the text of the letter - Payment successfully completed. This is all good. But why duplicate "Yandex Money"? And this phrase appeared due to the fact that the logo bears alt = "Yandex Money". What for? I see no objective reasons. One could refer to the signature for those who have not downloaded pictures. So why not send a logo as an attachment? Then it will be shown anyway.
See how you can adapt the letter. To do this, first of all, examine the graphics. In fact, it was not enough.
The asterisks and stitching could be simply squeezed to 100% for the adaptive layout's rubberiness, but here two tangible minuses appear:
1. The bottom of the clip is a separate element.
2. Asterisks and "=" signs are quite small and their pressing will make them difficult to read.
But let's try to shrink it, that is.
Here is the result I got after a couple of experiments with percentage values:
The naked eye can see that everything is very bad, even in chrome with a window size of 320px in width. The image becomes extremely fuzzy.
I decided to try to score on the clip and realize a ribbed top with the help of CSS.
This is the maximum that I did.
Quite good, but does not pull on the original version. You can implement through the background image, but in this case, we lose outlook. Although who cares? Oh yeah, me! Well, we implement the option without a clip and with the CSS "stub" of paper.
And here is the result:
Minuses:
- The visual grid of asterisks and signs "=" breaks
- Refusal of paper clips
- The “bit” of paper does not look like it was originally intended
Pros:
- Removed 8.5 kilobytes of unnecessary graphics (but added 50 bytes from a transparent gif spacer)
- The letter looks awesome on mobiles
- In general, the design has not changed
Remarks:
- The behavior of mobile Gmail is different from the result in other mobile clients due to the fact that Gmail does not understand Media Queries
- Browser Outlook ignored all floats. The variant with table align = "left" should save in this case.
- Ancient versions of Outlook did not want to draw a beautiful "stub", but it was not scary either. A sort of graceful degradation.
As a rule, the game is not worth such perversions with layout. It is enough to slightly change the initial design of the layout to simplify the implementation of the letter.
These developments can be used by anyone and for whatever purposes. Especially if it helps to solve the problem with the notification letters from Yandex money.
I have long been a purring user of Yandex money, but already for a couple of months I have been experiencing severe discomfort from transactional notification letters. The fact is that they are not adapted for mobile devices. On Twitter, they didn’t respond to my indignation, and I decided to set this task for myself to be implemented, as they say for fun.
So, the letter:
')
The footer doesn’t really interest us, because everything is ok there.
Here is what we see on the Android phone screen in Gmail:
It all went. If we open the letter in Android Mail, then it will be displayed normally, except that horizontal scrolling will appear. Those. the letter is not adapted to the screen of the smartphone. This is what I will do.
We study the source code of the letter:
In general, everything is adequate, like smart people did, but it was not there. Padding'i for block elements are used, text formatting is set through font, links to span wraps with the task of color. In general, spat on Outlook, by and large. So it is, there are a number of "jambs" in Outlook, but they are not lethal. Further analysis of the code showed no attempts to adapt the letter for small screens.
Before moving closer to the point, let’s focus on one more thing. List of incoming letters:
Sender - Yandex Money. OK.
Subject - you paid from the account
Further, the text of the letter - Payment successfully completed. This is all good. But why duplicate "Yandex Money"? And this phrase appeared due to the fact that the logo bears alt = "Yandex Money". What for? I see no objective reasons. One could refer to the signature for those who have not downloaded pictures. So why not send a logo as an attachment? Then it will be shown anyway.
Closer to the point
See how you can adapt the letter. To do this, first of all, examine the graphics. In fact, it was not enough.
The asterisks and stitching could be simply squeezed to 100% for the adaptive layout's rubberiness, but here two tangible minuses appear:
1. The bottom of the clip is a separate element.
2. Asterisks and "=" signs are quite small and their pressing will make them difficult to read.
But let's try to shrink it, that is.
Here is the result I got after a couple of experiments with percentage values:
Source code for the curious
<meta charset="utf-8"> <style> body { margin:0; } @media only screen and (max-width:442px) { .wrapper { width:100% !important; } .image { width:100% !important; } } </style> <table background="https://money.yandex.ru/i/html-letters/bg_texture.png" style="background:url('https://money.yandex.ru/i/html-letters/bg_texture.png');" width="100%" cellpadding="0"cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <table class="wrapper" align="center" width="442" cellpadding="0"cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <table cellpadding="10" cellspacing="0" style="border-collapse:collapse;"> <tr> <td width="129" height="74" align="right" valign="bottom"> <a href="https://money.yandex.ru/?_openstat=mail;inform;outpay;logo;" title="." target="_blank"><img src="1450828500872069127971" width="109" height="44" style="border:none; display:block;"></a> </td> </tr> </table> </td> </tr> <tr> <td colspan="2"> <img class="image" src="https://money.yandex.ru/i/html-letters/check_top.png" style="display:block;"> </td> </tr> <tr> <td bgcolor="#ffffff" style="width:83.4%">2121212</td> <td style="width:16.6%" align="right"> <img src="https://ci6.googleusercontent.com/proxy/dFUGdcNglNxVtEnimrOQ01vQq4EmO9xg-f8-inzwIGK54WOzI8aV93hILcFvYwSGOWuHq9I2rG1sjA7UGWPs9ecvZRhJukTOSgNmlw=s0-d-e1-ft#https://money.yandex.ru/i/html-letters/check_clips.png" width="74" alt="" style="display:block; width:100%;"> </td> </tr> </table> </td> </tr> </table> The naked eye can see that everything is very bad, even in chrome with a window size of 320px in width. The image becomes extremely fuzzy.
Experimenting
I decided to try to score on the clip and realize a ribbed top with the help of CSS.
This is the maximum that I did.
Source
<meta charset="utf-8"> <style> body { margin:0; } @media only screen and (max-width:442px) { .wrapper { width:100% !important; } .image { width:100% !important; } } </style> <table background="https://money.yandex.ru/i/html-letters/bg_texture.png" style="background:url('https://money.yandex.ru/i/html-letters/bg_texture.png');" width="100%" cellpadding="0"cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <table class="wrapper" align="center" width="442" cellpadding="0"cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <table cellpadding="10" cellspacing="0" style="border-collapse:collapse;"> <tr> <td width="129" height="74" align="right" valign="bottom"> <a href="https://money.yandex.ru/?_openstat=mail;inform;outpay;logo;" title="." target="_blank"><img src="1450828500872069127971" width="109" height="44" style="border:none; display:block;"></a> </td> </tr> </table> </td> </tr> <tr> <td> <table style="border-top:#ffffff 1px dashed" bgcolor="#d9d9d9" align="center" width="422" height="10" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td bgcolor="#ffffff" style="border-left:#d9d9d9 1px solid; border-right:#d9d9d9 1px solid; border-top:#d9d9d9 1px dashed;"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> Quite good, but does not pull on the original version. You can implement through the background image, but in this case, we lose outlook. Although who cares? Oh yeah, me! Well, we implement the option without a clip and with the CSS "stub" of paper.
And here is the result:
Source
<meta charset="utf-8"> <style> body { margin:0; } @media only screen and (max-width:442px) { .wrapper { width:100% !important; } .check { width:100% !important;} .image { width:100% !important; } .tile { width:100% !important; float:none !important; width:185px !important; margin:auto; } } </style> <table background="https://money.yandex.ru/i/html-letters/bg_texture.png" style="background:url('https://money.yandex.ru/i/html-letters/bg_texture.png');" width="100%" cellpadding="0"cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <table class="wrapper" align="center" width="442" cellpadding="0"cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <table cellpadding="20" cellspacing="0" style="border-collapse:collapse;"> <tr> <td width="119" height="74" align="right" valign="bottom"> <a href="https://money.yandex.ru/?_openstat=mail;inform;outpay;logo;" title="." target="_blank"><img src="1450828500872069127971" width="109" height="44" style="border:none; display:block;"></a> </td> </tr> </table> </td> </tr> <tr> <td> <table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td width="12" height="10"></td> <td> <table style="border-top:#ffffff 1px dashed;" bgcolor="#d9d9d9" align="center" width="100%" height="8" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td height="10" bgcolor="#ffffff" style="border-left:#d9d9d9 1px solid; border-right:#d9d9d9 1px solid; border-top:#d9d9d9 1px dashed;"> <img src="1450828500759510397803" width="10" height="10" alt="" style="display:block;"> </td> </tr> </table> </td> <td width="12" height="10"></td> </tr> </table> <table bgcolor="#ffffff" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td width="11" style="border:#d9d9d9 1px solid; border-bottom:none; border-right:none;"><img src="1450828500759510397803" width="10" height="10" alt="" style="display:block;"></td> <td> <table bgcolor="#d9d9d9" class="check" align="center" width="100%" cellpadding="5" cellspacing="0" style="border-bottom:#ffffff 1px dashed; border-left:#d9d9d9 1px solid; border-right:#d9d9d9 1px solid;"> <tr> <td bgcolor="#ffffff" style="border-bottom:#d9d9d9 1px dashed;"> <div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">*****************************</span></div> <div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"> </span></div> <div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">=============================</span></div> <table width="100%" cellpadding="15" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"> </span></div> <div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"><b> PYATEROCHKA 38</b></span></div> <div style="line-height:0;"><img src="1450828500759510397803" style="display:block;" width="10" height="10" alt=""></div> <div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"> </span></div> <div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"><b>16.02.2014 19:27</b></span></div> <div style="line-height:0;"><img src="1450828500759510397803" style="display:block;" width="10" height="10" alt=""></div> <div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"> </span></div> <div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"><b>706 .</b></span></div> </td> </tr> </table> <div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">=============================</span></div> <table width="100%" cellpadding="15" cellspacing="0" style="border-collapse:collapse;"> <tr> <td> <div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"></span></div> <div class="tile" style="line-height:18px; float:left; width:50%;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"><b>1 345 . 77 .</b></span></div> </td> </tr> </table> <div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666">*****************************</span></div> <div align="center" style="line-height:24px;"><span style="font-family:Consolas,monaco,monospace; font-size:14px; color:#666666"> — <a href="#" target="_blank" style="color:#0b55d9 !important;"><span style="color:#0b55d9"></span></a>.</span></div><br> </td> </tr> </table> <br> </td> <td width="11" style="border:#d9d9d9 1px solid; border-bottom:none; border-left:none;"><img src="1450828500759510397803" width="10" height="10" alt="" style="display:block;"></td> </tr> </table> </td> </tr> </table> </td> </tr> </table> Results achieved
Minuses:
- The visual grid of asterisks and signs "=" breaks
- Refusal of paper clips
- The “bit” of paper does not look like it was originally intended
Pros:
- Removed 8.5 kilobytes of unnecessary graphics (but added 50 bytes from a transparent gif spacer)
- The letter looks awesome on mobiles
- In general, the design has not changed
Remarks:
- The behavior of mobile Gmail is different from the result in other mobile clients due to the fact that Gmail does not understand Media Queries
- Browser Outlook ignored all floats. The variant with table align = "left" should save in this case.
- Ancient versions of Outlook did not want to draw a beautiful "stub", but it was not scary either. A sort of graceful degradation.
PS
As a rule, the game is not worth such perversions with layout. It is enough to slightly change the initial design of the layout to simplify the implementation of the letter.
These developments can be used by anyone and for whatever purposes. Especially if it helps to solve the problem with the notification letters from Yandex money.
Source: https://habr.com/ru/post/212821/
All Articles