Год использования Figma. Опыт ExpertSender

До перехода на Figma мы пользовались Photoshop и продолжали бы им пользоваться, потому что потребности в изменениях не было. Но в прошлом году наша команда решила попробовать себя в разработке приложения. Мы поняли, что нам нужен инструмент, позволяющий настроить лёгкий и быстрый доступ к макетам для команды, которая будет работать над проектом, и решили попробовать Figma.

Как начать работу

Никаких сложных этапов скачивания программ, согласования договора или чего-то подобного нет. Нужно просто зайти на сайт и зарегистрироваться. 

Figma — это онлайн-сервис, работает в браузере, но ещё есть десктопная версия — для работы в ней нужно авторизоваться и иметь постоянное интернет-подключение. Мы привыкли к десктопной версии, но существенной разницы между ними не обнаружили.

Даниил Луконин

ведущий веб дизайнер ExpertSender

«С первого дня разработки и взаимодействия с Figma я понял, что так выглядит любовь.»

Какими инструментами мы пользуемся

Auto Layout

Он удобен тем, что можно задать базовые правила на начальном этапе дизайна, а остальные страницы собирать, как в конструкторе.

Например, чтобы раньше изменить слово в заголовке, который есть на всех страницах сайта, нужно было пройтись по всем макетам и везде поправить это слово вручную. Сейчас его нужно изменить только в одном месте — на всех остальных страницах оно изменяется само.

Плагины

Ещё один удобный инструмент. Библиотека плагинов постоянно пополняется, есть масса очень нужных дополнений. Например, плагин Material Design. Там 1000+ готовых компонентов пользовательского интерфейса и много шаблонов приложений. А плагин Unsplash ускоряет работу, когда в макет нужно вставить стоковую картинку.

Прототипы

Знаю, что прототипы были уже давно, но я никогда не использовал Sketch, для меня это было что-то уровня «Космос». Сейчас я могу показать все переходы, соединить все страницы в почти готовую страницу сайта.

Sketch — векторный графический редактор для macOS, который используется для проектирования интерфейсов мобильных приложений и веб-сайтов.


Плюс есть такая штука, как Figma Mirror. С её помощью можно открыть свой макет через приложение на телефоне и смотреть адаптацию своих макетов/переходы/клики и протестировать удобство. В общем, довольны все: дизайнеры/верстальщики/менеджеры.

Figma Mirror — это веб приложение Figma, которое просто отображает текущий выбранный фрейм.


Библиотека стилей и компоненты

Теперь у нас в макете не бывает трёх кнопок разного размера или шестнадцати размеров шрифтов. Мы создаем одну библиотеку стилей, утверждаем с постановщиком задачи шрифты, кнопки, цвета и пользуемся только этими ограниченными стилями. Это помогает, когда в подвале (нижняя часть сайта) на пятнадцати страницах нужно поменять одно слово. В Photoshop это заняло бы три года и девять месяцев, а в Figma — две минуты.

Дополнительные инструменты

Они тоже на высоте. Например, если нужно быстро отрисовать что-то простое, это можно сделать с помощью пера, которое в Photoshop было реализовано отвратительно – а в Figma взял и сделал.

Export

Эта штука сильно упрощает жизнь и мне, и верстальщикам. Экспорт любого объекта займёт 3 секунды, будь то группа (объединяет несколько элементов вместе), фрейм (аналог холстов из привычных графических редакторов) или отдельный элемент. Экспортировать можно в форматах PNG, SVG, JPG и PDF.

Чем хороша Figma

Работа в online

В Figma можно работать онлайн и в браузере, и в десктопной версии. Теперь я могу хвастаться макетами даже с телефона где угодно. Главное, чтобы был доступ в интернет. А ещё не нужно постоянно жать Shift+S и боятся, что что-то не сохранится, если компьютер отключится. 

