Дизайн мобильной версии

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

Зачем адаптировать сайт

В отчете Digital 2020 говорится о том, что гаджеты для входа в интернет использует 50,1% россиян, при том, что возможность сидеть в сети с мобильного есть у 92% пользователей. Устройства выбираются исходя из целей и времени суток. На работе большинство офисных сотрудников запрашивают информацию в интернете с компьютеров. Однако, приходя домой, пользуются телефонами. Об этом говорит и статистика – около 44% запросов в поисковых системах приходится на десктопы, остальное – смартфоны и планшеты.

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

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

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

 

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

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

  • Оформление – мобильная версия подразумевает создание отдельной для мобильных устройств версии сайта. Ей присваивается адрес с приставкой m., что означает «mobile».
  • Адаптивный дизайн – адаптация содержания ресурса под параметры устройства.
  • Респонсивный дизайн RESS – в коде движка сайта прописывается несколько независимых шаблонов для разных устройств.

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

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

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

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

Каждый из вариантов имеет свои плюсы и минусы. Чтобы окончательно определиться, выбрать адаптивную верстку или заказать дизайн мобильной версии сайта, обратитесь к нам. Специалисты компании «Веб Фокус» в Казани помогут выбрать наиболее перспективный вариант развития ресурса. В случае интернет-магазина, возможно, это будет адаптивная верстка. А сайт СМИ сможет нарастить посещаемость благодаря мобайлу.

Плюсы и минусы видов адаптации

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

Не все из представленных вариантов решают эти задачи:

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

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

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

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

Компания «Веб Фокус» специализируется на том, чтобы сделать сайты для пользователей полезными. За нами: архитектура сайта, развитие, SEO-продвижение, оформление. Мобильная версия сайтов и ее разработка тоже наша работа. Обращайтесь к нам, чтобы клиентам было приятно с Вами сотрудничать!