Все посты
3940 Аналитика

Эффективный = мобильный: как адаптировать сайт для смартфонов

Адаптация сайтов для мобильных: различные подходы к реализации и решения от CMS

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


Смартфон - друг человека

В 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, который стараясь быть актуальным предлагает своим клиентам функционал, позволяющий корректировать размещение контента и его размер на экранах мобильных устройств. Однако, результат далеко не всегда соответствует исходному варианту и во многих случаях процесс требует подключения стороннего разработчика в момент создания сайта либо при перевод его с домена конструктора на собственный

Быть или не быть мобильным: вот в чем вопрос

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

Возьмите под контроль продвижение своего сайта
Исправьте ошибки, которые мешают сайту выйти в топ, и вы увидите рост трафика и дохода.
Комментарии (0)
К данной записи нельзя добавлять комментарии, т.к. она очень старая.
🍕 Самостоятельный аудит сайта, часть 3.1 — юзабилити аудит
Говорит юрист: откуда брать картинки, чтобы не попасть под суд, и как защитить свои авторские права
🔥 Самостоятельный аудит сайта, часть 1 — технический анализ