timer ~ 5 хв читати
35864 перегляди
оцінити
31 серпня 2017

Редагування HTML і CSS коду у візуальному блоковому редакторові Stripo.email

Stripo / Blog / Редагування HTML і CSS коду у візуальному блоковому редакторові Stripo.email

Зазвичай виділяють 2 типи редакторів для створення емейл-повідомлень: редактор коду і блоковий редактор. Це пов’язано, на мій погляд, з двома причинами:

  • не будь-який код може бути адаптований під внутрішнє верстання блокового редактора;
  • якщо дати волю користувачеві робити більше дозволеного редактором, то він неодмінно все поламає, а винна як завжди буде система і відгрібати буде служба підтримки.

АЛЕ, ці причини все технічного характеру, а не призначеного для користувача. При цьому дуже часто виникає бажання трохи змінити створений код або вставити свій «сніппет».

Цікаве спостереження за верстальниками листів в eSputnik: розробники листів відкривають інспектор коду, міняють його там і відразу ж дивляться на результат оскільки це дуже зручно. Інспектор коду дає можливість писати безпечний HTML закриваючи усі незакриті теги і тому подібне. Але головне — швидкий результат. Будь-яка зміна в листі веде до зміни в коді і навпаки. Ще один класний плюс використання інспектора коду — він сфокусований тільки на виділеному елементі швидко знаходячи той фрагмент коду, який треба.

Поряд з підсвічуванням синтаксису саме ці 3 особливості і лягли в основу нашого редактора:

  1. редагувати тільки ділянку коду, над яким працюємо;
  2. швидко застосовувати зміни в обох напрямах;
  3. забезпечити безпеку введеного коду закриваючи теги.

Визначити виділений код дуже легко. Я вже писав, що у нас є ієрархія контенту в листі: смуга, структура, контейнер, блок і елементарний елемент. Виділивши відповідний фрагмент в редакторові коду показується тільки виділений код і це не дає, з одного боку, поміняти зовнішній код, а з іншого, фокусуватися на потрібному фрагменті коду.

Є ще один принцип який варто описати окремо: ми вирішили відмовитися від спливаючих вікон. Це тема окремого поста. Зокрема цей принцип дозволяє легко міняти HTML і стежити за змінами.

Трохи про стилі

У листах все ще не можна в повному об’ємі використати зовнішні стилі перераховані в head або body style. Рекомендується деякі стилі вставляти до інлайну елементів. Але у момент редагування добре б користуватися загальними стилями і мати можливість сказати що у футері листа, наприклад, усі посилання мають бути непідкресленими.

Крім того, в тілі листа CSS стилі і код фрагмента знаходяться в різних частинах.

Тому ми виділили стилі в окремий таб редактора (в принципі як і в інспекторові коду Chrome). Тобто просунутий користувач може його дописувати і перевизначати як хоче, додавати media селектори і власні особливості. А у момент експорту листа ми запускаємо інлайнер, який вставляє CSS як годиться. Звичайний користувач може міняти усі стилі за допомогою блоку управління: оформляти і зберігати різні теми листів у рамках проекту. Про це теж окремий буде пост.

Власна розмітка коду

Можна просто відредагувати будь-який блок так, як вважає потрібним фахівець, і зберегти його у бібліотеку для подальшого використання. Більше того, можна узяти і завантажити туди взагалі довільний HTML і CSS. У такому разі від усього блокового редактора будуть доступні тільки редактор картинок і посилань. Тому що цi звичайні стандартні елементи листа не вимагають спеціальної розмітки.

В той же час є такі блоки, як, наприклад, меню, або контейнер, які мають спеціальні службові стилі і дають можливість зрозуміти, що це за блок. Під час редагування ми стежимо, щоб вони не були порушені. Але така функціональність дозволяє настроювати чужі шаблони під особливості редактора Stripo. Наприклад, помітити якийсь блок як контейнер і він набуде усіх необхідних властивостей і туди можна буде вже додавати інші блоки. Як настроювати шаблон я опишу в одному з окремих постів. Також, я хотів би зробити окремий «візард» по адаптації довільного HTML до редактора eSputnik. Але це не пріоритет найближчого місяця, тому про це доки не пишу.

