Адаптивная верстка или мобильная версия?

Каждый третий посетитель сайтов — пользователь Интернета на мобильном устройстве. Такова официальная статистика. Ее признают и крупнейшие поисковые системы «Яндекс» и Google, которые с особой тщательностью приступили к проверке ресурсов на наличие версий, адаптированных под карманные девайсы.

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

Время диктует правила, или Как выжить в век тотальной мобилизации

В конце 2015 года исследовательская компания TNS опубликовала результаты проекта Web Index , посвященного изучению поведения интернет-аудитории в России. Оказалось, что во втором полугодии 2015 года 64% пользователей каждый день выходили в сеть с мобильных устройств. Причем, визитов со смартфонов было в 2 раза больше, чем с планшетов.

Не менее убедительную статистику представил сервис MobilizeToday.ru. Оказалось, что 46% посетителей предпочитают не заходить на сайт с неудобной навигацией. Из всех остальных 23% немедленно покидают такой ресурс и только 31% остаются более или менее лояльными.

Все растущую активность среди пользователей смартфонов и планшетов подтверждают и поисковые системы. По данным «Яндекс.Метрики», треть всех запросов в строке поиска вводятся с мобильных устройств. Тот факт, что карманные девайсы покоряют мир, официально подтвердил и другой гигант — Google, введя в апреле 2015 года новый алгоритм ранжирования поисковой выдачи на мобильных устройствах. Отныне сайты, у которых нет мобильной версии или адаптивной верстки, автоматически опускаются в хвост поисковой выдачи.

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

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

• Удобство навигации и действий. Пользователь не промахивается, нажимая на кнопки, не увеличивает поле ввода, чтобы ввести туда текст.
• Развитие электронной коммерции. Карточка заказа полностью адаптирована под мобильное устройство: удобно просмотреть, выбрать, заказать.
• Отсутствие необходимости оплачивать разработку приложений для разных платформ. Сайт будет открываться в браузере на любом устройстве.
• Большая вероятность спонтанных покупок. Мобильные сайты всегда рядом с пользователем, в том числе в ситуациях, когда ему неожиданно захотелось что-то приобрести.

На крупнейшем в СНГ ресурсе для IT-специалистов «Хабрахабр» приведены отзывы сотрудников различных западных компаний, которые отмечают, что после верстки сайта под мобильные устройства конверсия заметно выросла. Цифры приводятся разные: от 13 до 400%. Можно говорить о том, что результат будет зависеть от качества адаптивной или мобильной версии, продуманности и отраслевой принадлежности сайта.

Для создания ресурсов, дружественных к мобильным гаджетам (mobile-friendly), используют две основные стратегии. Это адаптивная верстка и разработка мобильной версии сайта. Первая предполагает создание страниц, которые автоматически подстраиваются под размеры экрана того устройства, с которого пользователь вышел в Интернет. Сайты с адаптивной версткой, которую непрофессионалы часто путают со схожей технологий RWD (Responsive Web Design — отзывчивый веб-дизайн), одинаково удобно посещать как со стационарного компьютера, так и с планшета или смартфона. Для просмотра разных макетов страницы используется один и тот же HTML.

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

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

Мобильная версия сайта: прожиточный минимум

Речь идет о самостоятельном проекте, который требует разработки отдельного дизайна, оптимизации контента и проработки юзабилити. Разработчик должен передать важную для компании информацию с помощью всего одной «колонки». Функционал сокращается, меняется структура. С полноценной версией мобильную объединяет только дизайн и, возможно, наименования разделов.

Как это работает?

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

Варианты верстки мобильной версии сайта

Разработка включает в себя несколько этапов:

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

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

Затраты времени

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

Цена вопроса

Стоимость мобильной версии сайта заметно ниже, чем разработка мобильного приложения или создания полноценного ресурса. Так, одностраничный мобильный сайт можно изготовить за 20 тысяч рублей, многостраничный — за 40. Мобильная версия с уникальным дизайном обойдется заказчику в сумму от 30-ти тысяч рублей.

Плюсы подхода

Мобильная версия обладает очевидными преимуществами:

• Автономность работы. Десктопную и мобильную версии можно менять независимо друг от друга.
• Быстрое время загрузки. Сокращения количества запросов к серверу, оптимизация и сжатие кода.
• Удобная навигация для работы на смартфоне или планшете.
• Минимум отвлекающей информации, пользователю доступен только наиболее важный функционал.

Минусы подхода

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

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

Для кого подойдет решение?

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

А что с конверсией и CTR?

