Workspace to develop letters
The theme was inspired by the post of Lee Munroe , which was covered in a digest on the Habré . I just could not get past him. Therefore, further I will tell about my workspace for developing letters.
List of author's tools:
Sketch - no questions. I prefer Moqups.com, although Sketch is also good.
Sublime is purely a matter of taste. In my case, this is Notepad ++ on Windows and Brackets on OSX.
Grunt & SCSS is an extremely strong form of perversion that is simply unthinkable for the preparation of letters. Moreover, the final code of the letter of the author is very monstrous, while it has very limited support for email clients.
Handlebars - approx. I work on pure php or use liquid for designers in one of the internal projects
Github - ok
Mailgun - No wonder. The product of the company in which the author works. I feel closer to mandrillapp and sendgrid.
Litmus - We agreed on something.
')
Further on my bell tower.
- Laptop with Windows
- MacBook Pro
- iPod fifth generation (retina)
- iPad mini (retina)
- Sony XPeria Z
- Nokia X
I make a block diagram on Coggle . Simple and intuitive tool. The only negative - does not make looping schemes. But this is a non-critical drawback for me.
Lee writes that he is not trying to achieve a perfect pixel when creating a prototype, arguing that all the same, the mailers will not give the initial accuracy relative to the layout. I will say that this is nonsense. 90% of mailers will give the perfect result in a clearly conceived form, if you take this seriously. Of possible future deviations, only inconsistencies in the alignment of the right elements and a vertical correspondence to the modular grid are expected. progressive enchantment.
For fussy and visibility, it makes sense to use ready-made interfaces. Gmail and iPhone .
Photoshop is used for drawing layouts. The version is not critical. On Windows, I still have CS3, on the poppy, I put the SS version. When drawing mock-ups, I try to adhere to the golden rule: “Everything except the logo, icons and photos should be put together, not realized by pictures.” This favorably affects the “weight” of the letter, the simplicity of its typesetting and, in general, the letter is pleasant. Although in each case there are exceptions. Many letters from mobile games, for example, consist mainly of graphics. But I will not tell about such nuances today.
As I wrote above, on Windows I use Notepad ++ for layout with the Zenburn theme. White eyes fall out. On the Mac, the Brackets editor has the Brackets Dark theme. Both editors use the Consolas 13px font.
If you take a digression about the editors, then with them I really have everything difficult.
I started working with Dreamweaver version 4, when it was still owned by Macromedia. At that time, it was the perfect cool editor. Years passed, Adobe became the owner, but the project was still developing dumbly. Basically, all sorts of whistles and fakes for non-programmers were fastened to it, and for writing the code, almost no features were added. Avtokomplit was gorgeous in 4 versions, and the dark color scheme seems to be still not screwed up. And if they screwed it, it's too late. Do not.
Sublime is good at scrolling text on the minimap and an abundance of plug-ins. Without a map, I’ll somehow get along, plug-ins are not very critical for me, but I can’t afford tabs for religious reasons. Subjectively disgusting.
So I came to NPP for Windows, so it remained on it. The absence of the file manager does not bother me, because the explorer is quite convenient. Again subjectively.
On poppy selection is not great. I tried WebStorm, but it began to fall on layouts over 500 lines. Not that it was falling straight, but the formatting was starting to get mad, the tabs were inverted (the ladder went the other way). The problem was observed when copying large areas of code. So I threw this thing.
So I got to the Brackets. Satisfies absolutely everything. The only negative - does not work with files in 1251 encoding. And I still have a couple of multi-year projects on the old bitrix. From here and confusion.
Using blanks is good. Lee has this, as he himself writes, very simple email template . I choked on such simplicity. I understand that everyone has his own bike, but it’s worth seeing how many clients are supporting Lee, you can proudly hit his heel in the chest and say, I’m better off .
I do not use CSS inliners, SCSS and primer. Only clean inline code immediately. Someone will say that such code is difficult to maintain, and I will say - nifiga. Find & Replace is my best friend if you need to make global changes. The structure of all the blocks is very similar, so the blank is taken, a pair of blocks is made up, and then copy / paste. And no hipster pieces.
Nevertheless, I use rendered styles for the hacks of Outlook, media_queries, and the design of the wrapper for writing.
For template making use liquid for designers or pure php. It is used by and large to display content of the same type in a letter pattern — for example, display of store goods. It is also used to set UTM tags for references and manipulations with mathematics.
This is perhaps the most hardcore moment of my work, for I have opened my mouth to a huge number of mailers, and I am good at it. Further enumeration of those which I support and as I test.
- Outlook 2000
- Outlook 2002
- Outlook 2003
- Outlook 2007
- Outlook 2010
- Outlook 2011
- Outlook 2013
- Thunderbird Latest
- Yahoo! mail
- Yandex Mail
- Mail.ru mail
- Rambler mail
- Outlook.com
- gmail
- The Bat!
- postbox
- Sparrow
- AirMail
- MailBox
- postbox
- Mail App
- Mail App
- Gmail App
- Mailbox App
- Sparrow App
- Mail App
- Gmail App
- Mailbox App
- Closed repository on github
- Pastebin for sharing letter source code
- JSFiddle for live sharing
You must admit that I can hardly be called "somehow a spammer" and generally a dude who does bad things. It is really interesting for me to fight with a similar zoo, developing my own typesetting methodology, which I end up talking about here.
There are a number of questions for mobile winders. Which email clients do you use windows smartphones? What nuances can you tell? Screen resolutions, features of those or other phone models? What should be purchased for testing? I think to buy 1-2 phones for these needs.
First of all, go through the post by Lee Munroe
List of author's tools:
Sketch - no questions. I prefer Moqups.com, although Sketch is also good.
Sublime is purely a matter of taste. In my case, this is Notepad ++ on Windows and Brackets on OSX.
Grunt & SCSS is an extremely strong form of perversion that is simply unthinkable for the preparation of letters. Moreover, the final code of the letter of the author is very monstrous, while it has very limited support for email clients.
Handlebars - approx. I work on pure php or use liquid for designers in one of the internal projects
Github - ok
Mailgun - No wonder. The product of the company in which the author works. I feel closer to mandrillapp and sendgrid.
Litmus - We agreed on something.
')
Further on my bell tower.
My devices
- Laptop with Windows
- MacBook Pro
- iPod fifth generation (retina)
- iPad mini (retina)
- Sony XPeria Z
- Nokia X
Trigger strategy development
I make a block diagram on Coggle . Simple and intuitive tool. The only negative - does not make looping schemes. But this is a non-critical drawback for me.
Prototyping
Lee writes that he is not trying to achieve a perfect pixel when creating a prototype, arguing that all the same, the mailers will not give the initial accuracy relative to the layout. I will say that this is nonsense. 90% of mailers will give the perfect result in a clearly conceived form, if you take this seriously. Of possible future deviations, only inconsistencies in the alignment of the right elements and a vertical correspondence to the modular grid are expected. progressive enchantment.
Drawing
For fussy and visibility, it makes sense to use ready-made interfaces. Gmail and iPhone .
Photoshop is used for drawing layouts. The version is not critical. On Windows, I still have CS3, on the poppy, I put the SS version. When drawing mock-ups, I try to adhere to the golden rule: “Everything except the logo, icons and photos should be put together, not realized by pictures.” This favorably affects the “weight” of the letter, the simplicity of its typesetting and, in general, the letter is pleasant. Although in each case there are exceptions. Many letters from mobile games, for example, consist mainly of graphics. But I will not tell about such nuances today.
Code editors
As I wrote above, on Windows I use Notepad ++ for layout with the Zenburn theme. White eyes fall out. On the Mac, the Brackets editor has the Brackets Dark theme. Both editors use the Consolas 13px font.
If you take a digression about the editors, then with them I really have everything difficult.
I started working with Dreamweaver version 4, when it was still owned by Macromedia. At that time, it was the perfect cool editor. Years passed, Adobe became the owner, but the project was still developing dumbly. Basically, all sorts of whistles and fakes for non-programmers were fastened to it, and for writing the code, almost no features were added. Avtokomplit was gorgeous in 4 versions, and the dark color scheme seems to be still not screwed up. And if they screwed it, it's too late. Do not.
Sublime is good at scrolling text on the minimap and an abundance of plug-ins. Without a map, I’ll somehow get along, plug-ins are not very critical for me, but I can’t afford tabs for religious reasons. Subjectively disgusting.
So I came to NPP for Windows, so it remained on it. The absence of the file manager does not bother me, because the explorer is quite convenient. Again subjectively.
On poppy selection is not great. I tried WebStorm, but it began to fall on layouts over 500 lines. Not that it was falling straight, but the formatting was starting to get mad, the tabs were inverted (the ladder went the other way). The problem was observed when copying large areas of code. So I threw this thing.
So I got to the Brackets. Satisfies absolutely everything. The only negative - does not work with files in 1251 encoding. And I still have a couple of multi-year projects on the old bitrix. From here and confusion.
Layout
Using blanks is good. Lee has this, as he himself writes, very simple email template . I choked on such simplicity. I understand that everyone has his own bike, but it’s worth seeing how many clients are supporting Lee, you can proudly hit his heel in the chest and say, I’m better off .
I do not use CSS inliners, SCSS and primer. Only clean inline code immediately. Someone will say that such code is difficult to maintain, and I will say - nifiga. Find & Replace is my best friend if you need to make global changes. The structure of all the blocks is very similar, so the blank is taken, a pair of blocks is made up, and then copy / paste. And no hipster pieces.
Nevertheless, I use rendered styles for the hacks of Outlook, media_queries, and the design of the wrapper for writing.
Templates
For template making use liquid for designers or pure php. It is used by and large to display content of the same type in a letter pattern — for example, display of store goods. It is also used to set UTM tags for references and manipulations with mathematics.
Testing
This is perhaps the most hardcore moment of my work, for I have opened my mouth to a huge number of mailers, and I am good at it. Further enumeration of those which I support and as I test.
Litmus
- Outlook 2000
- Outlook 2002
- Outlook 2003
- Outlook 2007
- Outlook 2010
- Outlook 2011
- Outlook 2013
- Thunderbird Latest
- Yahoo! mail
In browsers pens
- Yandex Mail
- Mail.ru mail
- Rambler mail
- Outlook.com
- gmail
Windows handles
- The Bat!
- postbox
Osx handles
- Sparrow
- AirMail
- MailBox
- postbox
- Mail App
iOS pens
- Mail App
- Gmail App
- Mailbox App
- Sparrow App
Android handles
- Mail App
- Gmail App
- Mailbox App
Source sharing and storage
- Closed repository on github
- Pastebin for sharing letter source code
- JSFiddle for live sharing
There is room to grow
You must admit that I can hardly be called "somehow a spammer" and generally a dude who does bad things. It is really interesting for me to fight with a similar zoo, developing my own typesetting methodology, which I end up talking about here.
There are a number of questions for mobile winders. Which email clients do you use windows smartphones? What nuances can you tell? Screen resolutions, features of those or other phone models? What should be purchased for testing? I think to buy 1-2 phones for these needs.
Source: https://habr.com/ru/post/237919/
All Articles