Как создавать инновационный контент

Сегодня каждый интернет-маркетолог знает, что 80% успешного развития бренда в сети – это интересный, цепляющий контент. Вокруг контента строится практический весь интернет-маркетинг последних нескольких лет. А это означает, что становится все сложнее выделиться в таком потоке информации. Ричард Бакстер в своей статье предлагает сосредоточиться не столько на содержании, сколько на форме подачи контента.

Конкуренция за внимание пользователей становится жестче

Большую часть времени мы создаем контент, который что-нибудь сообщает: идеи, истории, новости, рекомендации. Проблема заключается в том, что в какой бы области мы не работали, все мы боремся за одно и то же – за внимание наших потребителей. По мере того как потребители начинают лучше разбираться в ситуации, конкуренция становится все более жесткой.

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

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

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

Контент-маркетингу требуется больше инноваций

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

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

История компании еBoy

eBoy – это компания, занимающаяся графическим дизайном. Ее трех соучредителей и единственных сотрудников часто называют «крестными отцами» пиксельной графики.

Выдержанный стиль, как и выразительно изложенное содержание вызывает восхищение. С технической точки зрения, пожалуй, самая остроумная и изящная находка – это масштабирование рисунка, привязанное к оси Z в контейнере <canvas> (о нем я расскажу подробнее чуть позже).

Получатель событий (jQuery) помогает подогнать размер холста под размер окна браузера, а положение оси Z перемещается на полосу прокрутки и создает оригинальный эффект изменения масштаба.

Пример можно посмотреть здесь.

Тег <canvas> – это элемент HTML-кода для графики, создаваемой с помощью скриптов (как правило, на языке JavaScript). С его помощью можно, например, создавать графики, комбинации из фотографий или простую анимацию.

Раскрась прошлое

Руководство по колоризации прошлого от Pixart Printing - это еще один любопытный пример использования контейнера <canvas>. Если навести курсор на изображение и нажать кнопкой мыши (в случае мобильных устройств – при прикосновении) часть верхнего слоя стирается, открывая находящееся под ним цветное изображение.

Эффект колоризации основан на использовании возможностей элемента <canvas>. В данном случае цветной вариант изображения используется как фон холста, а черно-белое изображение накладывается на него как верхний слой.

Chrome Experiments: Globe

Globe — это визуализация глобальных данных о росте населения Земли в определенные заданные даты. Трехмерная визуализация основывается на webGL — программной библиотеке (для языка JavaScript), позволяющей передавать интерактивную 3D и 2D-графику в любом совместимом веб-браузере без использования плагинов.

Пример можно посмотреть здесь.

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

Среди моих излюбленных примеров применения WebGL назову Hello Racer и Tweetopia,- трехмерный визуализатор хэштегов Твиттера. Если вы хотите увидеть другие примеры webGL в действии, обратите внимание на Chrome Experiments.

Обзор PS-4 на сайте Polygon

Обзор Playstation-4 на сайте Polygon — это полноценный развернутый обзор завоевавшей популярность игровой консоли Sony. Та часть, которая мне особенно нравится, касается визуализации с помощью SVG.

SVG – это суперскоростная и четкая передача векторных изображений в браузере. В отличие от обычных файлов изображений (таких как .jpg, .gif, .png), файлы SVG основаны на XML, имеют небольшой размер, быстро загружаются и идеально подстраиваются под ширину принимающего браузера. Схема SVG добиваться впечатляющих эффектов при помощи несложных в исполнении манипуляции.

Пример можно посмотреть здесь.

Прочерчивание линий, которое вы видите, называется анимацией траектории. По сути, атрибутом path в XML-коде файла SVG можно управлять через DOM с помощью jQuery. В результате вы получаете эффектную анимацию, благодаря которой пользователи просто не могут оторваться от вашего контента.

Мой любимый пример использования SVG – это Gridlocks and Bottlenecks Льюиса Лее (Lewis Lehe). Gridlocks – это построенная на базе AngularJS и d3.js визуализация процесса образования пробок и заторов на дорогах.

Пример можно посмотреть здесь.

Предлагаем небольшой чек-лист, который позволит определить, насколько вы хорошо технически подкованы:

• HTML-5;
  
• адаптивный CSS (и библиотеки);
  
• CSS 3 (и фреймворки);
  
• JavaScript (и фреймворки: jQuery, MooTools, Jade, Handlebars);
  
• JSON (отправленные и полученные данные);
  
• webGL;
  
• HTML-5: элементы аудио и видео;
  
• SVG;
  
• HTML-5 History API управление с помощью метода pushState;
  
• Infinite Scroll.
  

Если вы можете объяснить, что означают все эти термины, как контент-маркетолог вы находитесь на шаг впереди остальных!