Мобильная адаптация сайта: актуальность и способы реализации

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

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

О том, почему важно иметь адаптированный сайт и что лучше: мобильная версия или адаптированный дизайн, поговорим далее.

Адаптивный сайт: почему это так важно в современном цифровом мире

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

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

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

Сейчас около 60 % населения Земли являются активными пользователями мобильных устройств, и более 72 % всех юзеров заходят в интернет исключительно через смартфоны. Значительная часть потенциальных клиентов может быть потеряна, если не заботиться о комфортном взаимодействии пользователя с функционалом и контентом сайта. Удобный UX (логичная навигация, адаптированный дизайн, скорость загрузки страницы, и т. д.) значительно повышает лояльность аудитории, способствуя росту конкурентоспособности.

Отсутствие адаптации воспринимается негативно — процент отказов стремительно растет.
Рост конверсии и прибыли

Качественное мобильное представление сайта позволяет потенциальным клиентам легко находить нужную информацию, добавлять товары в корзину, совершать покупки и другие целевые действия, способствуя увеличению прибыли компании. Продажи в области мобильной электронной коммерции сегодня составляют свыше 60 % от всего объема мировых онлайн-покупок.
Повышение позиций в поисковой выдаче (mobile-first indexing)

С июля 2018 года Google запустил алгоритм, выстраивающий поисковую выдачу по принципу Mobile-first (mobile-first indexing). Это значит, что выше в выдаче показываются те сайты, у которых есть оптимизация под мобильные устройства. При отсутствии адаптива Гугл рекомендует создать его (оптимизировать верстку или разработать новые дизайн-макеты под разные устройства) либо сделать отдельную мобильную версию сайта с собственным поддоменом.

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

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

Оценить оптимизацию сайта для мобильных устройств можно в Search Console с помощью инструмента Mobile-Friendly и Яндекс.Вебмастере.

На что смотрят поисковики

Скорость загрузки страницы.

Контент. Он должен быть читабельным на небольших экранах, без масштабирования.

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

Удобная навигация по сайту. Навигационная структура должна быть простой и интуитивно понятной мобильному пользователю.

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

Безопасность сайта.

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

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

Больше статей на схожую тематику:

Способы адаптации: адаптивный дизайн/адаптивная верстка (Mobile-first) или мобильная версия сайта

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

Адаптивный дизайн/Адаптивная верстка (Mobile-first)

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

Резиновая верстка

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

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

Затем появились первые мобильные браузеры. Стало необходимо делать акцент на вертикальном расположении контента и сенсорном управлении. Так родился новый метод – адаптивная верстка»

Адаптивный (Adaptive) веб-дизайн (подход был назван по книге Аарона Густавсона «Адаптивный веб-дизайн») предполагает гибкую адаптацию сайта для разных устройств и браузеров. Суть способа заключается в создании отдельных фиксированных дизайн-макетов с привязкой к конкретным разрешениям (320, 480, 760, 960, 1200 и 1600 пикселей) и устройствам (компьютер, планшет и смартфон). Переключение стилей происходит с помощью JavaScript от одной контрольной точки к другой, то есть между одним фиксированным макетом и другим. А то, что между ними, было неважно. Другим альтернативным подходом стала «респонсивная верстка».

Респонсивная верстка

Отзывчивый (Responsive) веб-дизайн (получивший имя по одноименной книге Итана Маркота) представляет собой что-то вроде сочетания резиновой и адаптивной верстки.

Метод опирается на резиновый макет (указание ширины в процентах или относительных единицах), гибкие изображения и медиавыражения (CSS Media Queries – специализированные правила CSS, позволяющие создавать инструкции для переопределения стиля элементов в зависимости от разрешения экрана). Изменения сетки происходят плавно, с ориентацией не на устройство, а на содержимое. Такой макет удачно выглядит не только на конкретном устройстве, но и в любой точке между ними.

Сегодня эти методы прекрасно сочетаются, и уже нет четкой границы между ними, они сосуществуют под одним широким определением «адаптивная верстка» или «адаптивный дизайн».

Mobile-first (сначала мобильные)

Поскольку изначально вся разработка веб-ресурсов шла для компьютеров, основой создания адаптивности была стратегия Desktop-first (сначала для компьютеров). Но теперь, когда эволюция привела к повсеместному использованию мобильных устройств и ранжирование сайтов пошло по принципу mobile-first indexing, уже практически базовым стал другой подход – Mobile-first (сначала мобильные).

дизайн Desktop-first и Mobile-first

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

Суть подхода: сначала разрабатывается дизайн под мобильные устройства — учитывается поведение пользователей в условиях ограниченного пользовательского внимания и пространства экрана. А после этого он масштабируется для десктопов.

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

Основные преимущества разработки по стратегии mobile-first

Проектирование с фокусом на мобильный UX — с ограниченным пространством и возможностями. Адаптированный в вертикальный формат контент, крупные размеры шрифтов, кликабельность и заметность кнопок, адекватное количество призывов к действию и маркетинговых окон, простое навигационное меню, удобное сенсорное управление, иерархия информации, акцент на важном без лишнего визуального шума, оптимизированные формы обратной связи – все это создает лаконичный, чистый и интуитивный интерфейс страницы.
Улучшение скорости загрузки. Поскольку загружается сначала контент и функционал для мобильных, растет производительность и скорость загрузки страницы.
Обеспечение удобной работы с SEO. Сам Гугл рекомендует в условиях нового алгоритма индексирования (mobile-first indexing) использовать адаптивный дизайн, поскольку работать с единым url-ом в разы легче, чем с дополнительным сайтом мобильной версии. Ведь при наличии грамотной адаптивной верстки и эквивалентности контента в десктопной и мобильной версии, новый принцип индексирования не сильно влияет на эффективность ранжирования, и работы с SEO не вызовут дополнительных трудностей. Могут потребоваться лишь небольшие стандартные доработки по оптимизации сайта (скорость и производительность, удобство навигации). У нас есть чек-лист по оптимизации мобильного сайта.

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

