+7(846)212-97-95

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

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

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


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

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

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

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

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

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

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



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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



Особое внимание в статье поисковик уделяет важности адаптации сайта для успешного продвижения:

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

Заключение

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

Дюгаев Денис
15 марта 2017

Нужна адаптивная вёрстка? Обращайтесь

Не готовы принять решение? Познакомьтесь с нашими работами.