Truly responsive letters. Part two. Framework

Picture to attract attention honestly fucked at the invisionapp (by the way, they have a divine mailing)

Since the publication of the last post, no less than a month and a half have passed, but there were reasons for that. A lot of work and delusional thoughts zadrota-maker. At first, I was going to simply adopt Nicole Merlin’s methods for writing letters to myself, but then the hipster head thought: Why not zafigachit a whole framework ? The loud word for my crafts, but I am pleased to call him that. Let's start with the simple.

Demo here

What for?

Why do we need another bike? It's simple. The most cool tool for the layout of letters today is Zurb ink , as far as I know. But he has one fatal flaw. It does not support adaptability for email clients that do not support media queries. Therefore, it was decided to write a tool based on my and Nicole developments. By the way, Nicole was pleasantly surprised by the translation of her article in Habré and asked me to convey thanks to Elusive_Dream , which I personally did.
')

For whom

The tool is designed for web designers with good knowledge of both modern and fossil HTML and CSS. The code is clean enough and pleasant to work with. An ordinary marketer, perhaps, will not be able to collect a sane letter based on my code. I shared my code with the Russian email-get-together on Facebook and accepted the idea warmly, but instantly offered to make an editor out of the drag'n'drop framework. I am categorically against it, for all these editors are extremely limited and castrated in their abilities. In the current form, we get unlimited scope for work, and most importantly - a very fast process of creating letters and very convenient code support.

Email client support

- MS Outlook 2003-2007
- MS Outlook 2010-2013
- Outlook.com (web, iOS, android, windows phone)
- Thunderbird (windows)
- AOL (iOS)
- Yahoo! (web, iOS)
- Google Inbox (iOS, android)
- Gmail (web, iOS, android)
- Mail.ru (web, iOS)
- Rambler.ru (web)
- Yandex mail (web, iOS, android)
- myMail (iOS, android)
- Sparrow (OSX, iOS) unfortunately now it is cut from the Apple Store
- Airmail (OSX)
- Apple Mail (OSX, iOS)
- Mailbox (OSX, iOS, android)
- Spark (iOS)

What we need

The following is my perverted version. You can simplify it at your discretion.

- Any text editor. In my case, this is an Atom on a poppy.
- Paid Litmus account, which I use only for testing all versions of Outlook, which allows me not to use windows for testing emails.
- iPhone. Although I am satisfied with the sixth-generation iPod, on which 11 mail clients are installed, and that's enough for me.
- Nokia Lumia for testing letters in Windows outluk.
- Nokia X2 for testing Android Mail, Yandex and Outlook clients. This is basically enough for testing the android, but occasionally I look at the result of work in clients on android 4.2. I have not yet acquired a Lollipop smartphone.
- Inliner for transferring styles from head to inline before rolling out the layout to production
- Free mailchimp account to quickly test emails on live devices

Running

Over the last month I have run in my code on more than a hundred different letters and, in general, am pleased with the result. The framework underwent multiple executions in the form of refactoring in favor of improving the readability of the code and its performance in letters. For those to whom the idea of ​​developing this thing seems interesting, welcome to the issues on the githab . I can also suggest to find me on Facebook with the nickname of the same name on Habré. There my tape is clogged mainly with the subject of letters. Any questions regarding the development of letters you can ask me here in the comments, on Facebook or by mail, which is listed in the profile on the browser.

What's in the plans

- Refactoring, refactoring, refactoring
- Adding a collector that will automatically collect our letters from different files and inline CSS automatically.
- Writing documentation. I look at SourceJS .
- Adding all kinds of snippets and templates. For example, display of goods online stores and other common elements in the work.

What is from the amenities

- Minimalistic PSD Gmail interface template for easy rendering of letter layouts
- A set of social icons from socicon
- Remarketing Texts for Retail Online Stores

All this can be found in the repository on Gitkhab.

Of the last victories

- I made friends with the availability of an outlook with support for retina displays
- Made fully clickable buttons (and not just text) without using pictures
- Achieved an adequate behavior of multicolumn elements on mobile phones

PS Not very informative post, but quite an interesting announcement. As soon as I have a really meaningful material for the tutorial on my hands, I will definitely write it. Stey Tund.