November 17, 2014 at 12:36Workspace for developing letters
Theme inspired by post Munroe Lee , who was covered in the digest Habré . I just couldn't get past him. Therefore, further I will talk about my workspace for developing letters.
List of author tools:
Sketch - no questions. I prefer Moqups.com, although Sketch is also good.
Sublime is entirely a matter of taste. In my case, these are Notepad ++ on Windows and Brackets on OSX
Grunt & SCSS - an extremely powerful form of perversion, which is simply unthinkable for preparing letters. Moreover, the final code of the author’s letter is very monstrous, while it has very limited support for
Handlebars email clients - approx. I work on pure php or use liquid for designers in one of the internal
GitHub projects - ok
Mailgun - No wonder. The product of the company in which the author himself works. I'm closer to mandrillapp and sendgrid.
Litmus - We agreed on something.
Further about my bell tower.
- Windows laptop
- MacBook Pro
- fifth generation iPod (retina)
- iPad mini (retina)
- Sony XPeria Z
- Nokia X
Composing a block diagram on a Coggle . Simple and intuitive tool. The only negative is that it does not allow looping schemes. But this is an uncritical flaw for me.
Lee writes that he is not trying to create a perfect pixel when creating a prototype, motivating it with the fact that all the same, mailers at the output will not give the original accuracy with respect to the layout. I will say that this is nonsense. 90% of mailers will give an ideal result in a clearly conceived form, if you take this seriously. Of possible future deviations, only inconsistencies in the alignment of the right elements are expected, and vertical correspondence to the modular grid. progressive enchantment.
For foppiness and visualization, it makes sense to use ready-made interfaces. Gmail and iPhone .
Photoshop uses Photoshop to render layouts. The version is not critical. On Windows, I still have CS3, on the poppy I installed the SS version. When drawing layouts, I try to adhere to the golden rule: "Everything except the logo, icons and photos should be made up, and not implemented with pictures." This favorably affects the "weight" of the letter, the simplicity of its layout, and in general the letter is pleasant. Although there are exceptions to each case. Many emails from mobile games, for example, consist primarily of graphics. But I will not talk about such nuances today.
As I wrote above, on Windows for layout I use Notepad ++ with the Zenburn theme. From white eyes fall out. On the poppy, the Brackets editor with the theme of Brackets Dark. Both editors use the Consolas 13px font.
If you take a digression about the editors, then with them, in fact, everything is complicated.
I started working with Dreamweaver 4 versions 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 still developed rapidly. Basically, all kinds of whistles and fakes for non-programmers were screwed to it, and almost no features were added to write code. The autocomplete was gorgeous even in version 4, and the dark color schemes seem to have not been screwed up yet. And if they screwed it, then it's too late. Do not.
Sublime is good at minimap scrolling text and lots of plugins. I’ll manage without a card, plugins are not very critical for me, but I can’t afford the tabs for religious reasons. Subjectively disgusting.
So I came NPP for Windows, so I stayed on it. The lack of a file manager does not bother me, because the explorer is quite convenient. Again subjective.
On the poppy, the choice is not great. I tried WebStorm, but it started to fall on layouts over 500 lines. Not that it would fall directly, but the formatting was starting to get furious, the tabs were inverted (the ladder was going the other way). The problem was observed with copy-paste of large sections of code. Well, I quit this business.
So I got to the Brackets. Satisfies absolutely everything. The only negative is that it does not work with files in 1251 encoding. And I still have a couple of long-term projects on the old Bitrix. From here and embarrassment.
Using blanks is good. Lee has, as he writes about himself, a very simple email template . I choked on such simplicity. I understand that everyone has their own bike, but it’s worth seeing how many customers Lee supports, you can proudly hit your chest with your heel, I’m better .
I do not use CSS inliners, SCSS and primers. Only a clean inline code right away. Someone will say that such a code is difficult to maintain, and I will say - nifiga. Find & Replace is my best friend if global change is needed. The structure of all blocks is very similar, therefore, a blank is taken, a couple of blocks are imposed, and then copy / paste. And no hipster stuff.
Nevertheless, I use rendered styles for Outlook hacks, media_queries, and general wrapper for writing.
For template use liquid for designers or pure php. It is used by and large to display the same type of content in the letter template - for example, the display of store goods. It is also used for setting UTM tags for links and manipulations with mathematics.
This is perhaps the most hardcore moment of my work, because I opened my mouth to a huge number of mailers, and I can do it well. The following is a listing of those that I support and how to 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 the source code of the letter
- JSFiddle for "live" sharing
Agree, I can hardly be called "some kind of spammer" and generally a dude who does bad things. It’s really interesting for me to fight with such a zoo, developing my own layout methodology, which I eventually talk about here.
There are a number of issues with mobile winery. What email clients do you use windows smartphones? What nuances can you tell? Screen resolutions, features of certain phone models? Which are worth buying for testing? I think to buy 1-2 phones for these needs.
First of all, let’s go through Lee Munroe’s post.
List of author tools:
Sketch - no questions. I prefer Moqups.com, although Sketch is also good.
Sublime is entirely a matter of taste. In my case, these are Notepad ++ on Windows and Brackets on OSX
Grunt & SCSS - an extremely powerful form of perversion, which is simply unthinkable for preparing letters. Moreover, the final code of the author’s letter is very monstrous, while it has very limited support for
Handlebars email clients - approx. I work on pure php or use liquid for designers in one of the internal
GitHub projects - ok
Mailgun - No wonder. The product of the company in which the author himself works. I'm closer to mandrillapp and sendgrid.
Litmus - We agreed on something.
Further about my bell tower.
My devices
- Windows laptop
- MacBook Pro
- fifth generation iPod (retina)
- iPad mini (retina)
- Sony XPeria Z
- Nokia X
Development of trigger strategies
Composing a block diagram on a Coggle . Simple and intuitive tool. The only negative is that it does not allow looping schemes. But this is an uncritical flaw for me.
Prototyping
Lee writes that he is not trying to create a perfect pixel when creating a prototype, motivating it with the fact that all the same, mailers at the output will not give the original accuracy with respect to the layout. I will say that this is nonsense. 90% of mailers will give an ideal result in a clearly conceived form, if you take this seriously. Of possible future deviations, only inconsistencies in the alignment of the right elements are expected, and vertical correspondence to the modular grid. progressive enchantment.
Drawing
For foppiness and visualization, it makes sense to use ready-made interfaces. Gmail and iPhone .
Photoshop uses Photoshop to render layouts. The version is not critical. On Windows, I still have CS3, on the poppy I installed the SS version. When drawing layouts, I try to adhere to the golden rule: "Everything except the logo, icons and photos should be made up, and not implemented with pictures." This favorably affects the "weight" of the letter, the simplicity of its layout, and in general the letter is pleasant. Although there are exceptions to each case. Many emails from mobile games, for example, consist primarily of graphics. But I will not talk about such nuances today.
Code Editors
As I wrote above, on Windows for layout I use Notepad ++ with the Zenburn theme. From white eyes fall out. On the poppy, the Brackets editor with the theme of Brackets Dark. Both editors use the Consolas 13px font.
If you take a digression about the editors, then with them, in fact, everything is complicated.
I started working with Dreamweaver 4 versions 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 still developed rapidly. Basically, all kinds of whistles and fakes for non-programmers were screwed to it, and almost no features were added to write code. The autocomplete was gorgeous even in version 4, and the dark color schemes seem to have not been screwed up yet. And if they screwed it, then it's too late. Do not.
Sublime is good at minimap scrolling text and lots of plugins. I’ll manage without a card, plugins are not very critical for me, but I can’t afford the tabs for religious reasons. Subjectively disgusting.
So I came NPP for Windows, so I stayed on it. The lack of a file manager does not bother me, because the explorer is quite convenient. Again subjective.
On the poppy, the choice is not great. I tried WebStorm, but it started to fall on layouts over 500 lines. Not that it would fall directly, but the formatting was starting to get furious, the tabs were inverted (the ladder was going the other way). The problem was observed with copy-paste of large sections of code. Well, I quit this business.
So I got to the Brackets. Satisfies absolutely everything. The only negative is that it does not work with files in 1251 encoding. And I still have a couple of long-term projects on the old Bitrix. From here and embarrassment.
Layout
Using blanks is good. Lee has, as he writes about himself, a very simple email template . I choked on such simplicity. I understand that everyone has their own bike, but it’s worth seeing how many customers Lee supports, you can proudly hit your chest with your heel, I’m better .
I do not use CSS inliners, SCSS and primers. Only a clean inline code right away. Someone will say that such a code is difficult to maintain, and I will say - nifiga. Find & Replace is my best friend if global change is needed. The structure of all blocks is very similar, therefore, a blank is taken, a couple of blocks are imposed, and then copy / paste. And no hipster stuff.
Nevertheless, I use rendered styles for Outlook hacks, media_queries, and general wrapper for writing.
Templating
For template use liquid for designers or pure php. It is used by and large to display the same type of content in the letter template - for example, the display of store goods. It is also used for setting UTM tags for links and manipulations with mathematics.
Testing
This is perhaps the most hardcore moment of my work, because I opened my mouth to a huge number of mailers, and I can do it well. The following is a listing of those that I support and how to 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 pens
- Mail App
- Gmail App
- Mailbox App
Source sharing and storage
- Closed repository on github
- Pastebin for sharing the source code of the letter
- JSFiddle for "live" sharing
There is room to grow
Agree, I can hardly be called "some kind of spammer" and generally a dude who does bad things. It’s really interesting for me to fight with such a zoo, developing my own layout methodology, which I eventually talk about here.
There are a number of issues with mobile winery. What email clients do you use windows smartphones? What nuances can you tell? Screen resolutions, features of certain phone models? Which are worth buying for testing? I think to buy 1-2 phones for these needs.