Интерактивные форматы и особенности вёрстки в медиа

KudaGo, КудаГо, Кудажка, Кудага
6 лет
“Живите интересно”
– сервис по продвижению мест и событий
– сервис по поиску мест и событий
– портал об интересных местах и событиях

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

Чек-лист: о чем помнить, чтобы вас читали нормально, а не вот так

1. Ширина колонок

1. Ширина колонок

2. Отступы между смысловыми частями текста

2. Отступы между смысловыми частями текста

3. Стили и шрифты

3. Стили и шрифты

4. Единообразие блоков, вёрстки, приемов

5. В чём проблема?

6. Границы и фон

7. Распределение иллюстраций по материалу
Изображения и другие визуальные акценты предлагают использовать через каждые 75-100 слов — есть исследование, согласно которому это увеличивает количество лайков и «шеров» в соцсетях.

8. Что не так?

8. Размеры фотографий должны быть одинаковыми

9. Текст и плашки

9. Текст не должен прилипать
к границам плашки

10. Указывать авторство и источники — это правила хорошего тона (и максимальной безопасности)
Все гифки были взять с сайта giphy.com
Используйте эмбеды (YouTube, Instagram, gettyimages (будут с водяным знаком, но внизу) и бесплатные стоки (самый известный — Unsplash)
список стоков c LifeHacker
иногда фотографию ПРОЩЕ сделать самому на телефон — после тонны фильтров из приложений она становится уникальной и даже не очень позорной

11. Проверяйте свою вёрстку на мобильных девайсах и десктопе
Ваш материал должен выглядеть адекватно на всех платформах
Нужно помнить, что мобильные телефоны требовательны к сложности вёрстки (помните w-o-s?) и весу и качеству фотографий

Зачем нужны интерактивные форматы?
Как определить, что с вашим материалом взаимодействует аудитория?

Зачем нужны интерактивные форматы?
Для увеличения вовлеченности пользователей в материал!
нахождение на странице
внутренняя аналитика интерактивного элемента
совершение целевого действия
показатель доскролла
Как определить, что с вашим материалом взаимодействует аудитория?

Тесты

Преимущества тестов:
Вовлечённость
Игровая механика
Гибкость под концепт
Нативность продвижения

Минусов нет

Возможности PlayBuzz
Правильный/неправильный ответ
Подходит для быстрой проверки знаний. Один из старых примеров с KudaGo

Возможности PlayBuzz
Определение результатов по баллам
Подходит для более сложных концепций. Например, вот тест по вселенным Нолана.
Опросы

Как это работает?

Тест vs пост

Видеоформат
Теперь мы не только рассказываем о событиях и местах, но и показываем их

Преимущества видеоконтента
1 минута стоит 1000 слов
Удобный для восприятия продукт
Широкий охват аудитории
Вовлеченность в социалках
Виральность
Популярность среди молодой аудитории
Приоритезация в соцсетях
текст
видео

Шторка / флип-карта
Пример шторки

Шторка / флип-карта
Флип-карта

Вопросы?