Зависимость конверсии от адаптивности ресурса к мобильным экранам изучали в своих исследованиях Google и Calltouch . Они совместно отобрали 1,5 тысячи сайтов из 20-ти отраслей и провели тестирование с помощью сервиса Google Mobile-Friendliness. Оценивали, насколько ресурс удобен для пользователей мобильных устройств. Оказалось, что конверсия с адаптированных ресурсов (мобильных сайтов) на 50% выше, чем с неадаптированных.

Каждый сайт также проверили через Google PageSpeed Insights — сервис для определения скорости загрузки. Дополнительные исследования на KissMetrics выявили, что 46% пользователей ждут, пока загрузится сайт, не более 10-ти секунд. Еще 16% готовы потерпеть 15 секунд, после чего покидают так и не открывшуюся страницу. Высокая скорость загрузки, которая входит в число преимуществ мобильной версии сайта, положительно сказывается на конверсии и CTR.

Примеры успешной реализации

В настоящее время мобильные версии функционируют у таких крупных проектов, как «Леруа Мерлен», «Эльдорадо», Ozon, «Финам», Toyota Motor и многих других. Примером практического эффекта от использования мобильной версии может служить опыт американской компании TicketsNow, которая занимается продажей билетов на различные мероприятия. В течение первого месяца после запуска мобильной версии конверсия выросла на 50%, продажи — на 100%, средний чек — на 8%.

Высокой популярностью пользуются мобильные версии новостных порталов и информационных агентств: BBC, Lenta.ru и других, где ключевым фактором выступает время загрузки конкретной статьи. Оно составляет от 1,5 до 3,5 секунд, что меньше, чем в стандартной версии сайтов.

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

Адаптивная верстка, или Dolce vita

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

Ликбез для «чайников», или В чем особенность технологии

Настройка макета при адаптивной верстке сайта обычно происходит на CSS с помощью медиазапросов с учетом размера области просмотра. Веб-страницы при отображении на ПК, планшете, телевизоре, смартфоне имеют один и тот же HTML.

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

Как сделать адаптивную верстку сайта?

Адаптивная верстка подразумевает прохождение нескольких этапов.

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

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

Затраты времени

Сделать адаптивную верстку сложнее, чем стандартный десктопный или тем более мобильный сайт. При проектировании время возрастает примерно на треть. В 1,5 раза увеличивается время верстки каждого макета и тестирования, в 2 раза — отладки.

Смета

Временные затраты напрямую связаны с ростом цен на услуги разработчиков. Стоимость также определяет дизайн, интеграция с веб-версией, отдельная верстка для планшетов и смартфонов и т.д. Цена на адаптивную верстку на 30–100% выше стоимости создания статичной верстки. Так, разработка простого ресурса и дизайна обойдется в 30 тысяч рублей и выше. Сложный адаптивный ресурс — в 100 тысяч рублей.

Неоспоримые преимущества

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

• единый URL у обычной версии и страницы с адаптивной версткой, перенаправление пользователей не требуется;
• оптимально отображение страниц с сохранением всех элементов и полного функционала;
• сохранность содержимого контента, отсутствие дублирования на второй версии, возможность SEO-оптимизации;
• улучшение поведенческих метрик сайта.

Ложка дегтя

Недостатки адаптивного дизайна:

• высокая трудоемкость процесса;
• высокая цена (в сравнении с ценой разработки мобильной версии).

Для кого подойдет решение?

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

А что с конверсией и CTR?

Показатели конверсии при адаптации сайта к мобильным устройствам растут, это мы отмечали ранее. Для еще большего увеличения «полезности» ресурса для заказчиков можно заменить некоторые элементы сайта. Например, длинные статьи — видеофайлами. Слишком большое количество контента путает потребителя, снижает интерес к сайту и в конечном итоге оборачивается упадком.

Примеры сайтов с адаптивной версткой

Адаптивная верстка идет «по умолчанию» к подавляющему большинству создаваемых ныне сайтов. Есть примеры проектов, которым после перехода на адаптированную версию удалось добиться ощутимого роста прибыли. Так, в компании O’Neill Clothing отмечают, что сайт стал более живым и дружественным, что позволило на 65% увеличить конверсию, на 112% — количество транзакций и на 101% — выручку. Skinny Ties использовала адаптивные технологии для создания прогрессивной платформы, сайт стал компактным и консистентным. За три месяца выручка возросла на 42%, показатель отказов снизился на 23%, на 44% выросла средняя длительность пребывания пользователей на сайте.

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