Более 90% пользователей посещают сайты магазинов и частных мастеров с мобильных устройств. Стандартная WEB-версия ресурса некомфортна для гаджетов, поэтому разработчики уже давно создают сайты, адаптированные под смартфоны. В статье будет разобрано, что собой представляет адаптация, какие преимущества дает и как внедрить на своем проекте.
Содержание:
- Почему важна адаптация сайта под мобильные устройства?
- Варианты адаптации и как их сделать
- Адаптация есть, конверсии — нет, в чем причины?
- А как оптимизировать мобильную версию сайта?
- Заключение
Почему важна адаптация сайта под мобильные устройства?
Бизнесу следует учитывать спрос и потребности целевой аудитории, и подстраиваться под меняющийся рынок. Адаптация под гаджеты необходима по многим причинам:
- Больший охват аудитории.
Пользователи используют гаджеты чаще ПК и ноутбуков, т.к. они компактнее. - Повышение позиций.
Яндекс и Гугл еще с 2014 года начали учитывать интересы пользователей с гаджетами. При ранжировании поисковой выдаче приоритет отдается адаптированным сайтам. Google официально завершил переход на mobile-first индексацию. - Увеличение конверсии.
Покупки и заказы услуг чаще совершаются с мобильных устройств, находясь вне дома.
Очевидно, для таких проектов, как такси, онлайн-кинотеатр или продажа билетов, жизненно необходимо наличие адаптации мобильной версии сайта.
На конец 2023 года все успешные коммерческие проекты, которые находятся в лидерах поисковой выдачи, имеют мобильную версию.
Варианты адаптации и как их сделать
Адаптацию под мобильные устройства можно провести для действующего проекта, или разработать отдельный сайт «с нуля» специально для гаджетов. Оба варианта одинаково эффективны и могут быть задействованы для любого сайта.
Вопрос выбора пути адаптации зависит исключительно от объемов работ, которые потребуется выполнить. Одни проекты не сложно адаптировать, для других проще создать отдельный мобильный сайт.
Изменение дизайна
Данный метод предусматривает работу с готовым дизайном. Подходит крупным проектам с большим каталогом. Структура сайта не затрагивается, изменения затрагивают только код страниц.
В рамках оптимизации можно выполнить следующее:
- Уменьшить размер шрифта.
Пользователи гаджетов визуально ориентируются на изображения, и крупный текст будет только помехой. - Изменить размер иконок.
Изображения категорий и товаров масштабировать до размера, комфортного для просмотра. Картинки со сложной текстурой нужно поменять на простые иконки. - Упорядочить таблицу карточек.
Разместить товары на странице так, чтобы они были хорошо видны и не выходили за правый край экрана. Пользователю при поиске проще дольше прокручивать страницу, чем листать вниз и в бок. - Сократить число ссылок.
Разделы главного меню, каталога и технической поддержки нужно спрятать под кнопку вкладки. Сокрытие разделов существенно освободит экран для карточки. - Упорядочить меню под товар.
В мобильной версии не нужно выводить вместе описание, характеристики, отзывы и др. информацию о товаре. Каждый пункт сделать самостоятельными вкладками. При переключении посетитель попадет в нужный раздел описания.
Когда сайт создан на популярном движке, проблем с изменением параметров не будет. Статистическим лендингам или корпоративным ресурсам можно подключить стороннюю админку для управления.
Если же у сайта нет панели управления, и он создан на собственном движке, почти всю работу по адаптации придется выполнить вручную.
Шаг 1. Автоматическое масштабирование
Первая задача при адаптации сайта — привязать ширину сайта к разрешению устройства. В этом поможет мета-тег viewport, который подстраивает размер страницы. Чтобы растянуть ее под ширину устройства, нужно указать тег width=device-width.
Теперь сайт будет открываться на весь экран гаджета, но этого мало. Элементы страницы остаются неизменными в пиксельном размере. Если разрешение смартфона высокое, на экране отобразится больше товаров, что создаст неудобство. Требуется сделать блоки статичными относительно самого экрана. Для этого задействуется тег initial-scale=1.
Важно! Мета-тег viewport растягивает страницу по ширине для всех устройств. Сайт смогут комфортно смотреть и владельцы планшетов с нетбуками, у которых ширина экрана 768 и 900 пикселей.
Шаг 2. Отображение блоков по типу устройства
Теперь необходимо разбить каталог, чтобы посетителю легко было находить нужный товар. Настройка выполняется под 3 типа популярных устройств:
- ПК и ноутбуки.
На больших экранах оптимально размещать от 4 до 6 товаров в одном ряде. - Планшеты, нетбуки.
Простые товары вроде посуды, канцтоваров и овощей можно разместить в 4 ряда. Если важно показать отдельные элементы лотов (верхняя одежда, перстень) — в 3 ряда. - Смартфоны.
На телефоны можно выводить в ряд не более 1-2 карточек в зависимости от вида товара.
В разбивке карточек каталога поможет таблица стилей. Для удобства можно взять готовые макеты и шаблоны. Установить число карточек по ширине можно и вручную, примеры:
- @media (max-width:768px) {img {width:33%}} — на экране будет отображено по 3 карточки в ширину, оптимально для планшетов;
- @media (max-width:480px) {img {width:100%}} — полное отображение одного товара на странице.
Стили готовых шаблонов также нужно проверить на наличие разбивки для ПК, планшетов и смартфонов.
Шаг 3. Работа с блоками
Для изначально не оптимизированных сайтов некорректное отображение карточек в порядке нормы. Проверить отображение каталога на собственном устройстве или с помощью онлайн-сервисов.
Любые несоответствия нужно выровнять:
- сами карточки;
- иконки внутри карточек;
- блоки с ценами и кнопкой заказа.
При выравнивании необходимо делать ориентацию по родительскому (внешнему) блоку. Например, если фото товара закрывает другой контент (кнопка заказа, цена) или выходит за рамки, размер нужно привязать относительно самой карточки. Нужно открыть таблицу со стилями, найти класс для каждого элемента, и в рамках него прописать пропорции. Например, к блоку карточки и фото привязаны классы div и image соответственно. Код получится следующим:
Img [
width:90%;
height: 60%;
]
Теперь картинка будет занимать часть объема блока карточки. По высоте остается много свободного места для размещения наименования, цены и кнопки заказа.
Если картинки имеют разное соотношение сторон, можно добавить в стили object-fit:contain. Картинка будет отображаться в нужном соотношении без изменения пропорций. Лишние часть изображения обрежется.
Аналогично выполнить привязку к родительскому тегу и выставить соотношение для блока с наименованием и кнопкой заказа.
Шаг 4. Доработка дизайна
Теперь можно перейти к завершающему этапу — изменение размера оригинальных элементов. Нужно просмотреть со смартфона все страницы вне каталога — главная, о компании, доставка, служба поддержки и т. д. Это оригинальные страницы, на которых есть единожды встречающиеся элементы. Слишком крупный или мелкий текст с изображениями меняется следующим образом:
- в HTML-коде найти класс, к которому привязан элемент;
- в стилях перейти в код с классом;
- изменить параметры масштабирования (шрифт, ориентацию) и сохранить.
Переходить к работе с каждым элементом поочередно. Для ориентации берется сама страница, или отдельно создается родительский блок.
На этом работа по адаптации завершена и теперь сайт комфортен для посещения с мобильных устройств.
Разработка с нуля
Более простой и выгодный вариант — создать проект, изначально адаптированный под мобильные устройства. Такой подход практичен по многим причинам:
- популярные CMS и конструкторы предлагают готовые шаблоны под мобильные устройства;
- отсутствует рутинная работа с кодом, настройка выполняется через панель управления;
- можно сразу наполнять подходящим под гаджеты контентом.
Многие движки также поддерживают модули, упрощающие управление адаптивным сайтом.
Единственный минус такого подхода в сложности интегрирования действующего проекта. Сложно подобрать шаблон уже под действующую структуру верстки, еще сложнее оптимизировать большой каталог. У магазина может быть более 1000 лотов, и часть картинок после адаптации придется менять.
Как выбрать платформу под адаптивный сайт?
Лучший вариант — это CMS c поддержкой отдельного управления десктопным и адаптивным сайтом. Такая возможность есть, например, на движке Joomla. Настройки сайта и отображение элементов можно менять, не задев другую версию ресурса. Это очень удобно, т.к. при работе оптимизации не нужно каждый раз смотреть, что произошло на WEB-версии.
Другой важный критерий — это работа с таблицами стилей и версткой. Без доступа к коду нельзя будет расширить функционал. С такими ограничениями даже адаптированный сайт не поддается оптимизации.
Адаптация есть, конверсии нет — в чем причины?
Иногда можно столкнуться с падением трафика и объема заказов после адаптации сайта. Чаще проблема возникает уже у действующих ресурсов, которые ранее создавались под десктопную версию. Причина происходящего бывает в нескольких случаях:
- Неудобный интерфейс.
Сайт получил адаптацию, но не был оптимизирован. На странице небрежное отображение каталога или неудобная навигация, мелкий шрифт. - Потеря позиций.
При адаптации не учтены основные критерии, по которым ранжируются результаты в поисковике. - Особенности ЦА.
Клиентура пользуются стационарными устройствами. Если сайт занимается продажами офисных принадлежностей или компьютерным софтом, основная масса заказов будет совершаться с ПК и ноутбуков. Попытки навязывать адаптированную версию может привести к потере трафика.
На каждый случай нужен конкретный подход.
А как оптимизировать мобильную версию сайта?
При адаптации нужно считаться с тем, что экран смартфона физически (не разрешением) небольшой. Но пользователю нужно четко представить коммерческое предложение. Для вывода карточки предпочтительнее выбирать следующие пропорции:
- 10-15% выделяется под верхнюю шапку (header), в которой поместить название компании и вкладку с меню. Когда у компании есть узнаваемый логотип, вместо названия размещается иконка с контактами (или выбор города, если сетевик).
- 10% отдается под подвал (footer) для размещения иконок меню. Через него посетитель в один клик сможет перейти на главную, в каталог или корзину для оформления заказа. Еще можно добавить ссылку на контакты или поддержку сайта.
- Остальная область сайта выделяется под товар, который можно максимально представить целевой аудитории.
Вся страница с описанием не поместится на экран, но этого и не нужно. Достаточно, чтобы посетитель видел название товара и изображение. Увидев полное отображение, ЦА скорее заинтересуется лотом и совершит заказ.
Пропорции шапки с подвалом стандартизируются для всех страниц. Основная область разбивается в зависимости от характера страницы:
- Главная.
После короткого коммерческого предложения помещается иконка на основной каталог или вкладка с категориями. Ниже размещаются 2 блока карточек с популярными и уцененными товарами в виде карусели. Достаточно фото, наименования и цены товара. Требований к пропорциям нет, но важно все 3 блока отобразить четко, и при этом поместить в экран смартфона. Посетитель должен увидеть их все при переходе на сайт. - Категории товаров.
Размещаются стандартно (с разбивкой, как и для карточек), без оригинальных настроек. Большой каталог на весь экран не поместится, поэтому в начале отображаются наиболее популярные категории. - Оплата и доставка.
На этих страницах рекомендуется автору показать специальные предложения. Если посетитель уже оформляет заказ, значит выше шанс покупки еще одного товара по акции. При этом блок предложений не должен быть впереди окна оформления заказа. Как вариант, можно сначала отобразить информацию из корзины, далее поле оплаты с адресом для доставки в свернутом варианте, и ниже предложения по акции.
Под конец проверить технические параметры сайта и контента — высокочастотные запросы, скорость загрузки, качество изображений и т.д.
Заключение
Адаптация важна любому коммерческому проекту для увеличения трафика и конверсии на сайте. Однако сайт обязан оставаться удобным для использования, а посетитель должен видеть выгодные предложения. Сама по себе адаптация не равна успеху и росту проекта. Поэтому не следует забывать про общую оптимизацию и коммерческий эффект ресурса.
