Workspace для розробки листів

Тема навіяна постом Lee Munroe, який висвітлювався в дайджесті на хабре. Я просто не зміг пройти повз нього. Тому далі я розповім про своє workspace для розробки листів.

Насамперед пройдемося по посаді 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 телефону для цих потреб.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.