Все чаще ваш потенциальный покупатель выходит в Интернет с экрана своего смартфона - как изменить свой сайт, чтобы каждый посетитель не только быстро нашел нужную информацию, но и вернулся опять?
Смартфон - друг человека
В Google новый способ взаимодействия с миром через экран смартфона
называют микро-моментами. Теперь от желания до возможности узнать, выучить или купить что-то всего лишь несколько кликов. В результате производителя товаров и услуг ожидает своеобразный естественный отбор: тот, кто не обеспечит своему потенциальному покупателю максимальный комфорт на этом пути - не выдержит и битвы за него.
Статистика категорична: 82% пользователей смартфонов прибегают к помощи гаджета во время принятия решения о покупке, 62% готовы решать внезапно возникшую проблему или задачу немедленно, если это можно сделать с помощью девайса. Импульсивность в принятии решений, скорость и категоричность реакции, чтение на бегу - вот условия, которые должен учитывать создатель мобильного сайта или подобной версии существующего ресурса. На эти особенности ему стоит обратить свое внимание:
- ориентация на дисплеи с низким разрешением;
- finger-friendly дизайн (удобство кнопок и прокруток, ввод данных без помощи мыши и клавиатуры и т.д.);
- основная информация на главной странице и простота навигации в целом;
- сокращение пути до нужной информации (за счет сокращения количества этапов при переходе по гиперссылкам и вложенным меню);
- сверхэффективное использование пространства;
- повышение скорости загрузки, в том числе отказ от технологий, требующих высокой частоты процессора (например flash);
- выбор в пользу файлов, формат который гарантированно воспроизводится с помощью большинства носимых устройств без дополнительного ПО;
- приоритет лаконичного контента перед дизайном.
Поисковики: встречаем пользователя у главного входа
Удобная мобильная страница - хороший способ удержать тех, кто уже узнал о вашем ресурсе, но с ее помощью можно привлечь и тех, кто только задумался о покупке или услуге - пользователей поисковиков. Более того, поисковые ресурсы в заставляют бизнес и разработчиков делать свои мобильные страницы максимально комфортными для пользователя. Они, разумеется, преследуют свои цели - повышение соответствия запросов и поисковой выдачи, подбор наиболее удобных сайтов. Так Google
объявил в октябре 2016 года о новом способе индексации сайтов, приоритетом для которого является информация, полученная с мобильных страниц по сравнению с десктопными. Сейчас новый индекс тестируется на ограниченной выборке пользователей и в случае успешного завершения этого этапа будет запущен по всему миру. Дату этого перехода команда Google обещает объявить заранее для того, чтобы все участники процесса смогли подготовиться к новым условиям.
Яндекс также не отстает от иностранного коллеги, правда вместо пряника сначала предпочитал использовать кнут: в апреле 2015 г. российский поисковик сообщил о том, что ресурсы, которые "обманывают пользователя" (при переходе на мобильную версию он не находит контент, "обещанный" в поисковой выдаче), будут наказываться при ранжировании. Осенью того же года был представлен Яндекс Вебмастер, с помощью которого можно было оценить удобство отображения страницы в смартфоне (раздел "Проверка мобильной страницы"). Примерно в это же время команда российского поискового ресурса объявила о появлении метки "Мобильная версия", которую получат страницы, адаптированные для мобильных устройств, однако позже
отказалась от ее применения вслед за Google. В феврале 2016 года последовал запуск алгоритма "Владивосток", учитывающего удобство просмотра сайтов с помощью гаджета, пообещав, что неоптимизированные страницы не исчезнут из результатов поиска, а только потеряют вес при ранжировании.
Адаптивная верстка или отдельный URL: что выбрать?
Перефразируя тезис некогда известного видеоролика, скажем: при всем богатстве выбора у вас есть 3 альтернативы:
- RWD (адаптивная верстка) существующий сайт будет доработан для того, чтобы "подстраиваться" под условия мобильных пользователей, для пользователей мобильных и десктопных страниц используется один HTML-код;
- RESS (динамический показ): принцип тот же, но вариант отображения определяется на стороне клиента, а не сервера, используется разный HTML-код
- отдельная мобильная страница: будет действовать параллельно с основным сайтом
Кроме того, вы можете сделать мобильное приложение, добавив в него интерактивные элементы или сложную структуру, которые замедлят работу обычного сайта
RWD (англ. Responsive Web Design) означает использование единой архитектуры сайта, которая подстраивается под конкретный режим просмотра (размер, разрешение и ориентация экрана) где бы вы не открывали свой ресурс - на экране гаджета или ПК. В рамках возможностей CSS можно оптимизировать расположение и размер текста и элементов дизайна, размещенных на странице, а также использовать т.н. "умную" разметку. Каждая из этих задач может быть решена разными способами: например, оптимизация размера изображений может быть сделана просто с помощью пропорционального сокращения максимальной ширины изображения, равной 100% в зависимости от ширины экрана (img {max-width: 100%;}) или базироваться на технологии "отзывчивых" изображений, согласно которой не только корректируется размер изображений, но и сжимается их разрешение на маленьких экранах.
RESS (англ. Responsive Design and Server Side) представляет собой вариант адаптивной верстки, при котором режим отображения определяется на стороне сервера и предлагает пользователям мобильных и десктопных страниц разный HTML-код. Соответственно в отличие от базового варианта RWD, при котором вы загружаете все его компоненты с выводом на экран необходимых, технология RESS позволяет сделать выбор еще на этапе загрузки. В этом случае весь спектр инструментов CSS используется разработчиком, и при этом он может легко разделить основной вариант сайта и "облегченный", без сложных скриптов и замедляющих работу элементов. Дополнительным преимуществом этого способа мобильной адаптации можно считать организацию процесса разработки - он позволяет заниматься созданием разных версий сайта (основной, для планшетов и для смартфонов) последовательно.
Отдельная мобильная страница позволяет оставить для просмотра с экрана смартфона только самое необходимое, заменив контент, изображения, дизайн и верстку так, как того требуют параметры экрана гаджета и условия работы с ним. Для адаптации уже существующих ресурсов такой вариант кажется наиболее удобным, однако не стоит забывать, что организация отдельного сайта, даже на основе уже созданных элементов, потребует большого объема работы с внутренней структурой и элементами дизайна, которая уже проводилась при создании основной версии. Специальные атрибуты, с помощью которых браузер смартфона и Google-бот будет определять какую из версий отображать подробно расписаны в рекомендациях разработчикам от команды поискового гиганта.
Решение задачи от разных CMS
Эра перевода сайтов на мобильные рельсы не могла пройти мимо CMS - внушительный перечень инструментов адаптивной верстки является в данном случае одним из серьезных аргументов в пользу того или иного движка.
Wordpress
Сфера применения WordPress уже давно вышла за пределы блогов и простых информационных сайтов, однако корректное отображение текстов на экранах гаджетов как никакой другой элемент нуждался в адаптации. Все просто: у пользователя может не быть времени на то, чтобы обнаружить нужную информацию при стандартном размещении контента и неудобной прокрутке. Добавьте к этому импульсивность в принятии решений, о которой упоминалось выше и можете считать, что потенциальный клиент уже уходит к конкуренту. В большинстве тем WordPress используется адаптивный дизайн (они отмечены тегом "responsive layout" на официальном сайте, а также чаще всего содержат в названии пометку "responsive" или "mobile"). Если вам нужна мобильная версия сайта, однако изменять тему десктопного сайта вы не хотите - можно воспользоваться одним из плагинов платформы. Например:
- WPTouch - позволяет создать отдельную мобильную версию сайта, выбрав одну из мобильных тем. Основной сайт при этом останется без изменений;
- JetPack - включает более 30 модулей для подключения нужных вам функций мобильной страницы, например вставка сокращенного кода видео, подписка по e-mail или статистика просмотров без дополнительной нагрузки на сервер
- WP Mobile Detect - похож на WPTouch, но не имеет ограничений по функционалу в бесплатной версии (только по перечню тем)
Joomla
Разработчики этого движка позаботились о пользователях заранее - начиная с версии Joomla 3.0. сайт уже оптимизирован под мобильные устройства. Если же используется более ранняя версия, то ее можно обновить, решив при этом и задачу с оптимизацией. Можно справиться с ней и без обновления, выбрав одно из расширений, предназначенных для этого - они расположены в разделе "Mobile" каталога расширений платформы.
OpenCart
Эта CMS, предназначенная специально для интернет-магазинов, не предполагает большой перечень функций "из коробки" - доработки для адаптации чаще всего проводятся дополнительно. Однако для OpenCart также существуют бесплатные адаптивные шаблоны, включающие модули для оптимального отображения акций магазина, разделения товаров на группы и т.д.
Drupal
Создатели Drupal предлагают на выбор несколько готовых тем, созданных с учетом адаптивного дизайна (раздел "
Responsive themes" руководства по адаптивному дизайну), а также предлагают веб-разработчикам советы по созданию собственных шаблонов и модулей, взаимодействующих с любым устройством.
Bitrix
Битрикс предлагает использовать отдельные шаблоны для основного сайта и версии для мобильных устройств. Часть шаблонов уже предусматривают адаптивную верстку, часть - следует доработать. Кроме того отдельный продукт «1С-Битрикс: Мобильное приложение» позволяет разработчикам сделать собственное приложение на основе HTML5
Magento
Как и при работе с другими CMS можно воспользоваться готовыми продуктами либо доработать существующий. Magento предлагает на выбор платные и бесплатные темы, часть из которых уже адаптирована для отображения на экране смартфона - они находятся в разделе
Mobile Themes. Для доработки существующего сайта потребуется коррекция на уровне CSS.
Wix
В качестве примера конструктора сайтов можно привести Wix, который стараясь быть актуальным предлагает своим клиентам функционал, позволяющий корректировать размещение контента и его размер на экранах мобильных устройств. Однако, результат далеко не всегда соответствует исходному варианту и во многих случаях процесс требует подключения стороннего разработчика в момент создания сайта либо при перевод его с домена конструктора на собственный
Быть или не быть мобильным: вот в чем вопрос
Ответ в данном случае однозначен: быть и как можно быстрее! Однако следует помнить, что пользователь приходит на сайт с конкретной задачей: найти информацию, посмотреть фотографии или видео, совершить покупку. Представьте себя на его месте, зайдите на страницу с помощью смартфона и пройдите его путь, шаг за шагом. Если вам удалось сделать это быстро, без препятствий, легко ориентируясь в контенте и перемещаясь внутри - поздравляем, в этой борьбе преимущество на вашей стороне. Пока...