У планах обов’язково написати мануал по підготовці довільного HTML по Stripo. Його так бракує у багатьох систем. Ось, наприклад, у Mailchimp є рекомендації як користуватися mc:edit і це дозволяє нам під час експорту до Mailchimp вставляти в потрібні місця ці атрибути і отримати можливість редагувати текст в Mailchimp не в коді, а в інтерфейсі.

Фідбек від розробника

Нещодавно нам написав розробник однієї європейської студії дизайну листів з Європи. Ми розговорилися, зідзвонились щоб розповісти про плани і отримати фідбек детальніше. Я запитав чи бачив він редактор, а він сказав, що перше на що він подивився — це як можна міняти HTML, і після цього вже з великою уважністю продовжив знайомство, тому що зручніше він не користувався. Приємно, хай йому біс. Хоча критику я теж люблю. Тож не соромтеся.

Вас також може зацікавити

Попередні статті Наступні статті
banner9
06 червня · 15 хв читати
ТОП-10 email-редакторів 2022 року

Усі конструктори email-шаблонів вам здаються однаковими? І ви вагаєтесь із вибором найкращого інструменту для своїх кампаній, чи не так? Не дивно, адже цих інструментів дуже багато. Тож давайте зробимо огляд найпопулярніших конструкторів, аби виділити їхні відмінності й допомогти вам у пошуку ідеального HTML-редактора шаблонів для ваших поточних потреб. Я спробую створити однакові шаблони з ідентичними медіа-файлами у кожному редакторі, щоб побачити, чим відрізняються ці інструменти. Найкращі конструктори email-шаблонів Для нашого огляду ми обрали такі редактори: Stripo, HubSpot, Campaign Monitor, AWeber,...

Дизайн Маркетинг Шаблон
best-fonts-for-email-cover-image-stripo
24 травня · 18 хв читати
Найкращі шрифти для розсилок: поради та хитрощі

Одна з найсерйозніших проблем під час створення електронних листів — правильно вибрати шрифт. Вага, висота, ширина, колір, форма, інтервал... Чи справді тут все має значення? Так, важливим є все, але найголовніша умова — вибрати читабельний шрифт. У цій статті ми розповімо, як вибрати найкращий професійний шрифт для розсилки. Створюйте елегантні листи за допомогою Stripo в найкоротші терміни, використовуючи наші готові шаблони Ознайомитися   Шрифти HTML-листів: основні правила, яких треба дотримуватися Вибираючи оптимальний шрифт, слід враховувати три базових правила: 1. Не...

Дизайн Маркетинг
Greatest Examples of GIF animations in Emails_Cover Image
27 жовтня 2021 · 10 хв читати
16 найкращих прикладів GIF-анімацій у розсилках

GIF-анімації в електронних листах стануть у великій нагоді, якщо ви бажаєте продемонструвати свою продукцію, привернути увагу користувачів до певних елементів листа або просто трохи прикрасити свій текст. У цій статті ми підготували для вас добірку найкращих прикладів таких анімацій. Приклади GIF-анімацій в email-розсилках Отже, ось наша компіляція найбільш вдалих прикладів використання GIF-файлів у листах. У кожному з них гіфка виконує свою місію. 1. Adidas (Джерело: лист від Adidas) Adidas застосували в листі анімацію, щоб показати доступні кольорові версії товару. Виглядає...

Дизайн Маркетинг
08 квітня 2021 · 17 хв читати
Дизайн підпису в листах: 14 найкращих прикладів

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

Дизайн Маркетинг Шаблон
Будьте завжди в курсі останніх новин у сфері email-маркетингу