По-справжньому адаптивні листи. Частина друга. Фреймворк


Картинка для привернення уваги чесно сперта у invisionapp (до речі, у них божественна розсилка)

З моменту публікації останнього посту минуло ні багато ні мало, півтора місяця, але на те були причини. Сила-силенна роботи і маревні думки задрота-верстальника. Спочатку я збирався просто перейняти прийоми Ніколь Мерлін для верстки листів собі, але потім «хіпстерске» голова подумала: А чому б не зафігачити цілий фреймворк? Гучне слово для моєї вироби, але мені приємно його так називати. Почнемо з простого.

Демо тут

— Навіщо?
Навіщо нам ще один велосипед? Все просто. Самим класним інструментом для верстки листів на сьогоднішній день є Zurb ink, наскільки мені відомо. Але у нього є один фатальний недолік. Він не підтримує адаптивність для поштових клієнтів, які не підтримують медиазапросы. Тому було вирішено писати інструмент на основі моїх і Ніколь напрацювань. До речі Ніколь була приємно здивована перекладу її статті на хабре і просила передати подяку Elusive_Dream, що я і зробив особисто.

Для кого
Інструмент призначений для верстальників з хорошими знаннями як сучасного, так і копалин HTML і CSS. Код досить чистий і приємний для роботи. Рядовий маркетолог, мабуть, не зможе на основі мого коду зібрати осудна лист. Я поділився своїм кодом з російської email-тусовкою на фейсбуці і ідею прийняли тепло, але миттю запропонували зробити з фреймворку drag'n'drop редактор. Я категорично проти цього, бо всі ці редактори вкрай обмежені і кастровані у своїх можливостях. У поточному ж вигляді ми отримуємо безмежний простір для роботи, а головне — дуже швидкий процес створення листів і дуже зручну підтримку коду.

Підтримка поштових клієнтів
— 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) на жаль нині выпилен з Apple Store
— Airmail (OSX)
— Apple Mail (OSX, iOS)
— Mailbox (OSX, iOS, android)
— Spark (iOS)

Що нам знадобиться
Далі наведено мій збочений варіант. Ви можете спростити його на свій розсуд.

— Будь-який текстовий редактор. У моєму випадку це Atom на маці.
— Проплачений Litmus обліковий запис, який я використовую тільки для тестування всіх версій outlook, що дозволяє мені не використовувати windows для тестування листів.
— iPhone. Хоча я задовольняюся Айподом шостого покоління, на якому встановлено 11 поштових клієнтів, і мені цього вистачає.
— Nokia Lumia для тестування листів в виндовом аутлуке.
— Nokia X2 для тестування Android Mail, Yandex і Outlook клієнтів. Цього в принципі достатньо для тестування андроїда, але періодично я поглядаю на результат роботи клієнтів на android 4.2. Lollipop смартфон я поки ще не придбав.
Інлайнер для перенесення стилів head в інлайн перед викатом верстки на продакшен
— Безкоштовний акаунт mailchimp для швидкого тестування листів на живих пристроях

Обкатка
За останній місяць я обкатав свій код більше, ніж на сотні листів та в цілому задоволений результатом. Фреймворк піддався множинним екзекуціям у вигляді рефакторінгу на користь поліпшення читабельності коду і його працездатності в листах. Для тих, кому затія з розвитком цієї штуки здасться цікавою, ласкаво просимо в issues на гитхаб. Також можу запропонувати знайти мене на фейсбуці з однойменною на хабре нікнеймом. Там моя стрічка засмічується тематикою переважно листів. Будь-які питання щодо розробки листів ви можете задати мені тут в коментарях, на фейсбуці або поштою, яка вказана у вашому профілі на хабре.

у планах
— Рефакторинг, рефакторинг, рефакторинг
— Додавання збирача, який буде автоматично збирати наші листи з різних файлів і автоматом инлайнить CSS
— Написання документації. Придивляюся до SourceJS.
— Додавання всіляких фрагментів і шаблонів. Наприклад викладка товарів інтернет-магазинів і інші поширені в роботі елементи.

Що є з приємностей
— Мінімалістичний PSD шаблон інтерфейсу Gmail для зручного відтворення макетів листів
— Набір соціальних іконок від socicon
— Шаблони ремаркетинговых текстів для роздрібних інтернет-магазинів

Все це можна знайти на репозиторії на Гітхабі.

З останніх перемог
— Подружил працездатність outlook з підтримкою ретина дисплеїв
— Зробив цілком клікабельні кнопки(а не тільки текст) без використання картинок
— Домігся адекватної поведінки многоколоночных елементів на мобільниках

P. S. Не сильно пізнавальний пост, але цілком собі цікавий анонс. Як тільки у мене буде дійсно осмислений для туториала матеріал на руках, я обов'язково напишу. Стэй тюнд.

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

0 коментарів

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