Адаптация вёрстки сайта под мобильные устройства

Количество пользователей смартфонов растёт с каждым годом. В 2014 году мобильными устройствами в мире пользовались 1,6 млрд. человек. К 2020 году этот показатель возрастёт в 2 раза.

Россия не сильно отстаёт от мировых тенденций:


(ссылка на график прироста пользователей смартфонов в России)

Каждый второй россиянин использует смартфон. К 2020 году он будет у 65% населения РФ.

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

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

А доставку воды, кроссовки или подарок на ДР уже можно быстро искать в такси по дороге на работу.

Адаптивная вёрстка vs. мобильная версия сайта

За время работы мы заметили, что люди часто путают эти понятия. Если коротко, адаптивная вёрстка (или адаптивный дизайн) – это параметры кода, которые закладываются при создании сайта, и позволяют ему подстраиваться под размер экрана пользователя. Сайт сам определяет ширину экрана в пикселях и адаптирует контент и навигацию под комфортный для пользователя формат.



Мобильная версия сайта – это отдельный сайт, разработанный специально под аудиторию смартфонов. Его размещают на отдельном поддомене (например, m.example.ru).


В отличие от адаптивной вёрстки, мобильная версия разрабатывается под задачи пользователя смартфона, которые отличаются от задач пользователя сайта на десктопе.

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

Кроме того, из-за отсутствия лишнего контента мобильная версия будет быстрее и «съест» меньше трафика. Но мобильный интернет становится быстрее и дешевле. Так что, это преимущество постепенно теряет вес.

А адаптивная вёрстка имеет ряд преимуществ, от которых зависят результаты продвижения сайта. Итак:

  1. Стоимость разработки. Сайт с адаптивной вёрсткой остаётся одним сайтом. А мобильная версия – это отдельный ресурс, который требует отдельного проектирования, создания макетов, вёрстки и тестирования. В итоге, сочетание «сайт + мобильная версия» выходит дороже «адаптивного сайта».

  2. Стоимость рекламы. Сервисы Яндекс Директ и Google Adwords размещают рекламу на аудиторию мобильных устройств. Мобильная версия предполагает поддомен, а значит при настройке рекламы трудозатраты подрядчика будут удваиваться. Стоимость настройки и ведения рекламы возрастет.

  3. Стоимость поддержки. Аналогично предыдущему пункту, трудозатраты на поддержку двух версий выше, чем на одну.

  4. Нюансы SEO-оптимизации. Поисковые системы не любят дублирующийся контент. А из-за двух версий, этого не избежать. Из-за этого оптимизаторы вынуждены заниматься дополнительными настройками. Это увеличивает трудозатраты и бюджеты продвижения.

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

Адаптивная вёрстка vs. мобильное приложение

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

Мобильное приложение подойдет для выполнения пользователями отдельных задач.

Пример: Компания занимается доставкой воды. Можно создать мобильное приложение для постоянных клиентов. Им будет достаточно войти в приложение, выбрать свой стандартный заказ (или быстро сформировать новый) и отправить заказ менеджеру с уже прописанными адресами и временем доставки.

Подобный сервис, в том числе, удержит клиента и сократит затраты на обработку заявок.

Адаптивная вёрстка и поисковое продвижение

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

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

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

СНедавно Яндекс анонсировал отказ от метки «мобильная версия» в результатах поиска. Доля мобилопригодных сайтов в февраля 2016 года увеличилась в 2 раза. Такие сайты расположены на верхних позициях, а значит подобная метка уже не актуальна:



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

«…мы продолжим учитывать адаптированность для мобильных устройств как фактор ранжирования поисковых результатов».
Яндекс

Заключение

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

Предыдущая статья
Ремаркетинг (ретаргетинг)
Вы возвращаете "почти покупателей" на сайт?
Если нет, прочтите эту статью.
Следующая статья
Показатели качества интернет-рекламы: CPA
CPA - это оценка рекламной кампании по выполнению посетителями сайта целевых действий. Как этот показатель рассчитывается?

Отправьте заявку

Мы свяжемся с вами в течение рабочего дня

Отправьте заявку

И мы свяжемся с вами в течении рабочего дня

Благодарим Вас за обращение.
Мы скоро с Вами свяжемся.