UI-анимация: 7 советов по созданию крутых gif-анимаций
Вы читаете перевод статьи “7 tips for designing awesome animated GIFs”. Над переводом работали: Анастасия Свеженцева и Ольга Жолудова. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
У нас в InVision, гифки — это не просто способ повалять дурака, они играют важную роль в нашей системе маркетинга и обучения. Черт, да мы даже пробовали использовать gif-анимации на нашем сайте, вместо модных анимаций на базе кода.
Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀
Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook
В конце концов нас стали спрашивать “Как вы делаете эти гифки?”. И мы решили, что пришло время открыть секрет.
1. Секретный ингредиент
Вот мой маленький грязный секретик: все мои гифки изначально были видеороликами.
Обычно я делаю их в ScreenFlow, и его же я использую для создания роликов о продукте. Эту программу достаточно просто освоить, и в ней собрано несколько очень удобных инструментов для анимации.
Я экспортирую анимацию как видео файл, и импортирую этот файл в Photoshop: Файл > Импортировать > Кадры видео в слои (File > Import > Video Frames As Layers).
Проф. совет: Если вам не по карману ScreenFlow или After Effects, создавайте анимацию в Keynote и экспортируйте как видео. Ага, наконец-то эта функция хоть кому-то пригодится.
2. Меньше цветов = больше веселья
Если вы хотите создавать невероятные гифки, вам нужно становиться очень разборчивым при выборе цветов. Цвет существенно влияет на размер файла; к тому же чем меньше цветов вы используете, тем длиннее и насыщеннее могут быть ваши гифки, при том же относительно небольшом размере файла. (Относительно небольшим я считаю размер до 1 мегабайта).
3. Пользуйтесь размытым движением, когда это возможно
Программы типа ScreenFlow и After Effects позволяют вам экспортрировать видео с размытым движением (motion blur). Благодаря этому эффекту анимация будет выглядеть более профессионально, а вы сможете безболезненно снизить качество гифки в Photoshop, чтобы уменьшить размер файла.
4. Будьте (немного) ленивыми
Представьте, сколько всяких штук я мог бы добавить в гифку в заголовке этой статьи. Небольшие тултипы с именами пользователей, курсор, кликающий по плюсику, снова курсор, наведенный на аварки и вызывающий новые тултипы и анимации. Но людям, чтобы увидеть целую картину, все это не нужно. Показывайте только то, что нужно показать — ваше время и размер файла ограничены.
Экспорт gif-анимаций
Прежде чем переживать обо всем, что сказано ниже, попробуйте экспортировать свою гифку. Если размер файла вас устраивает — хорошая работа! Продолжайте в том же духе. А если гифка слишком большая, попробуйте вот что:
5.
Удалите дублирующиеся кадрыВаша анимация скорее всего в какие-то моменты останавливается. Присмотритесь, и вы увидите, что каждый их этих моментов содержит по несколько дублирующихся кадров, продолжительностью в 0,03 секунды. Если найдете 10 дублирующихся кадров — удалите 9 из них и установите продолжительность одного оставшегося кадра, скажем, в 1 секунду.
Если это не поможет, попробуйте повторно импортировать ваше видео, но на этот раз выберите опцию “ограничить до 2 кадров” (Limit to Every 2 Frames). Это должно существенно уменьшить размер вашего файла.
Проф.совет: Это, конечно, не железобетонное правило, но если в вашей гифке более 150 кадров, уменьшить размер файла будет сложновато.
6. Уменьшите количество цветов
Когда будете сохранять свою гифку в Photoshop, увидите выпадающий список Цвета (Colors) справа. Поиграйте со значениями. Установите минимальное допустимое значение этой опции, но следите, чтобы гифка при этом не превратилась в кучу мусора.
7. Настройте параметр lossy
Признаться честно, я даже не знаю, что такое lossy. Но я знаю, что если установить его значение где-то между 1 и 10, вы сбросите килобайты лишнего и не испортите качество гифки.
(Пс, Энди, вот что такое lossy.)
Ничего не сработало! Помогите!
Если вы уже испробовали все вышеизложенное, но так и не смогли достаточно сжать вашу гифку, пора сделать шаг назад. Может вы пытаетесь сделать слишком многое? Есть ли другой способ достижения вашей цели? Может, разбить текущий файл на две отдельные гифки? Как и большинство творческих продуктов, гифка сработает лучше, если будет сфокусирована на чем-то одном.
Бонусное видео: Супер-быстрый способ
Налетайте: качайте видео файл, на базе которого я создал гифку из этой статьи! (Чтобы открыть файл, вам понадобится ScreenFlow 5).
Проф.совет: Используйте гифки в прототипах, чтобы создать невероятные переходы.
Что я пропустил?
У вас есть какой-то супер-совет, который стоит добавить в эту статью? Хотите еще поговорить о гифках? Найдите меня в Twitter @andyorsow или читайте @invisionapp.
Статья изначально опубликована на blog.invisionapp.com 10 декабря 2014 года.
Основные принципы «отзывчивого» веб-дизайна показали в GIF — Look At Me
Стартап Froont (разрабатывает платформу для создания сайтов с «отзывчивым» дизайном) описал девять основных принципов «отзывчивого» веб-дизайна (responsive web design) в GIF-изображениях. Look At Me приводит советы разработчиков Froont. Стоит отметить, что «отзывчивым» веб-дизайном принято называть понятие, которое является частью адаптивного веб-дизайна (adaptive web design), но касается только макета страницы.
Чем отличается «отзывчивый» веб-дизайн от адаптивного. «Может показаться, что это одно и то же, но это не так. Эти подходы дополняют друг друга, но среди них нет правильного или неправильного».
Подвижность. «Когда размер экрана становится меньше, контент начинает занимать пространство снизу. При этом всё, что находится после его нижней границы, отодвинется.
Это может показаться сложным, если вы привыкли создавать сайты с указанием величин в пикселях и точках».
Относительные величины. «Макет будет открываться на десктопах, мобильных и каких-то других устройствах. При этом плотность пикселей у них тоже может меняться. Поэтому нужно работать с гибкими единицами, то есть с процентами. Если вы задаёте для чего-то ширину 50 %, то оно будет занимать половину экрана на любом устройстве (или половину окна браузера)».
Контрольные точки. «Они позволяют макету сайта перестраиваться в определённых точках. Например, три колонки на десктопе станут одной колонкой на мобильном устройстве. <…> Их нужно использовать с осторожностью, поскольку они могут внести беспорядок в макет».
Максимальные и минимальные величины. «Прекрасно, когда контент занимает всю ширину экрана, как, например, на мобильных устройствах. Но растягивать его по всей ширине экрана телевизора не имеет смысла.
Вложенные объекты. «Помните про относительные величины? Макет со множеством элементов, расположенных друг относительно друга, сложно контролировать. Поэтому перенос элементов в отдельный контейнер сделает макет более понятным, чистым и аккуратным. Такой метод удобно применять для элементов, которые не будут масштабироваться, например, для логотипов или кнопок».
Mobile first или desktop first. «Технически не такая большая разница: запускается проект на маленьком экране, а потом переносится на большой, или наоборот. Тем не менее mobile first создаёт дополнительные ограничения. Часто разработчики начинают делать две версии сразу, чтобы посмотреть, какая получается лучше».
Подключаемые или системные шрифты.
«Хотите иметь Futura или Didot на сайте? Используйте подключаемые шрифты — они будут выглядеть великолепно.
Но каждый из них загружается отдельно, и чем больше их будет, тем больше времени уйдёт на загрузку страницы. А системные шрифты работают очень быстро. За исключением тех случаев, когда их нет у пользователя на устройстве».Растровые или векторные изображения. «В иконке много деталей? Тогда используйте растровое изображение. Если нет, то подумайте насчёт векторных. И те и другие имеют свои достоинства и недостатки. Однако помните о размере файла — все картинки для интернета должны оптимизироваться. Векторные изображения весят совсем мало, но старые браузеры их не поддерживают. Тем более, если в векторном файле очень много кривых, то он будет „тяжелее“ растрового».
Анимированных Gif-дизайнов, тем, шаблонов и загружаемых графических элементов на Dribbble
Посмотреть сеансы Zoom #20Gifsfor2020
Сеансы Zoom #20Gifsfor2020
Посмотреть случайный проект Gif #3
Проект случайных гифок #3
Посмотреть анимированные картинки для G2i
Анимированные картинки для G2i
Посмотреть пустые улицы #20Gifsfor2020
Пустые улицы #20Gifsfor2020
Просмотр GIF-файлов Google
Гифки Google
Посмотреть Motioncue
Motioncue
Посмотреть случайные гифки 2020
Случайные гифки 2020
Просмотреть GIF-файлы пищи для размышлений
Пища для размышлений GIF
-
Просмотр GIF-файлов Google
Гифки Google
Просмотреть GIF-стикеры Нью-Йорка 🗽 для GIPHY
Нью-Йорк GIF стикеры 🗽 для GIPHY
Посмотреть петлю конфетти
Петля конфетти
Просмотр класса 101 — Создание анимированных GIF-файлов
Класс 101 — Создание анимированных картинок
Просмотреть стикеры / гифки Illustrated Giphy — анимацию в социальных сетях
Иллюстрированные стикеры Giphy/gif — анимация для социальных сетей
- Посмотреть гифки навсегда
Гифки навсегда
Просмотр случайных GIF-файлов Behance Project #3
Случайные GIF-файлы Behance Project #3
Посмотреть JB Hamburger Joint: анимация в социальных сетях
JB Hamburger Joint: анимация в социальных сетях
Посмотреть обложку проекта Behance «Различные GIF-файлы и стикеры».
‘Различные GIF-файлы и стикеры’ Обложка проекта Behance.
Просмотр класса 101 — Создание анимированных GIF-файлов
Класс 101 — Создание анимированных картинок
Посмотреть невидимые ритмы
Невидимые ритмы
Посмотреть жизнь до короны
Жизнь до коронавируса
Посмотреть GIF-наклейки на Хэллоуин 👻 для GIPHY
Хэллоуин GIF наклейки 👻 для GIPHY
Посмотреть круг
Круг
Вид на значок линии горизонта Гонконга GIF
Значок линии горизонта Гонконга GIF
Посмотреть праздничные GIF-файлы для GIPHY
Праздничные GIF-файлы для GIPHY
Зарегистрируйтесь, чтобы продолжить или войдите в систему
Загрузка еще…
Анимированные GIF-файлы в электронной почте: примеры и способы их создания [Руководство]
Как продавец электронной почты, вы всегда пытаетесь улучшить свои кампании с помощью текстов, дизайна и изображений.
. Но с такой большой конкуренцией за внимание подписчиков вам нужно проявить творческий подход к тому, как побудить читателей перейти по ссылке и заинтересоваться вашим сообщением. Введите: Анимированные GIF-файлы в электронной почте.
Маркетологи электронной почты все чаще обращаются к анимированным GIF-файлам в электронной почте, чтобы придать дополнительный визуальный интерес своим сообщениям. Согласно нашим данным о состоянии электронной почты за 2020 год, 51,28% маркетологов заявили, что хотя бы иногда используют анимированные GIF-файлы в своих маркетинговых электронных письмах.
Итак, как вы можете принять участие в этом действии? В этом сообщении блога мы рассмотрим:
- Что такое GIF
- Преимущества (с вдохновляющими примерами)
- Недостатки анимированных GIF
- Как создавать анимированные GIF с помощью Adobe Animate
- Рекомендации по работе с анимированными GIF
- Поддержка клиентов электронной почты и время загрузки
Что такое анимированные GIF?
GIF, расшифровывается как Graphics Interchange Format, представляет собой формат изображений, разработанный CompuServe в 1987 году.
Благодаря широкой поддержке браузеров и почтовых клиентов GIF-файлы были популярным форматом изображений с первых дней существования Интернета.
Что еще более важно, GIF можно анимировать. Подобно тому, как работает флипбук, GIF-файлы быстро отображают серию изображений, создавая иллюзию движения. В первые годы существования Интернета GIF-файлы (а также теги выделения и мигания) были основным методом добавления движения на веб-страницу.
Многое изменилось с 1990-х годов. Анимированные GIF-файлы переживают ренессанс как в Интернете, так и в электронном маркетинге. Хотя до сих пор ведутся споры о том, как на самом деле произносится «GIF», большинство согласится с тем, что GIF-файлы могут быть отличным маркетинговым инструментом.
Каковы преимущества анимированных GIF-файлов в электронной почте?
Предпочитаете ли вы твердую «G» или любите рифмовать GIF с определенной маркой арахисового масла, давайте посмотрим, почему GIF так полезны в электронных письмах.
1. Привлеките внимание подписчиков
Добавление анимации в электронную почту с помощью GIF — отличный способ привлечь внимание ваших подписчиков, указать им на действие, которое вы хотите, чтобы они предприняли, или заставить их прокручивать, чтобы убедиться, что они получают ваше сообщение целиком.
Grammarly использует тонкую анимацию, чтобы привлечь внимание к своему предложению.
Источник: Really Good Emails
Xfinity размещает свой GIF дальше в письме, чтобы привлечь подписчиков и побудить их прокрутить страницу.
Источник: Really Good EmailsМы использовали псевдо-видео GIF, чтобы привлечь внимание к нашему видео и заинтересовать подписчиков кликнуть, чтобы увидеть больше.
См. полное электронное письмо в действии2. Покажите свои продукты и услуги
Вы знаете, что ваш продукт великолепен. Убедитесь, что ваши подписчики тоже знают об этом. Нет ничего лучше анимированного GIF, чтобы показать, как работает ваш продукт или услуга.
ILIA Beauty демонстрирует свой продукт в действии с реальными людьми.
Источник: Really Good Emails
Webflow показывает свой продукт в действии, чтобы подписчики знали, чего ожидать.
Источник: Really Good EmailsMagic Spoon демонстрирует разнообразие вкусов и потрясающий дизайн упаковки.
Источник: Really Good Emails3. Упростите сложную идею
Если картинка стоит тысячи слов, то анимированная картинка , вероятно, стоит даже больше. Используйте анимированный GIF, чтобы проиллюстрировать сложную идею или показать своим подписчикам, что все еще проще, чем они думают.
Баггу вывел простые инструкции по уборке на новый уровень, анимировав их. Сделав четыре разных анимации, подписчикам приходится прокручивать страницу, чтобы увидеть всю историю.
Источник: Действительно хорошие электронные письмаHeadspace показывает вам, как обрести спокойствие с помощью GIF лучше, чем кто-либо может объяснить словами.
Источник: Really Good Emails4.
Расскажите о чем-то новом или о том, что скоро появитсяУ вас есть новый контент или продукт, который вы собираетесь выпустить? У вас скоро появится отличное предложение? Используйте анимированный GIF-файл, чтобы повысить осведомленность или интерес к вашему продукту, а подписчики будут ждать вашего следующего письма.
Apple дразнит расширенную распродажу в Черную пятницу и призывает подписчиков «сохранять даты» для покупок, чтобы не пропустить выгодные предложения.
Источник: Really Good EmailsЭлектровелосипед Линуса лишь намекается в тени этого письма. Подписчики должны будут щелкнуть, чтобы увидеть фактический продукт.
Источник: Really Good EmailsTinker тизерит как распродажу в Черную пятницу, так и часы с ограниченным тиражом с помощью этого анимированного GIF, чтобы подписчики с нетерпением ждали следующего электронного письма с дополнительной информацией.
Источник: Really Good EmailsНедостатки анимированных GIF-файлов в электронном маркетинге
Какими бы замечательными ни были анимированные GIF-файлы, они не лишены недостатков.
Недостаточная доступность
Анимированные GIF-файлы могут представлять проблему с точки зрения доступности по целому ряду причин.
Частота мигания контента от 2 Гц до 55 Гц может нанести вред пользователям, страдающим светочувствительной эпилепсией. Кроме того, у слабовидящих пользователей могут возникнуть трудности с чтением или просмотром контента в формате GIF до изменения анимации. Поэтому убедитесь, что ваши анимированные GIF-файлы имеют плавные переходы или не анимируются от одного кадра к другому с высокой скоростью.
И, поскольку GIF-файлы являются файлами изображений, вы всегда должны включать соответствующий альтернативный текст для пользователей, которые полагаются на вспомогательные технологии, такие как программы чтения с экрана. Изображения по своей природе недоступны для многих людей, поэтому предоставление текста и контекста позволяет им более четко понять ваше сообщение.
Создавайте доступные, инклюзивные электронные письма для всех ваших подписчиков Получите информацию и пошаговые советы, необходимые для написания, дизайна и кодирования электронных писем, которыми может наслаждаться каждый — независимо от их способности. Узнайте, как → |
Плохая прозрачность фона
Если вам нужно добавить больше цвета или немного прозрачности фона в анимированный контент, тогда анимированный GIF не подойдет.
GIF-файлы некрасивы, когда дело доходит до прозрачного фона. Но вы можете предоставить анимированную альтернативу электронной почте в виде анимированного PNG (APNG). Обязательно обратите внимание на те же советы и рекомендации по сжатию, которыми мы поделимся далее, поскольку APNG также любят накапливать килобайты (КБ).
И если вы ищете еще одну альтернативу анимированным GIF-файлам, вы можете изучить анимацию CSS.
Создание анимированных GIF-файлов для кампаний по электронной почте с помощью Adobe Animate
Вы можете создавать GIF несколькими способами. Онлайн-конструкторы позволяют вам анимировать выбранные фотографии или превращать видео в анимированный GIF, или вы можете использовать программное обеспечение, такое как Adobe Photoshop или Adobe Animate, для перемещения пользовательских дизайнов.
Вот обзор того, как сделать анимированный GIF в Adobe Animate.
Шаг 1: Создайте новый файл и введите размеры
Чтобы создать GIF в Adobe Animate, сначала создайте новый файл и введите желаемые размеры. Совет для профессионалов: создавайте анимацию в два раза больше для дисплея сетчатки, как и для статических изображений.
Шаг 2: Импорт графики для анимации
Вы можете создать анимацию прямо на холсте, используя формы и инструменты рисования программы, создавая слой для каждого элемента. Если вы создали дизайн для своей анимации в Adobe Illustrator, вы можете просто скопировать и вставить векторную графику на свой холст. В противном случае вы можете импортировать графику в Adobe Animate, выбрав «Файл» > «Импорт» > «Импортировать в рабочую область». Или, если вы импортируете графику, которая будет повторно использоваться несколько раз, вы можете «импортировать в библиотеку».
Шаг 3: Создайте анимацию
Теперь вы можете использовать временную шкалу для создания анимации.
Есть много возможностей с таким программным обеспечением, и было бы трудно затронуть все это в одном посте в блоге. Тем не менее, существует множество ресурсов с множеством полезных руководств на YouTube, в онлайн-руководствах Adobe и в самом программном обеспечении.
Я бы порекомендовал обратить особое внимание на контент, связанный с символами, анимацией и простотой. Только с помощью этих трех функций вы можете создать привлекательную анимацию, которая поможет привлечь внимание, донести ваше сообщение и порадовать вашу аудиторию. Все это привносит в ваши электронные письма ведра индивидуальности бренда.
Символы
Символ — это изображение, кнопка или фрагмент ролика, который вы создаете один раз, а затем повторно используете, выбирая его из библиотеки.
Создав символ, вы можете повторно использовать его в своей анимации — это называется экземпляром. Если бы вы отредактировали свой символ, например, изменив цвет, это было бы сделано во всех экземплярах (аналогично частям электронной почты).
Но если бы вы редактировали экземпляр, ваши изменения применялись бы только к этому экземпляру.
Для анимированных GIF-файлов мы предлагаем только преобразовать элементы дизайна в графические символы. К клипам роликов и кнопкам прикреплена собственная временная шкала, поэтому их можно анимировать независимо от основной временной шкалы. Однако, поскольку любые анимации, созданные за пределами основной временной шкалы, не учитываются при экспорте анимации в формате GIF, имеет смысл придерживаться графических символов, которые анимируются только на основной временной шкале.
Анимация
Анимация — это способ анимации из одного состояния в другое. Вы можете использовать форму, движение или классическую анимацию.
Анимация формы может использоваться только с фигурами или элементами, которые вы нарисовали на холсте или векторах, импортированных с помощью настроек средства импорта AI (а не в виде растрового изображения). Это связано с тем, что анимация формы позволяет изменять форму объекта.
Например: вы можете добавить круг к одному ключевому кадру на временной шкале, добавить квадрат к другому, а затем превратить свой круг в квадрат с помощью анимации формы.
Анимации движения используются для создания анимационных движений путем указания разных значений между первым и последним кадрами. С помощью такой анимации вы можете изменять свойства объекта, включая положение, размер, цвет, эффекты, фильтры и поворот.
Классическая анимация очень похожа на анимацию движения. Он был перенесен из Flash и сохранен в Animate в качестве дополнительной опции. Это мой предпочтительный способ применения анимации движения, так как методы смягчения (обсуждаемые ниже) немного проще в применении.
Замедление
Замедление идет рука об руку с анимацией. Если перемещение объекта из одного положения в другое с помощью временной шкалы — это торт, то замедление — это глазурь!
С помощью функции замедления Animate можно ускорить или замедлить анимацию движения в начале или в конце.
Или добавьте небольшой отскок, когда анимация будет завершена. Это действительно помогает привнести индивидуальность в вашу анимацию.
Легкость, примененная к этой анимации, запускает анимацию быстро и замедляет ее в конце.
В этом примере мы применили плавность отскока к анимации движения.
Для получения информации о том, как применить смягчение, посмотрите это видео на YouTube.
Шаг 4. Экспортируйте анимированный GIF-файл
Сохранение анимации из Adobe Animate в формате GIF — это удобно и просто. Просто выберите «Файл» > «Экспорт» > «Экспорт анимированного GIF».
Как уменьшить размер GIF-файла
Независимо от того, используете ли вы Adobe Animate или что-то еще — сохранение небольшого размера GIF для электронной почты имеет решающее значение для электронной почты. Есть несколько вещей, которые стоит учитывать, чтобы сделать ваши анимации максимально легкими.
Сжатие
Такие инструменты, как Animate и Photoshop, имеют ограниченные параметры сжатия для файлов GIF; часто вместо сжатия лучше использовать внешнее программное обеспечение.
Мы рекомендуем ImageOptim, который можно загрузить бесплатно, или EZgif, бесплатный онлайн-инструмент для оптимизации GIF, чтобы уменьшить размер файла до оптимального веса. Мы рекомендуем оставить размер меньше одного мегабайта (МБ), но оптимальный размер файла будет варьироваться и зависит от времени загрузки электронной почты.
Плоский цвет
Включение фотографии или градиентов в вашу анимацию добавляет веса из-за количества содержащихся в них цветов и оттенков. GIF может содержать только 256 цветов — по сравнению с JPEG, который может включать более 16 миллионов — что часто приводит к снижению качества. Главное, чтобы все было просто.
Ограниченное количество кадров
Чем короче анимация, тем лучше. Каждый кадр, который содержит ваша анимация, добавляет вес GIF. Поскольку анимация действительно должна дополнять ваш текст, ограничьте продолжительность воспроизведения анимации и поощряйте читателей переходить по письму вниз.
Если вы обнаружите, что ваш GIF-файл имеет слишком большой вес после сохранения и сжатия, вы можете удалить кадры с помощью Photoshop или EZgif.
Проверка вашего анимированного GIF-файла
Теперь, когда вы завершили свой GIF-файл, вы можете получить отзыв или одобрение, прежде чем отправлять его по электронной почте. С помощью инструмента для совместной работы в режиме реального времени, такого как Litmus Proof, вы можете централизовать все комментарии и одобрения.
Дружелюбное предупреждение: доступно только в тарифных планах Litmus EnterpriseАнимированный GIF-файл для лучших практик маркетинга по электронной почте
Вот несколько рекомендаций, которые следует учитывать при использовании анимированных GIF-файлов в электронной почте.
Соедините GIF-файлы с CTA
Анимированные GIF-файлы можно использовать для привлечения подписчиков к определенному действию, которое вы от них хотите.
Pond5 использует анимированный GIF-файл, чтобы привлечь внимание к основному призыву к действию (CTA) электронного письма «Скачать бесплатный клип».
Источник: Really Good EmailsДумайте о мелочах
Когда дело доходит до GIF-файлов, думайте о мелочах: немного может иметь большое значение.
Анимируя только часть письма, вы можете добавить немного анимации, не переусердствуя. Кроме того, это помогает уменьшить общий размер файла GIF.
Вот пример от Adobe — они сохраняют анимацию в небольшой части электронного письма, но это имеет большое значение.
Еще один способ уменьшить масштаб — создать короткую анимацию, которую можно зацикливать. Это ограничивает количество кадров в анимации, а также помогает уменьшить размер файла.
Используйте GIF-файлы, чтобы добавить индивидуальности
Подчеркните индивидуальность вашего бренда в электронной почте с помощью анимированных GIF-файлов, как это делает Рип Ван Вафелс с помощью этой игривой анимации ниже.
Внедрение анимированных GIF-файлов в сообщения электронной почты
Когда у вас есть готовый GIF-файл, вы можете включить его в свое электронное письмо почти так же, как и любой другой файл изображения:
Однако есть несколько уникальных вещей, которые вам нужны. рассмотреть: какие почтовые клиенты поддерживают анимированные GIF-файлы и как долго они загружаются в вашу электронную почту.
Другие рекомендации по электронной почте с анимированными GIF-файлами
Кроме того, при добавлении анимированных GIF-файлов в электронные письма следует учитывать следующие три фактора: поддержку, время загрузки и среднюю скорость загрузки содержимого.
Поддержка
Анимированные GIF поддерживаются почти везде. В 2019 году Outlook расширил поддержку анимированных GIF-файлов, но это касается только Office365. Outlook 2007-2019 по-прежнему не поддерживает анимированные GIF-файлы.
Вот краткая таблица того, какие почтовые клиенты поддерживают и не поддерживают анимированные GIF-файлы:
Desktop Clients | Webmail Clients | Mobile Clients |
Outlook 2000-2003 ✓ | Gmail ✓ | iOS Mail ✓ |
Outlook 2007–2019 ✘ | G Suite ✓ | Gmail ✓ |
Outlook для Mac ✓ 60056 Yahoo5 900 Почта ✓ | Gmail IMAP ✓ | |
Apple Mail ✓ | AOL ✓ | Samsung Mail ✓ |
Windows 10 Mail ✓ | Outlook. | Outlook ✓ |
Office365 ✓ | Office365 ✓ | Yahoo ✓ |
Comcast ✓ | AOL ✓ | |
Orange.fr ✓ | ||
SFR.fr ✓ | ||
GMX.de ✓ | ||
Web.de ✓ | ||
T-Online.DE ✓ | ||
Freenet.DE ✓ | 98535353535353535353539343434343434343434343434934343434343493434343434634343434349ERET. DE.0354 |
com ✓
Чтобы обеспечить максимальное удобство работы там, где анимированные GIF-файлы не поддерживаются, убедитесь, что первый кадр содержит все необходимое в качестве резервного статического изображения.
Вы также можете предоставить резервный вариант для Outlook, скрыв обычное изображение GIF и отобразив статическое изображение и/или другое содержимое внутри условий Outlook: клиенты пользуются популярностью у вашей аудитории. Если оутлук 2007-2019является основным клиентом с вашей базой подписчиков, найдите время, чтобы убедиться, что резервный вариант работает, как и планировалось. (Согласно нашим данным с Litmus Email Analytics, Outlook был самым популярным настольным клиентом по состоянию на июнь 2022 года.)
Время загрузки
Ранее мы обсуждали размеры файлов. Время загрузки — это то место, где размер файла становится очень важным.
Вы можете проверить время загрузки с помощью такого инструмента, как автоматизированный контрольный список проверки перед отправкой Litmus, чтобы увидеть, не слишком ли долго загружаются ваши изображения.
В среднем мы обнаружили, что чуть более половины получателей тратят на электронное письмо менее двух секунд. Таким образом, ваши анимированные GIF-файлы должны загружаться быстро, чтобы произвести впечатление.
Мы протестировали файлы разных размеров, чтобы определить их среднюю скорость загрузки при разных соединениях. В среднем анимированный GIF-файл размером 4,4 МБ загружается в два раза дольше при подключении 4G LTE, чем при подключении Ethernet.
Вот некоторые средние скорости для разных размеров файлов при разных подключениях, основанные на нашем собственном эксперименте:
Средняя скорость загрузки контента (в секундах)
Размер файла | 4G LTE | WiFi | Ethernet | ||||||||||||
180kB GIF | 0.37 | 0.29 | 0. | ||||||||||||
1MB GIF | 1.18 | 0,54 | 0,44 | ||||||||||||
3,2 МБ GIF | 2,87 | 1,44 | 1,44 | 1,44 | 1,44 | 1,44 | 1,44 | 1,44 6693 1,44 | .0005 | ||||||
4.4MB GIF | 3,23 | 1,83 | 1,34 |
22
байт (TTFB). TTFB — это способ измерения скорости отклика веб-сервера. Поэтому, если вы размещаете свои изображения на сервере, который медленно отвечает, время загрузки анимированных GIF-файлов для ваших подписчиков увеличится.
Не анимируйте только потому, что можете — подумайте, какую пользу это принесет вашей аудитории. Убедитесь, что ваш дизайн выглядит правильно Неработающие электронные письма приводят к снижению конверсии. Предварительно просматривайте свои электронные письма в более чем 100 почтовых клиентах, приложениях и устройствах, чтобы обеспечить безошибочное взаимодействие с подписчиками. Оставить комментарий
|