Но вот работать без интернета не получится. Если задачи горят, а мобильный трафик закончился, нужно искать решение: коворкинг, кофейня в соседнем доме или танцы с бубном.

Взаимодействие с командой

Можно обсуждать вопросы прямо на месте через комментарии.

Ещё один из огромных плюсов: в проекте одновременно может работать вся команда. Это удобно, когда нужно вносить правки в ходе созвона в Skype, например. Особенно актуально, когда за окном коронавирус и половина команды работает на удалёнке.

Правки в режиме реального времени

Одновременно с двух компьютеров с менеджером проекта можно вносить правки онлайн.

И это суперудобно — не нужно проводить митинги или ждать, пока менеджер внесёт правки, чтобы продолжать работу.

Лёгкость передачи макета

В случае, когда у  кого-то из дизайнеров горят сроки, тот может скопировать себе основной проект и продолжить в нём работу. Другую версию в это время проверяет менеджер или верстальщик — все довольны.

Работа с SVG

Можно вносить правки в векторные элементы и сохранять SVG-код из внешнего источника, как векторный слой прямо в редактор. Такая простота редактирования и перехода с других программ очень облегчает работу.

Права доступа

Права можно давать на просмотр и редактирование. Это удобно, если менеджеру нужно показать вариант, но не хочется, чтобы он всё сломал занимался творчеством вместо дизайнера. То есть шанс открыть макет и увидеть новые блоки сведён к нулю. Но всё бывает…

Пример из жизни: Мы дали доступы редактирования макета дизайнерам клиента, чтобы они “просто посмотрели”. Проект уже верстался и к концу они показали нам блок, которого не было предусмотрено, но он появился. Спорить с клиентом мы не стали, но и доступы теперь не раздаем.

Что изменилось с внедрением Figma

Мы не жалеем о переходе на Figma, потому что она улучшает и облегчает взаимодействие в команде, решает проблемы хранения и передачи макетов верстальщикам и разработчикам, так как хранит всё в облаке. А ещё не дает превратить жизнь дизайнеров в сплошные правки внутри самой Figma благодаря библиотеке компонентов и плагинам.

Продолжаем освоение Figma, и если у вас есть совет, что нам точно стоит попробовать, напишите!

Как создать письмо, если не умеешь?

Привет, меня зовут Наташа, я контент-менеджер ExpertSender, и я никогда сама не создавала письма для рассылки наших новостей. Мне всегда помогали несколько дизайнеров и пара верстальщиков: одни дизайнили классные письма, а другие всю эту красоту верстали.
Я же вставляла нужную информацию в HTML-код и радовалась, когда ничего не ломала. Когда ломала, в курином отчаянии бежала к верстальщикам с криками: «Что делать-то?!», но это уже другая история.

Недавно с ребятами из креативного отдела мы решили провести эксперимент и посмотреть, что быстрее: поставить задачу дизайнерам на отрисовку макета, а потом верстальщикам на его вёрстку, или заставить меня сделать письмо самостоятельно.

Что было в начале

Задача собрать письмо — 1 штуку.

Человек с весьма средними знаниями HTML — 1 штука.

Время — желательно быстрее, потому что письмо нужно отправить вчера.

Ход эксперимента

На первом шаге создания сообщения у меня был выбор, как я буду его создавать: в обычном редакторе (тот самый HTML) или в блочном.

В ExpertSender блочный редактор — интуитивно понятный и совсем не требует знаний HTML. Этот вариант мне подошёл.

Вот тут я нажала на кнопку «Блочный редактор».

В окне редактора первым делом я выбрала элемент «Блок по ширине», все остальные элементы я переносила в него.

Первым таким элементом был «Контейнер». Важно его добавлять, потому что потом его удобно использовать как составной элемент: чтобы в следующий раз не создавать новое письмо с нуля или не копировать старое и удалять в нём лишние элементы. 

Добавила элемент «Текст». В нём я предупредила, что письмо можно открыть в браузере, если вдруг настройки почтового клиента не разрешают отображение картинок.

