Тема навеяна постом Lee Munroe, который освещался в дайджесте на хабре. Я просто не смог пройти мимо него. Поэтому дальше я расскажу о своем workspace для разработки писем.
Список инструментов автора:
Sketch — вопросов не вызывает. Я предпочитаю Moqups.com, хотя Sketch тоже неплох.
Sublime — исключительно дело вкуса. В моем случае это Notepad++ на винде и Brackets на OSX
Grunt & SCSS — крайне сильная форма извращения, которая просто немыслима для подготовки писем. Более того, итоговый код письма автора очень монструозен, при этом обладает совсем ограниченной поддержкой почтовых клиентов
Handlebars — ок. Я работаю на чистом php либо использую liquid for designers в одном из внутренних проектов
GitHub — ок
Mailgun — Не мудрено. Продукт компании, в которой работает сам автор. Мне ближе mandrillapp и sendgrid.
Litmus — В чем-то мы сошлись.
Дальше о моей колокольне.
— Ноутбук с Windows
— MacBook Pro
— iPod пятого поколения (retina)
— iPad mini (retina)
— Sony XPeria Z
— Nokia X
Составляю блок схемы на Coggle. Простой и понятный инструмент. Единственный минус — не дает делать зацикленные схемы. Но это некритичный недостаток для меня.
Lee пишет о том, что не пытается при создании прототипа добиться пиксель перфекта, мотивируя это тем, что все равно почтовики на выходе не дадут исходной точности относительно макета. Я скажу, что это чушь. 90% почтовиков дадут идеальный результат в четко задуманном виде, если к этому подойти серьезно. Из возможных будущих отклонений предвидится только несоответствия выравнивания right элементов, и вертикальное соответствие модульной сетке. progressive enchantment.
Для пижонства и наглядности имеет смысл использовать готовые интерфейсы. Gmail и iPhone.
Для отрисовки макетов используется Photoshop. Версия не критична. На винде у меня до сих пор стоит CS3, на маке я поставил СС версию. При отрисовке макетов я стараюсь придерживаться золотого правила: «Все кроме логотипа, иконок и фотографий должно быть сверстано, а не реализовано картинками». Это благоприятно сказывается на «весе» письма, простоте его верстки и в целом письмо получается приятным. Хотя из каждого случая есть исключения. Многие письма от мобильных игр, например, состоят преимущественно из графики. Но о таких нюансах я расскажу не сегодня.
Как я уже писал выше, на винде для верстки я использую Notepad++ с темой Zenburn. От белой вываливаются глаза. На маке редактор Brackets c темой Brackets Dark. В обоих редакторах используется шрифт Consolas 13px.
Если взять отступление о редакторах, то с ними у меня на самом деле все сложно.
Я начинал работать с Dreamweaver 4 версии, когда он еще принадлежал компании Macromedia. На тот момент это был идеальный крутой редактор. Шли годы, владельцем стала компания Adobe, но проект все равно развивался стремно. В основном к нему прикручивали всевозможные свистелки и перделки для непрограммистов, а для написания кода фич практически не добавлялось. Автокомплит был шикарен еще в 4 версии, а темной color схемы вроде как до сих пор еще не прикрутили. А если и прикрутили, то поздно уже. Не надо.
Sublime хорош прокруткой текста по миникарте и обилием плагинов. Без карты я как нибудь обойдусь, плагины для меня не сильно критичны, а вот вкладки я не могу себе позволить по религиозным соображениям. Субъективно отвратительные.
Так я пришел NPP для Windows, так на нем и остался. Отсутствие менеджера файлов меня не напрягает, ибо проводник достаточно удобен. Опять же субъективно.
На маке выбор не велик. Я попробовал WebStorm, но он начал падать на макетах over 500 строк. Не то, чтобы прямо падать, но форматирование начинало взбешиваться, табы инвертировались(лесенка шла в другую сторону). Проблема наблюдалась при копипасте больших участков кода. Ну я и бросил это дело.
Так я добрался до Brackets. Устраивает абсолютно все. Единственный минус — не работает с файлами в 1251 кодировке. А у меня осталась пара многолетних проектов на старом битриксе. От сюда и конфуз.
Использоваение заготовок это хорошо. У Lee это, как о сам пишет, very simple email template. Я поперхнулся от такой простоты. Я понимаю, что у каждого свой велосипед, но стоит посмотреть сколько клиентов поддерживает Lee, можно гордо вдарив пяткой в грудь сказать, у меня лучше.
Я не использую CSS инлайнеров, SCSS и грунтовку. Только чистый инлайновый код сразу. Кто-то скажет, что такой код сложно поддерживать, а я скажу — нифига. Find & Replace — мой лучший друг, если необходимо провести глобальные изменения. Структура всех блоков очень похожа, поэтому берется заготовка, верстается пара блоков, а дальше — copy/paste. И никаких хипстерских штук.
Тем не менее я использую вынесенные стили для хаков Outlook, media_queries и оформления обшего wrapper'а для письма.
Для шаблонизации используется liquid for designers либо чистый php. Применяется по большому счету для вывода однотипного контента в шаблоне письма — например выкладка товаров магазина. Так же юзается для простановки UTM меток для ссылок и манипуляций с математикой.
Это, пожалуй самый хардкорный момент моей работы, ибо я разинул рот на огромнейшее количество почтовиков, и хорошо с этим справляюсь. Далее перечисление тех, какие я поддерживаю и как тестирую.
— Outlook 2000
— Outlook 2002
— Outlook 2003
— Outlook 2007
— Outlook 2010
— Outlook 2011
— Outlook 2013
— Thunderbird Latest
— Yahoo! mail
— Яндекс почта
— Mail.ru почта
— Рамблер почта
— 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
— Закрытый репозиторий на гитхабе
— Pastebin для шаринга исходного кода письма
— JSFiddle для «живого» шаринга
Согласитесь, меня трудно назвать «каким то там спамером» и вообще чуваком, который делает плохие вещи. Мне правда интересно воевать с подобным зоопарком, развивая свою методику верстки, о которой я в итоге рассказываю здесь.
К мобильным виндузятникам есть ряд вопросов. Какие почтовые клиенты вы используете windows смартфонах? Какие нюансы вы можете рассказать? Разрешения экранов, особенности тех или иных моделей телефонов? Какие стоит приобрести для тестирования? Думаю купить 1-2 телефона для этих нужд.
Прежде всего пройдемся по посту Lee Munroe
Список инструментов автора:
Sketch — вопросов не вызывает. Я предпочитаю Moqups.com, хотя Sketch тоже неплох.
Sublime — исключительно дело вкуса. В моем случае это Notepad++ на винде и Brackets на OSX
Grunt & SCSS — крайне сильная форма извращения, которая просто немыслима для подготовки писем. Более того, итоговый код письма автора очень монструозен, при этом обладает совсем ограниченной поддержкой почтовых клиентов
Handlebars — ок. Я работаю на чистом php либо использую liquid for designers в одном из внутренних проектов
GitHub — ок
Mailgun — Не мудрено. Продукт компании, в которой работает сам автор. Мне ближе mandrillapp и sendgrid.
Litmus — В чем-то мы сошлись.
Дальше о моей колокольне.
Мои девайсы
— Ноутбук с Windows
— MacBook Pro
— iPod пятого поколения (retina)
— iPad mini (retina)
— Sony XPeria Z
— Nokia X
Разработка триггерных стратегий
Составляю блок схемы на Coggle. Простой и понятный инструмент. Единственный минус — не дает делать зацикленные схемы. Но это некритичный недостаток для меня.
Прототипирование
Lee пишет о том, что не пытается при создании прототипа добиться пиксель перфекта, мотивируя это тем, что все равно почтовики на выходе не дадут исходной точности относительно макета. Я скажу, что это чушь. 90% почтовиков дадут идеальный результат в четко задуманном виде, если к этому подойти серьезно. Из возможных будущих отклонений предвидится только несоответствия выравнивания right элементов, и вертикальное соответствие модульной сетке. progressive enchantment.
Отрисовка
Для пижонства и наглядности имеет смысл использовать готовые интерфейсы. Gmail и iPhone.
Для отрисовки макетов используется Photoshop. Версия не критична. На винде у меня до сих пор стоит CS3, на маке я поставил СС версию. При отрисовке макетов я стараюсь придерживаться золотого правила: «Все кроме логотипа, иконок и фотографий должно быть сверстано, а не реализовано картинками». Это благоприятно сказывается на «весе» письма, простоте его верстки и в целом письмо получается приятным. Хотя из каждого случая есть исключения. Многие письма от мобильных игр, например, состоят преимущественно из графики. Но о таких нюансах я расскажу не сегодня.
Редакторы кода
Как я уже писал выше, на винде для верстки я использую Notepad++ с темой Zenburn. От белой вываливаются глаза. На маке редактор Brackets c темой Brackets Dark. В обоих редакторах используется шрифт Consolas 13px.
Если взять отступление о редакторах, то с ними у меня на самом деле все сложно.
Я начинал работать с Dreamweaver 4 версии, когда он еще принадлежал компании Macromedia. На тот момент это был идеальный крутой редактор. Шли годы, владельцем стала компания Adobe, но проект все равно развивался стремно. В основном к нему прикручивали всевозможные свистелки и перделки для непрограммистов, а для написания кода фич практически не добавлялось. Автокомплит был шикарен еще в 4 версии, а темной color схемы вроде как до сих пор еще не прикрутили. А если и прикрутили, то поздно уже. Не надо.
Sublime хорош прокруткой текста по миникарте и обилием плагинов. Без карты я как нибудь обойдусь, плагины для меня не сильно критичны, а вот вкладки я не могу себе позволить по религиозным соображениям. Субъективно отвратительные.
Так я пришел NPP для Windows, так на нем и остался. Отсутствие менеджера файлов меня не напрягает, ибо проводник достаточно удобен. Опять же субъективно.
На маке выбор не велик. Я попробовал WebStorm, но он начал падать на макетах over 500 строк. Не то, чтобы прямо падать, но форматирование начинало взбешиваться, табы инвертировались(лесенка шла в другую сторону). Проблема наблюдалась при копипасте больших участков кода. Ну я и бросил это дело.
Так я добрался до Brackets. Устраивает абсолютно все. Единственный минус — не работает с файлами в 1251 кодировке. А у меня осталась пара многолетних проектов на старом битриксе. От сюда и конфуз.
Верстка
Использоваение заготовок это хорошо. У Lee это, как о сам пишет, very simple email template. Я поперхнулся от такой простоты. Я понимаю, что у каждого свой велосипед, но стоит посмотреть сколько клиентов поддерживает Lee, можно гордо вдарив пяткой в грудь сказать, у меня лучше.
Я не использую CSS инлайнеров, SCSS и грунтовку. Только чистый инлайновый код сразу. Кто-то скажет, что такой код сложно поддерживать, а я скажу — нифига. Find & Replace — мой лучший друг, если необходимо провести глобальные изменения. Структура всех блоков очень похожа, поэтому берется заготовка, верстается пара блоков, а дальше — copy/paste. И никаких хипстерских штук.
Тем не менее я использую вынесенные стили для хаков Outlook, media_queries и оформления обшего wrapper'а для письма.
Шаблонизация
Для шаблонизации используется liquid for designers либо чистый php. Применяется по большому счету для вывода однотипного контента в шаблоне письма — например выкладка товаров магазина. Так же юзается для простановки UTM меток для ссылок и манипуляций с математикой.
Тестирование
Это, пожалуй самый хардкорный момент моей работы, ибо я разинул рот на огромнейшее количество почтовиков, и хорошо с этим справляюсь. Далее перечисление тех, какие я поддерживаю и как тестирую.
Litmus
— Outlook 2000
— Outlook 2002
— Outlook 2003
— Outlook 2007
— Outlook 2010
— Outlook 2011
— Outlook 2013
— Thunderbird Latest
— Yahoo! mail
В браузерах ручками
— Яндекс почта
— Mail.ru почта
— Рамблер почта
— Outlook.com
— Gmail
Windows ручками
— The Bat!
— PostBox
OSX ручками
— Sparrow
— AirMail
— MailBox
— PostBox
— Mail App
iOS ручками
— Mail App
— Gmail App
— Mailbox App
— Sparrow App
Android ручками
— Mail App
— Gmail App
— Mailbox App
Шаринг и хранение исходников
— Закрытый репозиторий на гитхабе
— Pastebin для шаринга исходного кода письма
— JSFiddle для «живого» шаринга
Есть куда расти
Согласитесь, меня трудно назвать «каким то там спамером» и вообще чуваком, который делает плохие вещи. Мне правда интересно воевать с подобным зоопарком, развивая свою методику верстки, о которой я в итоге рассказываю здесь.
К мобильным виндузятникам есть ряд вопросов. Какие почтовые клиенты вы используете windows смартфонах? Какие нюансы вы можете рассказать? Разрешения экранов, особенности тех или иных моделей телефонов? Какие стоит приобрести для тестирования? Думаю купить 1-2 телефона для этих нужд.