Цена

Поскольку довольно много времени уходит на разработку грамотного UX мобильной версии, стоит он дороже, чем Desktop First (дешевле, конечно, чем мобильная версия, но об это позже).
Особенности сайта

Mobile-first не подойдет для создания сайтов с более сложным набором функций, предполагающих взаимодействие чаще через ПК. Например, B2B-сайты с многоуровневым каталогом и сложным процессом оформления заказа или сайты корпоративных компаний с CRM-системой — более подходящим и оправданным методом в таком случае окажется Desktop First.

Но выбирать стратегию разработки адаптивного дизайна в любом случае следует после анализа целевой аудитории, трафика и особенностей бизнеса. Mobile-first станет верным решением, если:

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

А что там по мобильной версии?

Примеры роста кликов, конверсий, заказов и прибыли:

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

Часто на десктопной версии сайта можно встретить ссылку: «Перейти на мобильную версию сайта». Эта ссылка открывает отдельный мобильный сайт с собственным URL-адресом (например, m.vk.com для Вконтакте), более легкий и удобный в использовании со смартфонов и планшетов. Отличия от основной версии могут быть значительными, ведь нет никаких ограничений в проектировании сайта с нуля.

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

Плюсы:

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

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

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

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

Однако данный способ адаптации имеет ряд существенных недостатков:

дорог в реализации и обслуживании, ведь создать и поддерживать придется фактически два сайта;

изменения придется вносить на оба сайта, если не используется общая база данных;

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

наличие отдельных поддоменов усложняет сохранение истории посещения страниц;

появляется ряд неудобств для SEO-продвижения и оптимизации, в частности:

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

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

связать версии сайта между собой: на страницах мобильной версии указать канонические ссылки на страницы основного домена (тег rel=«canonical»), на основном домене – разместить ссылку на альтернативную версию страницы (тег rel=«alternate»);

добавить поддомен в панель Яндекс.Вебмастера и Google Search Console как отдельный сайт, подтвердить права, настроить регион, sitemap.xml, robots.txt, основное зеркало — с https или без него;

проверить корректность переадресации с полной версии сайта на мобильную;

проверить идентичность всех заголовков, метатегов, title, description, теги meta с атрибутом robots, совпадение всех структурных данных;

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

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

Что выбрать: мобильную версию сайта или адаптивный дизайн со стратегией Mobile-First

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

	Адаптив Mobile-First	Мобильная версия
Удобство, UX	И адаптивная верстка сайта, и отдельная мобильная версия могут полностью удовлетворить потребности мобильных пользователей в качественном юзабилити.
Скорость загрузки	Ниже. Несмотря на то, что контент и функционал прогружается от мобильной версии по траектории масштабирования, страницы в любом случае содержат код для всех типов устройств.	Выше. За счет неограниченной возможности урезания функционала, мобильная версия может быть суперлегкой.
SEO-оптимизация	Проще. Гугл рекомендует. При профессиональной реализации мобильного адаптива повышается позитивный мобильный пользовательский опыт, который значительно улучшает показатели ранжирования сайта поисковыми алгоритмами. Все версии сайта на одном домене, поэтому дальнейшие работы по SEO-оптимизации и SEO-сопровождению не вызовут дополнительных трудностей, не потребуется никаких редиректов и дополнительных настроек.	Сложнее в разы. Гугл не особо рекомендует. Основная версия и мобильный сайт – два самостоятельных ресурса с разными адресами, поэтому их продвижение будет происходить отдельно друг от друга. Без осуществления определенных работ, могут возникнуть серьезные проблемы с индексацией в поисковых системах.
Стоимость	Индивидуально по запросам, но, как правило, ниже. Разработка и обслуживание одного сайта на одном домене обойдется дешевле.	Индивидуально по запросам, но, как правило, выше. Создание двух отдельных сайтов выйдет в копеечку, а их сопровождение – тем более, ведь обновлением контента, оптимизацией и продвижением придется заниматься на обоих сайтах параллельно.
Уникальность мобильного контента, функционала	Относительная. Все версии сайта неразрывно связаны между собой, можно лишь менять и оптимизировать, но кардинально изменить опциональный набор для мобильной и десктопной версии нельзя. Но это и преимущество, ведь эквивалентность контента влияет на показатели ранжирования.	Практически абсолютная. На отдельном сайте можно сделать все что угодно, в мобильной версии всегда можно сделать уникальные функции и особый контент только для мобильных пользователей. Плюс рекламу можно запустить только на мобильный сайт.

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

Однако следует отметить, что адаптивный дизайн Mobile-First все же предпочтительнее и на шаг впереди отдельной мобильной версии. Да и прогресс не стоит на месте. На сегодняшний день самого «адаптивного дизайна», при котором оптимизация контента происходит в браузере пользователя, уже становится все меньше. На повестку дня выходит использование технологии RESS (Responsive Design + Server Side) — достаточно сложного в реализации способа, сочетающего адаптивный дизайн интерфейса (responsive design) с серверной оптимизацией отображения страниц (server-side), что позволяет выполнять часть задач при работе с адаптивным сайтом за счет ресурсов серверной части (то есть сервер, определив тип устройства пользования, отправляет соответствующую устройству версию страницы). Но это уже отдельная история.

Заключение

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

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

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