Ссылку в текст можно вставить, если нажать вот на этот значок:

Протокол я выбрала «Другой», потому что вставила системную ссылку для открытия письма в браузере. Если бы это была ссылка, которая вела на сайт или лендинговую страницу, то протокол был бы «https».

После этого мне нужно было добавить логотип. Чтобы его добавить, я перетянула в рабочее поле элемент «Картинка».

А потом увеличила у логотипа отступ снизу, добавила элемент «Столбец» и перенесла в него элемент «Картинка». Две штуки. Вот так:

После этого вставила ссылки на курсы в обе картинки.

Когда пришло время для текстовой части, я перетянула в рабочую область элемент «Текст», увеличила интервал между ним и блоком с картинками выше, выбрала нужный шрифт и его размер, а ещё указала нужный отступ между строками.

После этого я решила вставить кнопку, по которой можно перейти на сайт Digital University и прочитать о курсах подробнее.

А потом добавила ссылку и изменила цвет, текст и шрифт кнопки.

После кнопки я приступила к оформлению подвала сообщения. Чтобы расположить логотип Digital University и контакты рядом, я использовала элемент «Столбец». По умолчанию столбцов два, их мне достаточно. Но если вам захочется больше, то ничто не сможет вам помешать.

В один из столбцов я добавила картинку и текст под ней.

В другой только текст.

Цвет текста вы можете менять на тот, который вам нравится. Для этого нужно выделить его, нажать на кнопку «Цвет текста» и выбрать понравившийся из предложенных.

Если нужного не оказалось, нажмите на «Ещё цвета» и в поле ввода укажите его номер. 

Дальше я выбрала элемент «Столбец» и перенесла в один «Текст», а в другой — элементы «Картинка» и «Текст». Они мне были нужны, чтобы добавить курсы «Цифровой маркетинг» и «CRM-маркетинг» и ссылку на Facebook.

Внизу письма добавила строку с причиной получения и ссылкой отписки.

Какие результаты

На такую задачу дизайнеру и верстальщикам, в среднем, требуется от часа до нескольких дней (в зависимости от нагрузки).

Я потратила 45 минут. В эти 45 минут входило время на скрины и «налью чашку кофе и вернусь». Над письмом, в котором больше информации, наверняка придётся посидеть подольше.


Собирать письмо в блочном редакторе — вариант менее ресурсозатратный, чем постановка задач дизйнерам и верстальщикам. И тем более он удобен и незаменим, если верстальщиков, которые могли бы помочь, вообще нет.

Как тестировать вёрстку писем

Тестирование вёрстки — обязательный этап при создании письма. Мы должны убедиться, что письмо выглядит так, как задумывалось, во всех почтовиках и на всех устройствах. Отдать клиенту криво свёрстанное письмо — это не только стыдоба, но и ущерб репутации и вероятные финансовые потери. Никому не понравится плохая работа. Поэтому — ТЕСТИМ!

Перед тем как начать тестировать вёрстку, нужно быть уверенным в том, что наш код валидный и не содержит незакрытых тегов, ведь это может быть причиной поломки письма. Для этого мы используем редактор Brackets с расширением HTMLHint, который в случае ошибки сразу сообщит об этом, указав номер строки кода и проблемный тег.

Да, работает неидеально и иногда пропускает ошибки, вроде неправильной последовательности тегов:

<tr><td>
<tr><td>
</td></tr>
</td></tr>

Он считает общее количество открытых и закрытых тегов, не всегда учитывая их последовательность, но когда нас просят проверить письмо, то мы обычно с этого и начинаем, находим незакрытые теги и часть писем именно таким образом и чинится 🙂

После того, как мы убедились в чистоте нашего кода, можно приступить к тестированию. Первым делом мы всегда загружаем письмо в EmailOnAcid —  это сервис, который эмулирует разные почтовые программы на разных устройствах, что позволяет отловить максимальное количество ошибок в отображении на этом этапе.

