Статьи

Закрепленные сайты HuffPost +: переосмысление опыта больших новостей

Huffington Post является ведущим сайтом социальных новостей и мнений — «Интернет-газета». HuffPost охватывает все: политику, СМИ, бизнес, развлечения, жизнь, стиль, устойчивую «зеленую» жизнь, мировые новости, технологии, некоммерческие организации, студенческую жизнь. книги, образование, религия, путешествия, искусство, еда, комедия: это популярное место для новостей, блогов и оригинального контента. Ежемесячно сайт посещает более 26 миллионов уникальных посетителей .

HuffPost хочет предоставлять своим читателям актуальные и своевременные «Большие новости» и поощрять взаимодействие с комментариями и постами в социальных сетях. Используя преимущества инструментов разработки для Internet Explorer 9 и Windows 7, HuffPost создал захватывающий, похожий на приложение веб-интерфейс с новыми функциями закрепленного сайта:

Результат был отличным как для читателей, так и для бизнеса HuffPost. Пользователи, которые прикрепили сайт …

  • Потратил на сайте 49% больше времени
  • На 14% больше шансов остаться на месте
  • Просмотрено на 11% больше страниц

И это именно то, на что надеялся HuffPost — больше участия.

Разработчики HuffPost использовали эти инструменты, чтобы заставить читателей возвращаться к чему-то большему, разрабатывая постоянно активное присутствие на панели задач Windows 7 пользователей, где доля IE9 превышает 20% по всему миру и приближается к 30% в США . Пол Берри, технический директор Huffington Post, описывает подход, который они использовали в этом видео .

Хотите сделать то же самое? На копирование работы по разработке, которую проделал HuffPost, уходит около суток. Перейдите на BuildMyPinnedSite для идей и примеров кода. Более простая версия (с большей частью пользы) может быть сделана за 15 минут.

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

Ситуация

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

Хотя большая часть Интернета сегодня является статичной и ориентированной на контент, появляется все больше и больше сайтов, которые являются интерактивными, персонализированными и социальными. Это ясно, где сеть движется в эти дни.

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

Разработчики в HuffPost заняты. Они сосредоточены на содержании и функциональности сайта, поэтому у них нет времени, чтобы изучить каждую функцию на каждой платформе. Функции, которые они рассматривают, должны быть простыми . Они должны быть сильными. И они должны немедленно улучшить опыт пользователя .

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

  1. Привлечения клиентов
  • Достигает ли он клиента своевременно и актуально?
  • Является ли это частью повседневной работы клиента?
  • Помогает ли это клиенту быстрее получить доступ к нашему контенту?
  • Уходит ли наш клиент глубже в опыт сайта?
  • Потребительская ценность
    • Вдохновляет ли клиент оставаться и дольше общаться?
    • Повысит ли это возможность для наших клиентов взаимодействовать с рекламой и премиальным опытом?
    • Это «передний край» и «должен иметь» для клиента?
    • Это улучшает повседневный опыт?
    • Создает ли это лояльность и ценность бренда?
  • Инженерные ценности
    • Это просто и устойчиво с точки зрения развития?
    • Это основано на надежной, долгосрочной платформе со зрелой клиентской базой?
    • Синхронизируется ли это с миссией и ценностями бизнеса?
    • Итог — выгодно ли использовать данный проект?

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

    Они оценили возможности закрепленных сайтов в Internet Explorer 9, чтобы понять, как эти функции повлияют на заинтересованность и ценность клиентов. Сразу же они были довольны «быстрой победой» и «захватывающим» потенциалом.

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

    Решение

    Прост в освоении, прост в освоении.

    Разработчики узнали о реализации закрепленного сайта IE9 с помощью библиотеки примеров кода MSDN IE9 и закрепленных сайтов IETestDrive , которые включали в себя простые сценарии с всплывающими окнами «показ кода».

    API закрепленного сайта IE9 и встроенные средства разработчика F12 также были очень полезны.

    Как и многие новостные сайты в Интернете, HuffPost в основном использует JavaScript для публикации новостей из своей системы управления контентом. Благодаря этому функции закрепленных сайтов на основе JavaScript можно было легко добавлять и тестировать в существующей системе практически без специального кода.

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

    Сквозное усилие? 3 дня, чтобы жить.

    • Дизайн = 2 дня, общий для маркетинга, редакторов и планирования продукта
    • Разработка = 1 день, 1 разработчик для сборки, тестирования и развертывания

    figure 1

    HuffPost в IE9 — это чистый, фирменный опыт, который ставит в центр внимания контент и интерактивность. Функции закрепленного сайта предназначены для повышения вовлеченности клиентов через Windows 7 вне браузера.

    Более глубокий взгляд на Huffington Post в IE9

    Вот что сделал HuffPost, чтобы изобрести свой сайт всего за 1 день с 1 разработчиком:

    Шаг 1: сопоставьте с вашим текущим брендом внешний вид.

    HuffPost определял цвета кнопок навигации, домашнюю страницу, размер окна и подсказки с помощью закрепленных метаданных сайта . IE9 делает все остальное.

    figure 2

    Шаг 2: Сообщите своим пользователям. Тогда напомни им!

    HuffPost хочет, чтобы читатели, использующие IE9, прикрепили свой сайт. Сайт автоматически проверяет, когда пользователи еще не закрепили его, и предлагает им перетащить вкладку на место. Все сделано только с 15 строками кода . Теперь пользователи могут перетащить вкладку на панель задач и начать работу с закрепленным сайтом.

    figure 3

    Шаг 3: HuffPost на каждой панели задач.

    HuffPost хотел, чтобы опыт бренда был «чистым и блестящим», как повседневная часть опыта их пользователей. Они разработали 5 Favicons в X-Icon Editor с цветами, связанными с каждым разделом новостей.

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

    figure 4

    Шаг 4: Верните их снова и снова!

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

    figure 5

    Шаг 5: Идите глубже со списками переходов.

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

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

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

    figure 6

    Шаг 6: зайдите в социальную сеть с панелью миниатюр.

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

    figure 7

    Резюме и следующие шаги

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

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

    Показатели успеха Huffington Post — превышены!

    HuffPost в восторге от того, как небольшое усилие (1 день, 1 разработчик) окупилось для их целей читательской аудитории:

    Пользователи, которые прикрепили сайт …

    • Потратил на сайте 49% больше времени
    • На 14% больше шансов остаться на месте
    • Просмотрено на 11% больше страниц

    Преимущества сайта опыта:

    • Создан индивидуальный подход, позволяя пользователям закреплять нужные им новости одним нажатием кнопки.
    • Повышение вовлеченности пользователей благодаря уведомлениям, возвращающим пользователей в свои «большие новости»
    • Низкая стоимость кода и простота поддержки с использованием существующих технологий, таких как JavaScript

    Готов идти? Узнайте, как сделать то, что они сделали.

    Смотрите это в действии!

    Проверьте Хаффингтон пост в IE9. Существует множество ресурсов для разработчиков, включая примеры кода, технические документы, API и многое другое ниже:

    Легкие щелчки! Ссылки, на которые ссылаются в этом тематическом исследовании:

    Контент-партнер SitePoint

    Это руководство стало возможным благодаря поддержке Microsoft. Мы стремимся работать вместе, чтобы разработать контент SitePoint, который будет наиболее полезным и актуальным для вас.