Зазвичай виділяють 2 типи редакторів для створення емейл-повідомлень: редактор коду і блоковий редактор. Це пов’язано, на мій погляд, з двома причинами:
- не будь-який код може бути адаптований під внутрішнє верстання блокового редактора;
- якщо дати волю користувачеві робити більше дозволеного редактором, то він неодмінно все поламає, а винна як завжди буде система і відгрібати буде служба підтримки.
АЛЕ, ці причини все технічного характеру, а не призначеного для користувача. При цьому дуже часто виникає бажання трохи змінити створений код або вставити свій «сніппет».
Цікаве спостереження за верстальниками листів в eSputnik: розробники листів відкривають інспектор коду, міняють його там і відразу ж дивляться на результат оскільки це дуже зручно. Інспектор коду дає можливість писати безпечний HTML закриваючи усі незакриті теги і тому подібне. Але головне — швидкий результат. Будь-яка зміна в листі веде до зміни в коді і навпаки. Ще один класний плюс використання інспектора коду — він сфокусований тільки на виділеному елементі швидко знаходячи той фрагмент коду, який треба.
Поряд з підсвічуванням синтаксису саме ці 3 особливості і лягли в основу нашого редактора:
- редагувати тільки ділянку коду, над яким працюємо;
- швидко застосовувати зміни в обох напрямах;
- забезпечити безпеку введеного коду закриваючи теги.
Визначити виділений код дуже легко. Я вже писав, що у нас є ієрархія контенту в листі: смуга, структура, контейнер, блок і елементарний елемент. Виділивши відповідний фрагмент в редакторові коду показується тільки виділений код і це не дає, з одного боку, поміняти зовнішній код, а з іншого, фокусуватися на потрібному фрагменті коду.
Є ще один принцип який варто описати окремо: ми вирішили відмовитися від спливаючих вікон. Це тема окремого поста. Зокрема цей принцип дозволяє легко міняти HTML і стежити за змінами.
Трохи про стилі
У листах все ще не можна в повному об’ємі використати зовнішні стилі перераховані в head або body style. Рекомендується деякі стилі вставляти до інлайну елементів. Але у момент редагування добре б користуватися загальними стилями і мати можливість сказати що у футері листа, наприклад, усі посилання мають бути непідкресленими.
Крім того, в тілі листа CSS стилі і код фрагмента знаходяться в різних частинах.
Тому ми виділили стилі в окремий таб редактора (в принципі як і в інспекторові коду Chrome). Тобто просунутий користувач може його дописувати і перевизначати як хоче, додавати media селектори і власні особливості. А у момент експорту листа ми запускаємо інлайнер, який вставляє CSS як годиться. Звичайний користувач може міняти усі стилі за допомогою блоку управління: оформляти і зберігати різні теми листів у рамках проекту. Про це теж окремий буде пост.
Власна розмітка коду
Можна просто відредагувати будь-який блок так, як вважає потрібним фахівець, і зберегти його у бібліотеку для подальшого використання. Більше того, можна узяти і завантажити туди взагалі довільний HTML і CSS. У такому разі від усього блокового редактора будуть доступні тільки редактор картинок і посилань. Тому що цi звичайні стандартні елементи листа не вимагають спеціальної розмітки.
В той же час є такі блоки, як, наприклад, меню, або контейнер, які мають спеціальні службові стилі і дають можливість зрозуміти, що це за блок. Під час редагування ми стежимо, щоб вони не були порушені. Але така функціональність дозволяє настроювати чужі шаблони під особливості редактора Stripo. Наприклад, помітити якийсь блок як контейнер і він набуде усіх необхідних властивостей і туди можна буде вже додавати інші блоки. Як настроювати шаблон я опишу в одному з окремих постів. Також, я хотів би зробити окремий «візард» по адаптації довільного HTML до редактора eSputnik. Але це не пріоритет найближчого місяця, тому про це доки не пишу.
У планах обов’язково написати мануал по підготовці довільного HTML по Stripo. Його так бракує у багатьох систем. Ось, наприклад, у Mailchimp є рекомендації як користуватися mc:edit і це дозволяє нам під час експорту до Mailchimp вставляти в потрібні місця ці атрибути і отримати можливість редагувати текст в Mailchimp не в коді, а в інтерфейсі.
Фідбек від розробника
Нещодавно нам написав розробник однієї європейської студії дизайну листів з Європи. Ми розговорилися, зідзвонились щоб розповісти про плани і отримати фідбек детальніше. Я запитав чи бачив він редактор, а він сказав, що перше на що він подивився — це як можна міняти HTML, і після цього вже з великою уважністю продовжив знайомство, тому що зручніше він не користувався. Приємно, хай йому біс. Хоча критику я теж люблю. Тож не соромтеся.
1 коментарів