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

Адаптация сайта для мобильных устройств – скорее необходимость, чем новость. C 2015 ранжирование Google учитывает принцип «mobile first», а с 2016 по такому же принципу заработал «Владивосток» Яндекса. На календаре 2019, и мы не будем тратить время на то, чтобы убеждать вас – вы не попадёте в топ, даже в ближайшие 20 позиций выборки, если ваш ресурс можно увидеть только в десктопе. Отвратительное юзабилити просто приведёт к огромному числу отказов. Если пользователь за первые секунды просмотра сайта не нашёл важную информацию, он ни за что не продолжит мучиться с вашими крохотными меню и разделами. К отсутствию версии для мобильных устройств добавиться низкие показатели по поведенческим факторам.

Мы уверены, что у вас и мысли не было оставлять свой прекрасный контент только для пользователей ПК, ведь вы заботитесь обо всех своих клиентах. К слову, пользователей, которые пользуются поиском через смартфоны или планшеты – более 60%.

Теперь у вас есть два варианта событий – разработать адаптивный дизайн или создать мобильную версию. Что лучше?

Способ первый. Адаптивный дизайн (Adaptive Web Design)

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

Плюсы

Минусы

Единый URL – удобный вариант для продвижения, который избавит от альтернативных страниц в коде и редиректов на мобильную версию на главной странице. Дешевле. Не тратим время и деньги на разработку мобильного сайта. Структура. одна и та же. SEO не надо анализировать и делать проектирование на несколько версий. Google. отдаёт предпочтение такому варианту при ранжировании

Медленная загрузка. Пользователю не отключить «тяжёлый» функционал сайта, будет загружаться вся страница целиком. Что при медленной скорости или низком разрешении – не все элементы будут нормально работать. Качество изображений, иконок и меню оставляет желать лучшего. Несовпадение целей и функционала. Цели обращения к сайту через десктоп или со смартфона могут быть разные. Часть разделов окажутся лишними и будут попросту мешать поиску нужной информации. Нет выбора. В случае с мобильной версией – пользователь может выбрать, чем ему удобнее пользоваться. Сложности с монетизацией. В адаптивных версиях сайта неудобно управлять рекламными форматами Яндекс.Директ или GoogleAdsens.

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

«Отзывчивый» дизайн (Responsive Design – от слова to response – с англ.: «отвечать», «отзываться» автоматически меняется по ширине экрана или окна, плавно меняясь по мере его увеличения или уменьшения. Адаптивный дизайн подстроится только после открытия окна, при этом часть элементов технически являются зафиксированными, а часть гибкими, «резиновыми».

Эксперты не советуют делать все элементы гибкими («отзывчивыми) и использовать их по мере необходимости. Вот некоторые практические советы использования элементов «отзывчивого дизайна».

• Дизайн изображений и блоков

Возьмите за переменную – процент экрана, вместо статических пикселей с координатами по осям.

• Вложенные или объединенные элементы («Nested» – от англ: «гнездиться») – объедините элементы, так они будут уменьшаться, и смещаться одновременно, иначе они могут оказаться в разных частях страницы.

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

Способ второй. Мобильная версия

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

Плюсы

Минусы

Наличие мобильной версии – важный фактор при Google и Яндекс ранжировании. Отличный уровень юзабилити. Нет отвлекающих элементов, неработающих разделов. Только функциональность и простота использования. Быстрая загрузка. Легко менять или даже удалить. Так как сайт существует отдельно «своей жизнью» от основного, то можно вносить изменения, не боясь, что это затронет основной.

Неполный функционал сайта. Пользователь, скорее всего, не увидит некоторых разделов (чаще всего Портфолио или Статьи) и ему придется переходить на основную версию сайта; Несколько адресов. Из-за них путаница при поиске, пользователь может попасть на десктоп. SEO придётся оптимизировать и работать над двумя страницами отдельно, не дублируя контент. Цена. Выше, чем при разработке адаптивного дизайна, плюс дополнительна работа для продвижения всех страниц сразу. Снижение эффекта от внешних ссылок. Часть пользователей рекомендуют вашу мобильную, часть основную.

Как выбрать?

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

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