Как вставлять открытки в письмо. Три принципа GIF-анимации в письмах
В различных, часто используемых нами мессенджерах, мы привыкли обмениваться с друзьями (отвечать им в сообщениях) файлами формата GIF, при этом очень точно и быстро выражая ими своё эмоциональное состояние в данный момент времени. Несомненно, многие пользователи хотели бы знать, как вставить гифку в письмо.
Новый Gmail теперь позволяет нам это сделать при помощи одной из лучших функций. Поможет его удобная боковая панель.
Если вы до сих пор не перешли на новую версию популярного почтового клиента , советуем сделать это как можно быстрее. Скоро все пользователи будут автоматически переведены на её постоянное использование.
Лучше начать тестирование уже прямо сейчас и разобраться с основным функционалом почтового клиента, так как потом всё равно придется это сделать. Привыкать к новому всегда сложно, но в этом случае полезно.
Теперь множество дополнительных инструментов добавляют Gmail больше полезной функциональности. Часть из них портирована со старой версии клиента, часть добавлена на этапе разработки и, с течением времени, тестируются, а потом внедряются все новые и новые дополнения.
КАК ВСТАВИТЬ ГИФКУ В ПИСЬМО
Одним из таких инструментов является «Gfycat: GIFs for Email», который позволяет получателю быстро реагировать на любые сообщения анимированным GIF. Добавить аддон в интерфейс легко.
Нажмите кнопку «+» на боковой панели, после чего запустится фирменный «G Suite Marketplace» (интернет-магазин для веб-приложений от Google). С помощью строки поиска найдите вышеуказанный аддон и установите его.
В будущем вы увидите значок «Gfycat» на боковой панели всякий раз, когда захотите ответить на полученное по электронной почте. Нажмите на него, выберите понравившийся GIF-файл из огромного каталога сервиса создания, открытия и совместного использования GIF и коротких видеороликов и вставьте его в свой ответ.
Обратите внимание, что это работает только для ваших ответов. Вы пока не можете использовать его в своих новых письмах. Спасибо за внимание!
Тестируйте функцию и оставляйте свои отзывы на нашем сайте в форме комментариев. Также ознакомьтесь со множеством других полезных компьютерных советов и инструкций, список которых размещен в .
Емейл-маркетологи всегда работают над улучшениями своих - находят новые способы удивить и заинтересовать своих подписчиков. Одним из таких вау-эффектов считается gif-анимация. Столько уже о ней написано и сказано, но оказалось, что у нас в блоге не было отдельной статьи на эту тему:) Быстро исправляем ситуацию.
Как добавить анимацию в письмо?
Никаких особых знаний и навыков для этого не нужно - точно так же как и обычную картинку. Так это будет выглядеть в редакторе.
Куда сложнее будет выбрать, создать и определиться, а для чего в письме вообще нужна гифка и стоит ли заморачиваться?
Особенности использования gif-анимации в рассылках
Помните о весе. Анимация будет воспроизводиться только после того, как полностью загрузится. Для этого она должна быть лёгкой. Если для обычных картинок допустимый размер 2 МБ, то для gif - 125 -800 кб.
Первый кадр делайте самым информативным. Некоторые операционки и почтовики не показывают анимацию, а останавливаются на первом скрине.
Не пестрите анимашками. Придерживайтесь правила: в одной прокрутке - одна анимация. Бывают исключения, когда это выглядит неплохо, но нужно постараться:
Качество анимации. Любая картинка в плохом качестве вряд ли будет побуждать к покупке, скорее она вызовет противоположные эмоции.
Таймеры. Счётчики лучше не делать gif - не очень приятно, когда до конца акции два часа, даже если ты зайдёшь в письмо через неделю:) Используйте сервисы типа motionmail , которые ведут отсчёт в реальном времени и по окончанию заданного срока таймер обнуляется.
Анимировать можно и текст. Опять же, не переусердствуйте с этим. Пример gif-текста от Розетки заменяет тысячи слов: интрига есть; яркое, но приятное; смотреть интересно и даже забавно.
Не нужно делать анимацию слишком сложной и долгой. Во-первых, это может повлиять на качество анимации. Во-вторых, если это какая-либо инструкция - может показаться, что это слишком сложно для выполнения.
Отдавайте предпочтение не гифкам, созданным из разных картинок, а одной анимации, связанной в одну историю . Если же вам нужно использовать несколько картинок, слабо связанных между собой - добавляйте плавные переходы, чтобы создавался эффект движения.
Зачем использовать gif-ки в письмах?
Если вы заметили, сейчас всё больше брендов добавляют в письма анимацию. Не стоит считать, что после добавления гифки в емейл-рассылки у вас резко взлетят продажи, . Это набирает популярность благодаря тому, что так можно больше внимания привлечь к своему товару\услуге. Три принципа анимации:
#1 Развлечение
Пример рассылки Bonobos. Вряд ли две едва заметные анимированные акулы повысят продажи и ещё меньше вероятность того, что на реальной рубашке они тоже будут двигаться. Зато такая простенькая анимашка делает письмо более живым.
Включить в игру
Правильная анимированная картинка поможет побудить пассивного читателя к действию. Например, можно сыграть на чём-то известном, что не оставит равнодушным большинство ваших подписчиков. Мне понравилась рассылка магазина 220 вольт, которая заставила меня улыбнуться. Ну кто же в детстве не играл на Денди в игру "Охота на уток" или хоть раз слышал о ней? Баннер даже сохраняет пиксельную атмосферу детства:) Помимо ностальгии, эта анимация вызывает желание нажать на кнопку “Старт”
#2 Обучение
Вместо тысячи слов лучше показать как что-то работает наглядно. Чтобы анимация воспринималась легко, постарайтесь уместить её в 10-20 секунд. Как вариант, можно разбивать инструкцию на небольшие этапы. Например, как сделали ПриватБанк - коротенькая демонстрация их приложения, с основными шагами, которые нужно выполнить для оплаты коммунальных услуг.
Посмотрите, теперь оплачивать вашу коммуналку можно быстрее и удобнее. Точно так же можно иллюстрировать любые другие инструкции:
Использование промокода
Оформление заказа в корзине
Технические характеристики какого-нибудь товара
Как установить приложение
Особенности пользования сервисом или сайтом и т.д.
#3 Вовлечение
Это лучший способ разжечь желание читателя воспользоваться вашими услугами, заказать товар.
Заинтересовать товаром
Не знаете что такое биван - тогда загляните в емейл-рассылку к компании MadRobots. Смотрите, как просто воспользоваться надувным диваном и насколько он компактный.
Заменить длинные описания
Что беспокоит каждую девушку? Конечно же её красота. Эйвон на этом и сыграл в письме. Было бы скучно просто написать: скачай приложение и посмотри, как ты можешь легко и просто выбрать себе мейкап, а вот показать в письме как за секунду меняются разные образы - куда круче.
Дополнительный акцент на одном элементе
Ещё помним, что слишком много анимации в одном скрине - это зло? Зато, чтобы привлечь больше внимания к одному из элементов небольшая анимация вполне сгодится. Например, как компания TOPMAN, напоминая о бесплатной доставке. Надпись может меняться, но вращающиеся коробочки из письма в письмо одни и те же.
Общепринятая практика в шапке письма выделять блок с акциями. В интернет-магазине детских товаров Kideria пошли немного дальше и добавили в кнопку с акциями небольшую анимацию в виде солнышка.
Где взять анимацию?
Если вы обращаетесь к дизайнеру, то он наверняка всё сделает в лучшем виде. Если же хочется сделать самостоятельно - есть несколько сайтов, которые упростят вам задачу.
Giphy.com
Много готовых гифок, разбитых на категории. Также можно:
загрузить своё видео и из него получить гифку
создать анимированное слайдшоу
сделать картинку с анимированным текстом
отредактировать существующую гифку
установить дополнение к Google Chrome, чтобы гифки всегда были под рукой
скачать приложение и записывать гифки с экран
Gifs.com
Качество готовых гифок не всегда идеальное, зато можно создавать свои гифки, и эффекты на них, стикеры и т.д.
iLoveIMG
Помогает сжимать анимацию почти в два раза без сильной потери качества.
P.S. Смотрите моё обучающее видео по анимации в письмах и оставляйте комментарии:)
До новой встречи в нашем блоге! ;)
Электронные письма являются удобным средством для общения. Их популярность не спадает и во многом благодаря всевозможным способам написания текста. Например, вы можете добавить в письмо одну или несколько анимационных картинок, чтобы сделать его более красочным и уникальным.
Инструкция
Выберите подходящую анимационную картинку в интернете или создайте ее самостоятельно. Популярным и простым форматом анимационных изображений является GIF. Файлы данного формата не занимают много места и поддерживаются большинством почтовых сервисов и программ. Скачайте понравившийся GIF-файл на компьютер с подходящего сайта, например, Mirgif. Если у вас имеются навыки работы с изображениями, воспользуйтесь одним из специальных сервисов для создания анимационных изображений, к примеру, Gifmaker, который позволяет быстро создать открытку прямо на сайте и сразу скачать на компьютер либо отправить другу.
Зайдите на ваш электронный почтовый ящик под логином и паролем и выберите создание нового сообщения. Прикрепите анимационную картинку в формате GIF, кликнув по соответствующей ссылке на панели инструментов. Если вы хотите добавить изображение с другого сайта, скопируйте соответствующую ссылку или код в текст письма, предварительно перейдя в режим редактирования HTML. Чтобы проверить, как будет выглядеть изображение в письме, попробуйте сначала отправить его самому себе.
Помните, что некоторые почтовые программы и сервисы не поддерживают отправку анимационных изображений. В этом случае получатель сможет увидеть в письме лишь ссылку на картинку, которую он может открыть в отдельной странице браузера. Если вы прикрепляли открытку отдельным файлом, при получении ее нужно будет скачать на компьютер. Лучше не применять данный способ добавления анимации в том случае, если получатель обычно использует для чтения писем мобильный телефон.
Обратите внимание
Некоторые сервисы, например, Google Mail поддерживают отправку анимационных картинок и в других форматах, к примеру, SWF, который позволяет использовать более качественные изображения и добавлять в них по желанию звуковые эффекты.
Электронные письма являются удобным средством для общения. Их популярность не спадает и во многом благодаря всевозможным способам написания текста. Например, вы можете добавить в письмо одну или несколько анимационных картинок, чтобы сделать его более красочным и уникальным.
Инструкция
Файлы данного формата не занимают много места и поддерживаются большинством почтовых сервисов и программ. Скачайте понравившийся GIF-файл на компьютер с подходящего сайта, например, Mirgif. Если у вас имеются навыки работы с изображениями, воспользуйтесь одним из специальных сервисов для создания анимационных изображений, к примеру, Gifmaker, который позволяет быстро создать открытку прямо на сайте и сразу скачать на компьютер либо отправить другу.
GIF (Graphic Interchange Format) – широко распространенный формат, который хорошо отображается почти везде. Что ещё более важно – GIF может быть анимирован и быстрая смена нескольких кадров создаст иллюзию движения.
На заре интернета это был самый популярный способ, чтобы добавить интерактивности на сайт. Со временем его вытеснила flash- и css-анимации, но в сфере email-дизайна gif всё так же популярен, т.к никакие другие виды анимации не дают 100% гарантии отображения на всех клиентах (на самом деле gif тоже не дает такой гарантии, но практика показывает – на большинстве клиентов всё отображается корректно).
Особенности gif
У формата есть несколько особенностей, кроме поддержки анимации. Для простоты разобьем их на плюсы и минусы.
Минусы:
- поддерживает только 256 цветов. Сочные и красивые фотографии потеряют часть своей яркости, если преобразовать их в формат gif.
- итоговый вес анимации может быть большим. Например, если много кадров или файл большой по размеру. Для email-писем это критично, поэтому чаще всего приходится жертвовать качеством ради доставляемости.
Плюсы:
- поддерживает прозрачный слой.
- идеален для изображений с небольшим количеством цветов.
Как и где использовать анимацию
Наше внимание похоже на луч прожектора – мы четко видим то, что нас заинтересовало, а остальное видим как бы размыто. Анимированное изображение по своей сути привлекает очень много внимания, т.к глаз реагирует на движение и взгляд сразу переходит туда.
Смотрите как в магазине befree выделили блок со скидкой. Несмотря на то что там есть заголовок (который больше и ярче анимированного блока), всё равно анимация захватывает внимание на дольше:
Кроме функции акцентирования внимания гифки можно использовать и в других целях:
Как сделать гифку
Есть разные степени сложности гифок. Самый топ – анимирование через Adobe After Effects или Adobe Animate. Но для создания качественной гифки нужно практиковаться не один год. Попроще будет работать с Adobe Photoshop – программа может преобразовать видео в покадровую последовательность и есть возможность редактировать кадры по вашему желанию. Пример создания подобной анимации можно найти .
Ещё один вид анимации – синемаграфия (когда один элемент на картинке двигается, а остальные как бы застыли). И как пример – одна из рассылок Амедиатеки:
Выглядит круто, скажите? Синемаграфия всегда выглядит интересно и необычно, но опять нужен фотошоп и знание его инструментов. Урок по созданию можно посмотреть .
Ну и самый простой способ, который не требует определенных навыков – использование онлайн-сервисов. Например, gifmaker.me или gifius.ru . Загружаете туда последовательность кадров (фотографий), выставляете необходимую скорость и размеры и на выходе получаете анимацию.
Какие проблемы могут возникнуть
Есть почтовые клиенты, которые не поддерживают анимацию: Outlook 2007, 2010 и 2013. Вместо этого они покажут первый кадр. Поэтому следите, чтобы первый кадр у вашей гифки был информативен. Смотрите в статистике кампаний с каких почтовых клиентов читают ваши рассылки – так вы лучше поймете свою аудиторию и сделаете письма более адаптивными.
Если вы используете слишком много анимаций, то подписчики просто перестанут обращать на них внимание либо же вообще потеряют доверие к вам, т.к письмо будет напоминать базар, где из каждого угла пытаются что-то продать и получить хоть немного внимания.
Всегда следите за весом гифки. Если он слишком большой, то велика вероятность, что подписчик её не увидит. Даже если спам-фильтр пропустит её, то почтовый клиент может просто вырезать её из письма. На этот случай выставляйте alt-текст и ссылку на веб-версию.
Пример рассылки, который недавно пришел мне на почту. То, как выглядит это в почтовом клиенте и то, как на самом деле задумывалось письмо. Красивую гифку почтовый клиент просто вырезал, т.к она весила 5Мб (!):
в моем почтовом ящике:
по задумке создателей:
Стоит помнить, что если вы поставили гифку в качестве фона для блока, то она может не отобразиться из-за ограничений со стороны почтового клиента. Поэтому гифку можно поставить, но на всякий случай подстраховаться и также добавить цвет блоку, чтобы можно было прочитать текст.
Что в итоге?
- Используйте гиф-анимацию в письмах – они цепляют и удерживают внимание и помогают акцентировать на самом главном.
- Следите за размером изображений, учитывайте ограничения почтовых клиентов.
- Используйте с умом: не делайте из письма сплошное анимационное представление.
- Используйте alt-текст (текст, который отобразится вместо картинки) и ссылку на веб-версию письма.