Сервис платный, как и его прямой конкурент — Litmus, но как-то исторически сложилось, что мы пользуемся EmailOnAcid уже несколько лет. Его функционал и интерфейс на момент выбора показался нам лучше и удобнее, как обстоят дела сейчас, лучше выяснить самому 🙂 Так как эти сервисы эмулируют устройства, то лучше проверить ещё и на реальных, потому что иногда они показывают картину, которая расходится с реальной. И тут наступает 3-й этап тестирования —  «аналоговый». 

Для этого мы загружаем архив с письмом в платформу ExpertSender и отправляем на заранее подготовленный тестовый лист, где есть емейлы с самыми популярными почтовыми провайдерами: mail.ru, yandex.ru, gmail.com, outlook.com. Последний не является популярным, но также считается важным, так как стоит предустановленным почтовиком из пакета MS office. В нём куча своих проблем и интересные способы их решения, но об это мы напишем в другой нашей статье про вёрстку для Outlook`a, но уже сейчас важно знать, что даже если в Outlook 2013 отображается корректно, то в других версиях вполне возможно будут проблемы, и наоборот.

Проверяем как веб-версию всех почтовых провайдеров, так и в мобильном приложении (по возможности проверить на iOS и Android), а в случае с Оutlook —  в приложении для компьютера.

Чек-лист по тестированию верстки:

  • Валидация. Проверяем код на валидность с помощью редактора Brackets с расширением HTMLHint
  • Автоматическое тестирование. Тестируем верстку с помощью специальных сервисов, которые эмулируют работу разных почтовиков: Litmus, Emailonacid.
  • Ручное тестирование. Отправляем сверстанное письмо на тестовых список адресов разных почтовых провайдеров. Проверяем веб и мобильную версии на разных устройствах и в разных почтовиках.

Если всё ок, то письмо можно с чистой совестью и гордостью за проделанную работу отправлять клиентам. 

Однако если при тестировании всплыл какой-то баг, не стоит впадать в панику. Большинство проблем, с которыми ко мне неоднократно обращались клиенты ExpertSender, легко чинятся.

Самые частые проблемы

1. Отступы пропали/некорректно отображаются

Если валидатор не нашёл ошибок, то скорее всего, у вас в коде для отступов используется свойство padding/margin. Они ещё не обрели полную поддержку: padding корректно работает только для тега <td>, а margin неполноценно поддерживается Outlook. Поэтому для горизонтальных отступов мы используем таблицу с выравниванием по центру внутри более крупной таблицы.

Вертикальные отступы создаются при помощи блока с неразрывным пробелом внутри, высота строки которого должна быть равна его высоте, из-за чего он корректно отображается и в Outlook.

<div style="height: 10px ; line-height:10px; font-size:8px;"> </div>

Вот как в итоге всё это выглядит.

2. В Яндекс.Почте или Рамблере мобильный вид работает не так, как на остальных почтовых провайдерах

Скорее всего, у вас адаптация работает при помощи медиа-запросов, а они не поддерживаются на этих почтовых провайдерах. Тут либо переверстать без использования медиа-запросов, либо смириться.

3. С адаптацией все было хорошо, но после добавления картинки/элемента в письмо, она перестала работать.

Вероятно, вы добавили элемент, у которого указана фиксированная ширина. К примеру, в картинке указана ширина 600 пикселей (width=”600”), а у всех остальных элементов ширина указана в процентах. И да, именно из-за одного элемента с фиксированной шириной, всё письмо перестанет адаптироваться. Тут нужно просто изменить ширину на процентную. 

4. В Оutlook картинка в разы больше своих размеров, и всё письмо поломано.

Тут всё просто: скорее всего, исходник картинки у вас, к примеру, 1500 пикселей в ширину, а в коде указана ширина 100% (width=”100%”). Outlook понимает это по своему, он растянет вашу картинку на 100% от ширины исходного файла (то есть на 1500 пикселей), а не на 100% от ширины родительского элемента, как это делают остальные почтовики. Из-за этого таблица, в которой была картинка, растягивается на ширину картинки, и в итоге всё ломается. 

Решений тут может быть несколько.

  • Если это баннер на всю ширину письма, то тут нужно изменить ширину исходного файла на ширину картинки в вашем макете. 
  • Это фотокарточка вашего товара в адаптивном блоке, ширина которого не более 300 пикселей, и вам важно, чтобы качество картинки было двукратным, то можно указать фиксированную ширину. Это и не помешает вашей адаптации, и позволит использовать ретина изображения. 
  • Прописать условие if else для Оutlook.
<!--[if mso]>
	Версия для Оutlook
 <![endif]-->
 <!--[if !mso]> <!---->
	Версия для остальных почтовиков и Outlook 2003 и OSX версии
 <!-- <![endif]-->

Естественно, в версии для Outlook мы указываем, что его ширина будет фиксирована, а для всех остальных —  процентная

<!--[if mso]>
	<img src="img/logo.png" width="600"  alt="" border="0" style="display: block;" />
 <![endif]-->
 <!--[if !mso]> <!---->
	<img src="img/logo.png" width="100%"  alt="" border="0" style="display: block;" />
 <!-- <![endif]-->

5. Вместо текста отображаются странные символы

Это проблемы с кодировкой. Проверьте её в теге <head>, которая прописана в html файле. Там должен быть вот такой meta-тег, с кодировкой UTF-8:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

6. В Gmail обрезается часть письма

Проверьте размер html-файла, если он больше 102кб, то Gmail его будет обрезать. Решением тут станет только оптимизация вашего кода: удаление лишних отступов и таблиц.

Остались вопросы по тестированию или есть баги, с которыми частенько сталкиваетесь? Напишите нам, мы придумаем, как вам помочь 🙂

GIF в емейл-сообщениях

Когда нужно показать продукт с лучшей стороны, помочь клиентам найти кнопку входа в личный кабинет после смены интерфейса сайта или рассказать о новой схеме доставки, а главное —  привлечь внимание к письму, приходят они — GIF-изображения.

Эволюционно сложилось так, что наш мозг активно реагирует на раздражители. Поэтому GIF-изображения — это то, на чём останавливается взгляд, когда вы пролистываете утром «непрочитанные» (Движение! Что это там?). То есть движущаяся картинка —  это отличный способ привлечь внимание пользователей и сделать акцент на том, что вы хотите до них донести.

Как создать GIF-изображение

Что сделать, чтобы получилась GIF-ка, рассказал руководитель отдела вёрстки Валера Селезнёв.

Создавать гиф-файл можно несколькими способами:

1. Конвертировать видео в GIF-изображение. Для этого есть много онлайн-сервисов, например, Ezgif или Giphy. Там можно оптимизировать гифку: уменьшить разрешение, обрезать, уменьшить количество кадров в секунду. Или просто запустить авто-оптимизатор, который немного ухудшит качество гифки, но тем самым уменьшит его исходный размер. 

2. Ещё один способ конвертировать видео в GIF-изображение — через программу для монтажа Adobe Premiere или Adobe Photoshop.

3. Сделать GIF из нескольких фото можно с помощью сервисов Gifius или Toolson.

4. Ещё один вариант: скачать готовые в интернете. Но следите за тем, чтобы их можно было использовать в коммерческих целях.

РАЗМЕСТИ НА СВОЕМ САЙТЕ ИЛИ В ПИСЬМЕ ЧУЖУЮ КАРТИНКУ И ПОЛУЧИ ИСК ДО 5 МИЛЛИОНОВ РУБЛЕЙ!

Что важно помнить

Большинство версий Outlook не поддерживают GIF-изображения, разве что кроме Outlook 2019. Поэтому при открытии письма получатель увидит только первый кадр. Подумайте заранее, чтобы этот кадр отображал всю информацию, о которой вы хотите рассказать.

Или используйте условие if аутлук - то баннер, else гифка
<!--[if mso]>
Outlook content
<![endif]-->
<!--[if !mso]> <!-->
Non-outlook content
<!-- <![endif]-->

Ориентируйтесь на вашу целевую аудиторию при её создании — важно, чтобы изображение было уместно и не вызывало недоумений у получателей письма.

Не используйте анимацию просто так. Она должна быть иллюстрацией к тексту или заменой его части, но не отдельным элементом в письме. Если она ничего в себе не несёт, лучше её не добавлять.

Валера Селезнёв

руководитель отдела вёрстки

«Самая важная штука, на которую стоит обращать внимание — это вес гифки. Ведь она может весить и 4-5 мегабайта, а может и больше. Далеко не у всех на телефонах высокоскоростной интернет, который позволит этой гифке загрузиться при открытии письма. И довольно легко представить себе сценарий, когда подписчик успеет проскролить всё письмо, а гифка в начале письма едва успеет к этому моменту прогрузиться. Соответственно, он даже не увидит нашу красоту. Но и слишком оптимизированная гифка будет выглядеть ужасно. Потому всегда важно соблюдать баланс между качеством и размером — попробуйте изменить цветовое решение или убрать несколько кадров.»

Как отправлять

GIF вставляется в письмо так же, как и изображение любого другого формата — с помощью тега <img>.

Примеры

Нельзя взять и не показать примеры GIF-изображений в статье про GIF-изображения.

Netflix часто отправляет письма с GIF-картинками в своих письмах с премьерами и обзорами — их действительно интересно просто открывать, чтобы посмотреть, что там на этот раз.

Aviasales — иллюстрирует заголовок письма забавной GIF-картинкой.

Такие громкие инфоповоды как «Чёрная пятница» заставляют компании придумывать темы писем и контент особенно тщательно. GIF в самом начале письма точно заставят подписчика остановиться и взглянуть на письмо.

Новогодний бизнес-завтрак — тоже событие, достойное GIF-изображений в сообщениях. У ExpertSender получилась целая цепочка писем, в каждом из которых была разная анимация.

В первом письме танцующие олени рассказали о том, что грядёт бизнес-завтрак.

Во втором пингвины показали дорогу до места проведения.

В третьем письме котики поделились презентациями спикеров и поблагодарили всех клиентов, которые пришли в гости.

А в последнем Скуби-Ду и Шегги прислали фото.

Интернет-магазины часто используют GIF-изображения для привлечения к акциям. Так это делает Wildberries.

А так интернет-магазин Revolve приглашает перейти на сайт и сделать заказ.

PIZZA HUT поздравляет своих подписчиков и предлагает задуть свечку для исполнения желаний! 🙂

Nike в честь дня рождения дарит 25% скидку.

А компания Fundbox поздравляет клиентов с праздниками письмом с простой, но очень милой GIF-анимацией.

Сферам, которые считаются сложными и специфическими, тоже не запрещено использование GIF-изображений. Например, компания ZocDoc отправляет письмо с короткой иллюстрацией того, как легко можно записаться к врачу с помощью приложения.

Многие компании из разных сфер бизнеса не зря используют GIF-анимацию — её не сложно создать, она интересно выглядит, делает письмо живым и привлекает внимание. 

Разве может это не привлечь внимание? 🙂

Согласен

Мы используем файлы cookie для записи информации о сеансе, например, прошлой активности на сайте, чтобы обеспечить лучший сервис, когда посетители возвращаются на наш сайт или настраивают содержимое веб-страницы на основе типа браузера посетителей. Используя веб-сайт, вы выражаете свое согласие с нашей политикой cookie. Вы можете изменить настройки файла cookie в своем веб-браузере.