1507 Знания

Адаптируем блог для мобильных пользователей

На что обратить внимание при создании мобильной версии блога и какие решения предлагают разные CMS

Блоги - интересное явление: в зависимости от целей автора или собранной им команды, они могут выполнять функции личного дневника, каталога компании, архива фотохроники событий или полноценного отраслевого СМИ. Соответственно выбирается и язык, на котором автор статьи будет говорить с читателями. В него, как и в язык оффлайн-разговора, входят не только слова: гораздо точнее они будут звучать с правильно подобранными шрифтами, иконками, навигацией, размещением статей в зонах внимания посетителя и медиаконтентом разного формата.

Посмотрим, что важно для пользователей блогов: на какие возможности сайта они чаще всего обращают внимание. Кроме того, разберемся, что меняется в их отношении при просмотре сайта в смартфоне и какие решения этих задач предлагают CMS.


Личные заметки и экспертное мнение


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

  • хронологическую ленту;
  • теги у каждого поста и в облаке;
  • акцент на заголовке;
  • яркий кадр или изображение к каждой записи


Что меняется, когда такой сайт пользователь открывает в смартфоне?

Во-первых, он ограничен во времени, во-вторых, часто находится в некомфортных условиях (транспорт, очередь и т.д.) Задача создателей сайта - сократить количество этапов от входа на сайт до чтения текста. Один из вариантов - соединить заголовок, картинку и кнопку:

Кроме того, важно, во-первых, эффективно использовать пространство, а во-вторых, дать возможность пользователю в любой момент выполнить желаемое действие без дополнительных прокруток и редиректов. Пример - крупные кнопки шеринга в соцсетях (уважаем finger-friendly design и отменяем необходимость прокрутки до конца статьи или экрана) :


Теги в мобильной версии тоже актуальны, т.к. они работают на общую задачу удобной навигации; здесь главное - чувство меры:


Корпоративные блоги: новости из первых рук…

Следующий тип - корпоративный блог, в котором публикуются новости компании, анонсы продуктов и аналитика по профессиональным темам. Так как объем контента и перечень тем здесь гораздо более внушительный, чем в первой группе - здесь важна структура и наглядность. Это могут быть разделы, которые являются частью кнопок или добавлены к ним, а также зоны экрана, разграниченные цветовым или стилистическим решением. На примере блога МИФа можно проследить обе тенденции:


Когда разместить нужно много, а наглядность критически важна - на помощь приходят лаконичные решения передачи смысла, пиктограммы и шрифты:

Учитывая, что одной из основных задач такого блога является анонс продуктов компании - дизайнерам и авторам нужно найти баланс между рекламой и интересным контентом, иначе есть риск потерять внимание пользователей. Вариантов много - от маскировки ссылок до т.н. "нативной" рекламы:

СМИ нашего времени

Блоги также могут выполнять функции - как дополнение основной печатной версии издания ( business-class.su), либо как самостоятельный участник медиарынка (znak.com). В этих блогах размещается огромный объем контента, соответственно необходимо:

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

В ситуации, когда к блогу такого типа будут обращаться с носимого устройства, к перечисленным выше особенностям добавится также необходимость:

  • максимально эффективно использовать пространство (разместить последние записи по различным категориям уже на первом экране, чтобы сократить время на переходы между страницами)
  • дать возможность шеринга материалов в соц.сетях, личном блоге, сервисах аккумулирования контента (Pocket, Evernote и т.д.)

Инструменты адаптации от CMS

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

К базовым относятся:

  • коррекция содержимого под размеры экранов планшета и смартфона;
  • разделение текста на колонки;
  • корректировка шрифтов и масштабов элементов дизайна
  • закрепление меню и кнопок
  • отказ от элементов, усложняющих загрузку и снижающих скорость работы (flash и др.)

В качестве специфических стоит отметить:

  • наглядное представление текста
  • создание уникальных кнопок
  • работа с пиктограммами и шрифтами
  • функциональность для представления ссылок в тексте

Большинство т.н. "текстовых" блогов построено на платформах, созданных специально для этой цели: WordPress, Blogger, Tumblr, Typepad и др.


WordPress

WordPress прекрасно подойдет блоггерам, которые не готовы изучать тонкости программирования для поддержки своего сайта. Эта платформа предлагает множество плагинов для совершенствования блога, в том числе для адаптации под мобильные устройства. Некоторые из них уже были рассмотрены, кроме них можно отметить плагины WordPress Mobile Pack и MobilePress. Простой плагин Mobile Press оставляет в мобильной версии сайта только необходимый минимум, тексты и ссылки. Кроме того, он позволяет использовать на мобильной странице рекламные блоки (что зачастую является причиной существования личного блога) Adsense, Buzzcity и др. Плагин WordPress Mobile Pack оставляет всю структуру сайта, изменяя цветовое решение и скрывая правый и левый сайдбар (необходима прокрутка).

Из специфических плагинов для адаптации сайтов можно рекомендовать следующие:

  • Mobile Navigation - создает полноэкранное навигационное меню;


Blogger

Платформа от Google уже позаботилась об авторах блогов и предлагает настроить используемый шаблон для отображения на мобильных устройствах с помощью реализованной системы настроек


Tumblr

Tumblr предлагает построить блог на основе платных и бесплатных тем, часть из которых являются адаптивными - они собраны в специальном разделе Каталога тем - Look Good at any Device


Typepad

Typepad также предлагает адаптивные темы - Gourmet, Sol и Snap. Однако в отличие от конкурентов на этом не останавливается и предлагает Nimble Design Lab, который позволяет сделать собственный адаптивный дизайн, используя фон, шрифты и другие элементы дизайна. Помимо этого, в Классическом строителе тем есть возможность перевести любую из существующих тем в категорию адаптивных.


Не только платформы для блогов

Иногда для блогов используют платформы, предназначенные для любых типов сайтов, например, Drupal - на нем работает сайт Forbes.ru:

В этом случае стратегия обновления будет аналогична любому сайту на Drupal: если версия CMS старше, чем 3.0 - необходимо будет установить компонент Joomla Mobile, если уже используется последняя версия - она является адаптивной по умолчанию.


Мобильный блог на раз-два-три


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

Адаптируем сайт для мобильных устройств: подборка постов
Google больше не будет поисковиком по умолчанию в Android-гаджетах
​Google: мы индексируем контент, даже если в интернете много похожего
Комментарии (0)

Чтобы оставлять комментарии, вам нужно войти в систему

Авторизоваться

К данной записи нельзя добавлять комментарии, т.к. она очень старая.