По данным сервиса «Яндекс.Радар», доля посетителей сайтов с мобильных устройств составляет 55,9%. На протяжении последних пяти лет доля mobile-трафика ежегодно увеличивается минимум на 10%.
Несмотря на тенденции изменения структуры интернет-трафика, на многих сайтах существуют недочеты и ошибки мобильных или адаптивных версий. О наиболее распространенных мы поговорим далее (некоторые из ошибок затрагивают и desktop-версию).
Мобильной или адаптивной версии сайта нет
Примеры отображения мобильной версии сайта из блога Яндекса для вебмастеров
Как бы парадоксально ни звучало, но самой главной ошибкой адаптивной или мобильной версии сайта является ее полное отсутствие.
Большинство актуальных шаблонов для распространенных CMS (1С-Bitrix, WordPress, CS-Cart и т.д.), а также конструкторы сайтов содержат в себе адаптивную версию сайта по умолчанию. Такая версия не всегда хорошо проработана с точки зрения дизайна, но в целом удобна для пользователей и выдерживает критику.
Другое дело – самописные движки (где разработчик не сделал адаптив или мобильную версию сайта из-за своей лени или обиды на заказчика) и шаблоны сайтов (в особенности бесплатные, созданные в 2010-х и не видевшие обновлений многие годы).
Если вы владелец сайта на самописном движке, который не заплатил разработчику, или сайта на раритетном шаблоне с 3 сайдбарами, то необходимо срочно проверить наличие мобильной или адаптивной версии. Вот прямо сейчас!
Сделать это можно следующими способами:
- https://search.google.com/test/mobile-friendly – тест от Google (иногда не прогружает стили, поэтому проведите проверку 3–5 раз для большей точности).
- https://webmaster.yandex.ru/site/tools/mobile-friendly/ – тест от Яндекса (не забудьте подтвердить права на сайт перед проверкой: проверить можно только свои сайты).
- Открываем сайт, нажимаем F12 или Shift + Control + I, чтобы вызвать консоль, после чего нажимаем Shift + Control + M. Это позволит с помощью инструментов браузера проверить наличие мобильной/адаптивной версии сайта (в некоторых случаях нужно перезагрузить страницу с помощью F5).
- Самый надежный и информативный – открыть сайт на смартфоне и/или планшете.
Долгая загрузка страниц
Тише едешь – дальше будешь в результатах поисковой выдачи и без заказов.
Результат теста сайта amazon.com с помощью сервиса Google PageSpeed Insights
Низкая скорость загрузки любой версии сайта негативно отражается как на позициях в поисковых системах, так и на его конверсионности. Учитывая долю мобильного трафика и тренды по ее ежегодному увеличению, скорость загрузки именно мобильной/адаптивной версии выходит на передний план.
По данным исследования компании Unbounce, время загрузки сайта более 3 секунд снижает вероятность покупки у 45,4% пользователей и снижает вероятность повторного посещения сайта у 36,8%. Несколько лишних секунд при загрузке сайта могут лишить половины потенциальных продаж.
Причин длительной загрузки мобильной/адаптивной версии сайта множество, вот самые частые:
- Большой размер (в Kbyte) используемых изображений.
- Синхронная загрузка изображений и всего мультимедийного контента.
- Загрузка большого количества скриптов (иногда совершенно ненужных для мобильной/адаптивной версии).
- Общий размер страницы (например, в интернет-магазине страница с 10 товарами будет загружаться быстрее, чем страница с 50 товарами, при прочих равных условиях).
- Проблемы с хостингом.
Если вы успеваете решить судоку, пока загружается сайт, то это плохой знак. В других случаях не будет лишним проверить скорость загрузки. Вот несколько сервисов:
- Google PageSpeed Insights.
- Pingdom Tools.
- Gtmetrix.com.
Отсутствуют кликабельные контакты или нет виджетов для быстрой связи
Скажи мне, как с тобой можно связаться, и я скажу, кто ты.
Кнопка обратной связи от сервиса Jivosite
Чувство комфорта у посетителя адаптивной/мобильной версии сайта должно быть непрерывным. Начиная с самого наличия адаптива или мобильной версии сайта с высокой скоростью загрузки и заканчивая множеством вариантов коммуникации с компанией.
Об удобных и неперегруженных формах заявок поговорим в следующем пункте. Здесь же рассмотрим альтернативные способы связи.
- Номер телефона на сайте (в header или footer) должен быть кликабельным, то есть при нажатии на него на телефоне должен происходить набор либо предложение совершить звонок.
Иногда контакты на сайте размещены изображением, что никак не позволит посетителю быстро связаться с компанией. Не делайте так.
- Online-чат с момента своего появления пользовался популярностью у посетителей сайта, особенно у тех, кто не хотел сразу же делиться своей контактной информацией. Действительно, это отличный способ проконсультировать стеснительного потенциального клиента.
К сожалению, на большинстве сайтов online-чат перестал быть online-чатом. После автоматического приветствия и получения сообщения от посетителя также автоматически запрашивается его контактная информация. И никакой консультации online. Доверие к эффективности чатов на сайте у посетителей потихоньку угасает.
Если используете online-чат, будьте готовы оперативно отвечать на вопросы посетителей сайта. В ином случае вы получите только безмолвный негатив.
- Виджеты мессенджеров (Telegram, WhatsApp, Viber) пришли на частичную замену online-чатам. Плюсом при их использовании является получение контактов посетителя при начале коммуникации, что очень удобно при дальнейшем диалоге с потенциальным клиентом.
Минус использования таких виджетов состоит в том, что посетитель уходит с вашего сайта в мобильное приложение мессенджера и может не вернуться назад на сайт (но это не проблема, ведь вы узнаете его контактный номер телефона).
Использовать подобные виджеты можно как по отдельности, так и комплектом, предлагая посетителю сайта наиболее удобный для него способ связи.
Длинные или перегруженные формы заявок
У меня к вам всего несколько вопросов, несколько десятков вопросов…
Пример формы обратной связи из блога Яндекса для вебмастеров
Количество полей для заполнения в форме заявки на сайте обратно пропорционально ее конверсионности. Другими словами, чем больше спросите, тем меньше ответов получите.
Отчасти причина кроется в человеческой лени. Когда пользователь видит список из нескольких десятков пунктов для заполнения, его желание тратить силы и время многократно уменьшается (с физиологической точки зрения мозг таким образом экономит еще чуть-чуть энергии).
Набор полей для заполнения различается в зависимости от типа формы, однако есть некоторые совершенно ненужные вопросы к пользователю.
Примеры малополезной и лишней информации в формах заявок:
1. Форма заказа обратного звонка (ненужное зачеркнуто):
- Имя.
Фамилия.Отчество.- Телефон.
Желаемое время звонка.E-mail.
Все, что нужно для звонка, – это номер телефона. Имя – стандартный вопрос, но не обязательный, так как познакомиться можно во время разговора.
2. Форма заказа товара / услуги без возможности оплатить online (ненужное зачеркнуто)
- Имя.
Фамилия.Отчество.- Телефон.
- E-mail.
Название компании.Должность.Страна.Индекс.Город.Улица / дом / квартира.Время доставки.Кличка собаки.
Проверить правильность заказа, а также узнать способ оплаты и адрес доставки можно по телефону.
Форма заказа товара или услуги с возможностью оплаты online оправданно может быть подробнее. Действительно, чтобы рассчитать стоимость доставки, необходима подробная информация о местоположении покупателя. Такие объемные формы лучше делать в несколько этапов, чтобы посетитель не видел длинную простыню из вопросов. Хорошим примером являются многоступенчатые формы заявок на сайтах банков.
По данным исследования компании HubSpot, оптимальным количеством является всего три поля в стандартной форме заявки. Дальнейшее увеличение количества полей в форме снижает конверсионность в два раза.
Не забывайте, что удобство заполнения информации на мобильной или адаптивной версии сайта на порядок ниже, чем на desktop-версии. Особенно это касается полей с выпадающими списками (например, выбор страны и/или адрес доставки).
Наличие капчи
Капча на сайте – горе в семье.
Пример капчи, найденный на pikabu.ru
Что хуже: получить несколько спам-обращений или недополучить заявку потенциального клиента?
Вроде бы ответ очевиден, однако часть компаний старательно продолжают лишать себя заказов, используя на сайте капчу. Оправдание всегда одно: «Мы не хотим получать спам!» У некоторых владельцев сайтов сформировалось мнение «чем сложнее, тем защищеннее»:
- Даешь капчу после захода на сайт! (не пропустим ботов)
- Капчу, чтобы добавить товар в корзину!
- Капчу, чтобы открыть форму заявки! (превентивные меры для защиты от спамеров)
- Капчу, чтобы увидеть капчу!
Все правильно!
Чем сложнее капча (поиск кусочка платья на фоне желтого сигнала светофора во время переключения на зеленый, к примеру), тем сайт надежнее сайт защищен от заявок клиентов, а вы – от доходов и прибыли.
По данным исследования компании Baymard, до 29% пользователей не могут правильно ввести капчу, чувствительную к регистру, с первого раза. На мобильной/адаптивной версии сайта дела обстоят еще хуже из-за физического неудобства ввода капчи.
Конверсия при использовании капчи падает в среднем на 3,2% (и это еще по «бородатым» данным исследования MOZ).
А вы готовы лишиться части заказов и подарить их конкурентам? Нет? Тогда убирайте капчу и будьте проще (с точки зрения оформления заказа).
Итого
Конкурент без мобильной/адаптивной версии сайта – хороший конкурент.
Перечисленные ошибки по отдельности «воруют» чуть-чуть из ваших карманов. А все вместе они способны лишить мобильную/адаптивную версию сайта существенного количества заказов.
Не стоит пренебрегать адаптивной версией для планшетов, ведь доля пользователей планшетов не такая уж маленькая. К примеру, среди посетителей нашего сайта luckyleads.ru за последний год доля пользователей планшетов составила 3,2%.
Известно также, что продажи планшетов в России за первый квартал 2020 года выросли на 10% в штуках, по данным «М.видео-Эльдорадо». А по данным «Связного», только за апрель-март 2020 года продажи планшетов выросли на 38% в штуках, по сравнению с аналогичным периодом 2019 года, на что, не мог не повлиять переход огромного количества сотрудников компаний и учащихся на «удаленку».
В целом, мы убеждены, что важен каждый пользователь, независимо от того, с какого устройства он перешел к Вам на сайт. Именно этот пользователь может стать Вашим постоянным покупателем.
Рекомендация: для того, чтобы посмотреть, как выглядит Ваш сайт с того или иного устройства, Вы можете использовать функционал браузере Firefox Browser Developer Edition. Об этом есть отдельное видео на нашем сайте luckyleads.ru в разделе Help Page.
Веб-дизайн призван решать бизнес-задачи. При этом всегда есть определённые ограничения, которые следует учитывать: по загружаемому контенту, его обновлению и отображению на разных устройствах, по работе с базами данных и внешними системами и не только.
Однако не все дизайнеры думают о том, как их макеты будут функционировать на сайте или в приложении. Руководитель студии дизайна и разработки сайтов и сервисов Method Zero Антон Шакиров рассказывает о самых распространённых ошибках, которые последние пару лет замечал на дизайн-площадках и сайтах, и делится принципами, которые помогут их избежать.
Дизайнеры, как правило, создают макеты для трёх разрешений экранов:
- под компьютеры и ноутбуки: ширина макетов — 1 920, 1 440 или 1 360 пикселей, обычно для сайтов берут только одно из этих разрешений;
- под планшеты: ширина макетов — 767 пикселей;
- под смартфоны: ширина макетов — 375 пикселей.
Дизайн хорошо смотрится, первый экран красиво передаёт нужную информацию и вовлекает скроллить дальше. При этом часто забывают, что на реальных устройствах первый экран будет меньше по высоте из-за окна браузера, поля с адресом сайта и панели закладок. Кнопка с призывом к действию и вовсе может уехать за пределы экрана. Всё это ломает дизайн.
Нужно помнить и про использование графики. В примере ниже фоновая иллюстрация растягивается по ширине сайта, при этом нижняя часть круга обрезается и выходит за пределы первого экрана, где её изначально располагал дизайнер:
Исправить этот недочёт можно так: увеличить отступы справа и слева от картинки до краёв экрана или поместить круги в отдельные элементы и работать с ними уже там.
Случается и обратная ситуация, когда специалист не адаптирует дизайн под ультраширокие мониторы 3 440 x 1 440 и не объясняет разработчикам, как должен вести себя сайт при изменении ширины экрана. Решить этот вопрос поможет:
- Резиновая вёрстка, когда весь сайт пропорционально растягивается по ширине экрана. Но следует учитывать, что контент может слишком укрупниться и будет видна только треть того, что должно было помещаться в рамках одного экрана.
- Добавление полей справа и слева. Здесь стоит помнить про закреплённые на экране элементы и про фоновые видео и изображения, которые обрезаются по краям экрана на стандартных экранах.
Пример резиновой вёрстки: контент остаётся в рамках одного экрана, благодаря правильному позиционированию всех элементов на странице ↓
В примере ниже разные части дизайна закреплены с левой и с правой стороны. Если открыть этот сайт на ультрашироком мониторе, посередине возникает дыра:
Для макетов для iPhone. При дизайне кнопок, закреплённых снизу на мобильном устройстве, часто забывают про индикатор «Домой» (Home indicator) — чёрную полоску снизу, область под которой не кликабельна. Кнопки следует приподнимать выше этого индикатора или ставить больше внутренних отступов под ней, но не прижимать её к низу. Это также немного повлияет на высоту элементов в рамках одного экрана сайта или приложения.
Не стоит забывать готовить и передавать разработчикам все видео и изображения в большем размере для сохранения их качества на мониторах 4K и 5K. Если изображение на весь экран, готовим его под всю ширину монитора, например, 4K — 3 440 px. Если на пол-экрана — 1 720 соответственно. Это важно, потому что часто разработчики экспортируют картинки напрямую из макетов, где эти картинки делают в небольшом разрешении. Экспорт изображений в увеличенных размерах не поможет в этом случае. Исключение составляют только векторные изображения в svg-формате, которые могут бесконечно увеличиваться и уменьшаться без потери качества.
Можно не рисовать отдельно макеты под планшет, если дизайнер делает проект, который:
- нужно оперативно запустить;
- не содержит сложных таблиц и сеток с переносами контента на следующие строки или с его скрытием на некоторых разрешениях экранов.
Согласно данным SimilarWeb и по личному опыту, на планшеты в среднем приходится 1–2% всего трафика, поэтому нецелесообразно тратить четверть проектного времени на эти макеты. Правда, если есть нестандартный блок со сложной сеткой, можно отдельно нарисовать планшетную версию только этой части. В остальных случаях опытные разработчики сами адаптируют десктопную версию макета под планшет.
Под динамическими элементами страниц подразумеваю всё, что может менять своё состояние — вид, содержание — в зависимости от положения курсора мыши, факта нажатия или перетаскивания элементов, фокуса, времени, скролла страниц, состояния каких-либо данных на странице.
На этапе дизайна динамических элементов нужно представлять, объяснять и рисовать, как этот элемент будет вести себя дальше или как он будет реагировать на определённые события.
Чаще всего забывают нарисовать и продумать состояния ховеров, когда на элемент наводится курсор, состояния нажатия или перетаскивания, состояния фокуса у кнопок, ссылок, форм, кликабельных элементов. Все эти состояния помогают пользователям понять, что на этот элемент можно нажимать, что в фокусе этот объект или что в поле есть ошибки.
При работе с формами — помимо состояний ошибок и невалидности полей — стоит помнить о сообщениях об успешной отправке формы. Так пользователь поймёт, что всё хорошо и его данные отправлены.
Некоторые элементы могут быть динамичными сами по себе. Например, если на сайте есть таймер обратного отсчёта, секундомер, экраны загрузки сайта, сообщения о загрузке данных. Нужно не только нарисовать то, как эти элементы выглядят, но и что с ними происходит в процессе и что будет после завершения действия.
Например, если говорить про таймер обратного отсчёта, нужно учитывать изменение цифр и изменение ширины всего текста из-за разной ширины отдельных цифр — если это не моноширинный шрифт, где каждый символ всегда занимает одинаковую ширину, что позволяет ориентироваться только на количество символов. Для этого делаем дизайн других состояний или описываем для разработчиков, как оно должно изменяться. А также готовим макеты или анимации того, что будет отображаться по истечении срока.
Если на сайте будут размещаться вакансии, новости, события, команды, магазины и другие данные, которые будут подгружаться из внешних систем и активно обновляться, следует заранее узнать у заказчика:
- как эти данные хранятся,
- какая есть или будет информация,
- как и кем данные будут актуализироваться,
- какие сложности могут возникнуть.
Это позволит определить полный набор данных для работы — или понять новые ограничения по дизайну и вёрстке.
Например, при проектировании HR-портала компании мы не можем вслепую задизайнить страницу поиска вакансий и каждую вакансию отдельно. Сперва нам надо узнать, какая информация по вакансиям будет доступна. Так, если в вакансиях нет информации о метро, мы и не должны рисовать это в макетах. Если в поле «Регион» хотим разделить Москву и Московскую область, узнаём у клиента, есть ли такая информация в принципе, а у разработчиков — возможно ли так сделать с технической точки зрения.
Нужно выяснить обязательность полей или целых разделов. Если мы делаем дизайн вакансий, может ли поле с графиком работы или со станцией метро полностью отсутствовать? Если делаем разделы со статьями, может ли какой-то раздел оказаться пустым? Может ли не быть ближайших событий? Может ли клиент удалить все новости?
С помощью таких вопросов дизайнер выявляет дополнительный набор состояний, который нужно задизайнить и передать разработчикам.
Другая ситуация — при наличии данных они могут не успеть подгрузиться с сервера при обращении к соответствующей странице. Если дизайнер знает, что эти данные будут грузиться извне, то лучше заранее предусмотреть сообщения о том, что всё в порядке и контент загружается.
Стоит помнить и про ограничения на контент, которые стоит задать для отдельных полей или частей контента. Ограничение может быть на длину текста, количество элементов в списке, количество фотографий.
Например, в слайдере с отзывами один из отзывов может быть сильно больше других. Это приведёт к тому, что под небольшими отзывами снизу будут дырки, так как нижестоящий контент отодвинется отзывом с самым длинным текстом:
Лучше заранее продумать в дизайне варианты поведения при таких сценариях или обговорить с клиентом и разработчиками введение ограничений на количество символов в каждом отзыве.
- Получите опыт 4 ведущих дизайн-студий и создадите 7 проектов для своего портфолио
- Научитесь создавать сайты под ключ, оформлять дизайн-проекты и презентовать их заказчику
- Сможете искать работу и проходить собеседования уже в середине обучения
Некоторые части сайта подлежат частым правкам: портфолио с кейсами, баннер с призывом к действию, блок с информацией о следующем событии, стоимость товаров или услуг и другое.
На этапе дизайна нужно сразу принимать в расчёт ограничения клиента по времени и деньгам, которые он готов тратить на обновления сайта.
Например, на первый экран сайта добавили баннер со следующим событием. В портфолио разместили профессионально отрисованные обложки работ, а на странице каждой модели часов — 3D-модель. Но сможет ли клиент самостоятельно выпускать аналогичный контент или будет ли он располагать дополнительными ресурсами на повторное привлечение дизайнеров под эти задачи?
Лучше сразу обсудить с заказчиком дизайн-решения и дальнейшее обновление контента. Показать, что нужно будет делать для добавления нового контента, какие есть условия для графики и фотографий.
Дизайнер должен быть уверен, что клиент сможет получить фотографии в заложенной стилистике под разные материалы или сделать предварительную постобработку и цветокоррекцию фотографий.
Дизайнеры знают про наличие в HTML заголовков H1–H6 и используют их при наименовании стилей. Однако при создании новых наборов стилей под мобильную версию сайта из-за удобства в дизайне и не знания того, что это делать нельзя, могут менять тип заголовка и стиля на элементах относительно десктопной версии. Был заголовок H1, а в мобильной версии у того же элемента стал H2. Был дополнительный стиль small text — стал просто text.
Если дизайнер создаёт с помощью HTML-тегов элемент H1, то он и должен оставаться H1 в мобильной версии. Иначе при разработке придётся делать дублирование всего элемента и создавать костыли с помощью CSS-классов — рабочее, но некрасивое и неэффективное решение.
Если нужно, чтобы какой-то элемент был по стилю таким же, как и элемент с другим стилем, стоит их сделать одинаковыми на определённых разрешениях экранов. Но сам элемент должен оставаться с таким же типом класса, как и на макетах под другие разрешения экранов.
Один и тот же элемент не должен менять свой заголовок между различными разрешениями экранов. Если в десктопной версии (верхнее изображение) заголовок соответствует стилю H4, то и в мобильной версии этот заголовок должен соответствовать стилю H4, даже если он эквивалентен мобильному H3
В этом вопросе дизайнерам и разработчикам сильно помогает создание UI Kit, где как минимум будут указаны все стили шрифтов, цветов, состояния элементов. Это позволяет проверить правильность указания всех стилей элементам и неизменность всего набора стилей между разными разрешениями экранов.
Здесь речь идёт скорее про уменьшение вероятных ошибок на готовом сайте и про сильную помощь разработчикам и ускорение их работы, а не про прямую ошибку дизайнеров. Но иногда это и про недостаточный объём того, что нужно сделать специалисту.
Все дизайнеры знают про favicon — маленькую картинку, которая отображается на вкладке сайта в браузере. Но не все создают и передают разработчикам webclip — картинку 256 x 256, которая видна в панели закладок Safari, — и opengraph-изображения для сайта и для отдельных страниц — изображение с рекомендуемым разрешением 1 200 x 630, которое видим при вставке в соцсетях ссылки на сайт.
Если фоновые изображения и другие элементы всегда зарезаются краями экрана или блоками в одном и том же месте, стоит сразу кадрировать эти изображения в макете. Часто дизайнеры отодвигают фоновую картинку за края экрана и включают у элементов обрезание контента за пределами макета страницы. Но когда разработчики будут скачивать такую картинку для экспорта на сайт, она выгрузится целиком. Так изображение попадёт на сайт в большем, чем нужно, размере, что будет замедлять загрузку и добавит разработчикам хлопот с выравниваниями.
Ещё одна частая ошибка — делать разные иконки в разных по размеру фреймах. Часто можно заверстать и так, но для этого разработчикам нужно под каждую иконку задавать свойства размеров, отступов. Если потребуется заменить иконку на другую, придётся менять размеры и отступы. Это приносит много проблем разработчикам и тормозит разработку.
Все иконки в дизайне должны быть сделаны внутри одинаковых по размеру областей — фреймов, внутри которых они уже выравниваются и масштабируются как нужно. Таким образом, все иконки вне зависимости от их реального размера будут занимать одинаковые области этих самых фреймов.
Иконки должны располагаться внутри одинаковых квадратных или прямоугольных областей, внутри которых они уже индивидуально выравниваются и масштабируются.
Вот примеры правильной работы с иконками:
На этапе разработки показывать все идеи и макеты разработчикам. Они скажут о возможных проблемах, которые всплывут при разработке.
Всегда просить обратную связь от разработчиков: что им не хватило при передаче дизайна. Через несколько проектов сформируется понимание, на что обращать внимание и что ещё нужно учесть и подготовить в дизайне.
Начать самостоятельно разрабатывать несложные сайты на технологиях no-code. Рекомендую Tilda, Readymag и WebFlow. После нескольких собранных сайтов станет ясно, с чем возникают сложности, где и что работает не так.
Самостоятельно проводить тестирование сайтов на различных устройствах. Такие сервисы, как BrowserStack, позволяют открыть сайт под различными ОС, браузерами и телефонами. Самостоятельно подвигать окно браузера, взять другой компьютер и посмотреть, как сайт себя ведёт в браузере Safari, где чаще возникают проблемы.
Мыслить критически. Советую моделировать все возможные ситуации и показывать в дизайне, как это всё должно работать. Задавайтесь вопросом «а что, если». А что, если клиент введёт описание в 2 раза длиннее, чем было в макетах? А что, если не будет картинки под новость? Продумывайте все ситуации, которые могут случиться, и любые возможные действия пользователей и клиента.
Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.
Как быстро убрать ошибки мобильной адаптации в Search Console?
Количество пользователей интернета с мобильных девайсов увеличивается ежедневно, а в многих странах этот показатель в разы больше чем с компьютера. А это прежде всего говорит о важности разработки адаптивного дизайна для комфортного использования сайтом. Мобильная адаптация страниц сайта сегодня является важным пунктом в чек-листе при разработке нового дизайна, а также ее наличие влияет на успешность продвижения в поисковых системах.
Поисковые системы Google и Яндекс неоднократно заявляли, что очень важно адаптировать сайт для просмотра на небольшом экране. Это в свою очередь позволит:
- В разы увеличить конверсию сайта.
- Улучшить позиции сайта в поиске с мобильного телефона.
- Комфортно пользоваться сайтом.
Как узнать ошибки мобильной адаптаци в Google Search Console
- Прежде всего сайт, который нужно проверить, необходимо добавить в «Гугл Вебмастер».
- Потом подтвердить на него права собственности. И далее обождать парочку дней, пока собереться информация.
Когда сайт не имеет проблем с адаптацией:
Если на вашем сайте не обнаружены недочеты с отображением сайта на мобильных устройствах, которые сказываются на удобстве для пользвателей и снижают рейтинг сайта в результатах мобильного поиска, то вы увидете такое уведомление:
Какие проблемы с моб.адаптацией могут возникнуть:
- Слишком мелкий шрифт;
- Значение метатега viewport не задано;
- Используются несовместимые плагины;
- Контент шире экрана;
- Интерактивные элементы расположены слишком близко.
Чтоб полностью пройти проверку удобства просмотра на мобильных устройствах — нужно прежде всего поработать с шаблоном сайта. Если ваших познаний в области css и html достаточно, то с небольшим применением магии у вас все должно получиться. В противном случае лучше заказать адаптивную верстку.
После того, как шаблон сайта полностью стал адаптивный, вам следует просто обождать повторного обхода проблемных страниц роботом Googlebot. Особенно это актуально, когда страниц очень много. Постепенно страницы пройдут проверку. В среднем это 1-3 месяца, в зависимости от количества проблемных страниц.
Есть приятная новость! Теперь можно значительно ускорить процесс повторного обхода страниц с ошибками. Гугл добавил новый функционал, который позволяет «пригласить» робота Googlebot и в кротчайшие сроки (приблизительно 12-36 часов) страница повторно будет проверена на адаптивность. Очень полезная фишка, которой ранее сильно не хватало. Ниже скриншот, как быстро уходят ошибки:
Как повторно «пригласить» гугл-бота быстро проверить страницу?
- В консоле Гугл Вебмстер перейти в раздел «Поисковый трафик»;
- Выбрать «Удобство просмотра на мобильных устройствах»;
- Выбрать тип проблемы, например «Контент шире экрана»;
- Далее нажать на страницу с проблемой, появиться модальное окно, в котором следует нажать на кнопку «Проверить текущую версию»;
Правда на данный момент есть один минус у «приглашения» — это то, что нет возможности массовой проверки всех страниц с ошибками. Необходимо заходить на каждую страницу и приглашать проверить. Если страниц реально много — можно быстро «сгореть».
В последнее время заметил, что немного «колбасит» результаты проверки и переодически появляются ошибки на разных сайтах, в пределах до 5 штук. В данном случае пригласить робота Googlebot на них не составит особого труда, и кстати очень нужный функционал! Расскажу почему:
Приблизительно год назад клиент обратился к нам разработать ему новый дизайн для магазина на движке OpenCart и понятное дело с адаптивной версткой. Все успешно сделали, доволен, оставалось только пройти проверку в консоле вебмастера, но это затянулось.
На тот момент у него было прядка 30 тысяч товаров. Вообщем, робот Googlebot начал повторный обход страниц и затянулось где-то на 4 месяца. И еще 2 месяца ему не нравилось 3 карточки товара, не смотря на то, что с ними было все в порядке! Тогда мы решили достать «волшебную палку» и применить ее в отношении гугл-бота. И вы знаете, через 3 дня произошло чудо — эти страници успено прошли проверку 🙂 А если серьезно, мы просто повешали на главной странице 3 ссылки на эти товары и проблема быстро себя исчерпала.
Относительно быстрой проверки страниц для успешного проходнения проверки на адаптацию пожалуй все! Если понравилась статья, то не жадничайте 🙂 делайте репост в социальные сетии и подписывайтесь на новости блога.
Удобство использования Google Mobile> Контент шире экрана
Невозможно исправить ошибку Google Mobile Usability> Контент шире экрана в Google Search Console. Я попробовал эмулятор мобильного макета Chrome от DevTools, установил ширину 320 пикселей, но горизонтальная прокрутка не появилась. Итак, в эмуляторе все выглядит нормально, но Google выдает ошибку. Затем я добавил в css:
Но никакого эффекта, ошибка все равно сохраняется.
Инструмент Test Live URL не показывает никаких ошибок, все страницы удобны для мобильных устройств.
Есть идеи, как это исправить? Я уверен, что это ошибка Google, но как ее избежать?
Ответы 2
Проверяйте реальные устройства вместо эмулятора. Удалите каждый раздел и проверяйте итеративно, вы поймете, какой из них вызывает горизонтальную прокрутку.
Горизонтальной прокрутки нет как в эмуляторах, так и в аппаратных устройствах. Только консоль поиска Google обнаруживает ошибку.
Я удалил все «position: absolute» из классов, не имеет значения, подходит ли абсолютный элемент на маленьком экране. Но эти классы были назначены скрытому контенту, который отлично вписывался в самый маленький экран смартфона, а также большинство из них не были связаны ни с одним элементом страницы, потому что элементы были защищены паролем.
Я нашел способ быстрее отображать страницы, не дожидаясь долгого времени после нажатия кнопки «запросить индексацию». Сначала создайте новую страницу, используя шаблон сайта и CSS, текст на странице должен быть уникальным (в этом поможет Lorem Ipsum Generator). Во-вторых, создайте еще один файл карты сайта, в котором только один URL указывает на новый файл, отправьте его, и через 5 минут вы просканируете и проиндексируете страницу. Это очень помогает при поиске ошибки в шаблоне или CSS.
Редактировать: Поскольку удаление абсолютного положения нарушило дизайн пользовательского интерфейса, я вернул его с помощью javascript.
Как исправить ошибки «Контент шире экрана», «Интерактивные элементы расположены слишком близко»?
В последнее время почти на всех моих сайтах при проверке на сервисе https://search.google.com/test/mobile-friendly у многих моих сайтов появились одинаковые ошибки «Контент шире экрана», «Интерактивные элементы расположены слишком близко».
При этом тестирование верстки не дает никаких «зацепок», что конкретно не нравится сервису — страницы отображаются корректно, горизонтальных скролов нет, навигация удобная (межстрочные интервалы, отступы и т.п.).
Есть подозрение, что проблема в какой-то особенности методологии проверки, про которую я не знаю. Скриншоты, которые снимает сервис с сайтов в момент тестирования, почему-то без CSS-стилей — просто разметка.
Автор: Олег Фролов
«Руководитель проектов команды «Бизнес-Мотор», вебмастер, копирайтер.
Удобство использования сайта с мобильного — залог успешного взаимодействия. Ошибки мобильной адаптации, о которых говорим в этом обзоре, критично сказываются на пользовательском опыте»
В цикле статей, посвященном вопросам мобильной адаптации сайтов, мы уже не раз отмечали: просто втиснуть содержимое страницы в ширину узкого экрана – недостаточно. Важнее то, чтобы компоновка элементов была удобной для пользователя, в том числе – с учетом особенностей веб-серфинга на мобильных устройствах.
Мобильная адаптация: отслеживаем пользовательский опыт
В нашей сегодняшней статье мы рассмотрим 5 распространенных ошибок мобильной адаптации, которые делают использование сайтов если не невозможным, то крайне некомфортным.
1. Неудачное использование контейнеров
Основа современной адаптивной вёрстки – это колонная структура, в рамках которой элементы страницы объединяются в ряды (rows) с горизонтально расположенными контейнерами. При сужении экрана до определенного значения эти контейнеры выстраиваются в одну вертикальную колонку, которую и пролистывает вверх/вниз пользователь мобильного устройства.
В теории такое поведение блоков на сайте звучит безупречно, но на практике часто оказывается, что крайняя слева колонка занята под контент не самый важный – например, большой по высоте сайдбар. На мобильном экране именно он окажется выше. В итоге, чтобы увидеть нужную информацию – статью или карточку товара, – пользователю придется пролистать много экранов, что трудно назвать удобным. Иначе говоря, порядок выстраивания блоков в колонку, установленный по умолчанию, далеко не всегда является оптимальным с точки зрения юзабилити.
Решений этой проблемы может быть несколько:
- скрывать не слишком важные блоки на узких экранах;
- «прятать» второстепенный, но расположенный выше контент в раскрывающиеся элементы (например, аккордеон);
- использовать flex-верстку , позволяющую задавать, в каком порядке выстраивать блоки на мобильных устройствах.
Кроме того, крайне важно грамотно объединять отдельные элементы страницы в ряды – с мыслью о том, как именно и в каком порядке будут показываться они на экранах смартфонов и планшетов. В противном случае пользователей ждет бесконечный скроллинг, который вряд ли улучшит их впечатления о сайте.
2. Блоки с прокруткой
Для экономии места на сайтах нередко используются блоки с прокруткой. На десктопах (широких экранах) особой проблемы это не представляет, ведь управление происходит с помощью мыши. Другое дело – мобильные устройства, где пользователь адаптивного сайта пролистывает страницу вверх и вниз, а все блоки выстроены в одну колонку на всю ширину экрана. Результат предсказуем: сайт прокручивается вниз, пока в зону видимости не попадает блок с собственным скроллом, и чтобы продолжить движение юзеру придется пролистать все содержимое этого блока.
Решение этой проблемы на поверхности – на узких экранах использовать прокрутку внутри отдельных блоков на странице не стоит. Вместо этого лучше разворачивать их по клику или показывать в полную высоту.
3. Несворачиваемое меню
Вполне естественно, что важнейшая задача адаптивной верстки – сделать все функциональные элементы компактными, но при этом максимально доступными для пользователя. То, что удобно располагается на экране стационарного компьютера, может растянуться в бесконечную колонку на смартфоне. Один из элементов, который в этой связи заслуживает особого внимания, – это меню.
Посмотрите, как выглядит неудачный вариант меню:
Мало того, что оно занимает слишком много места на экране, пролистать страницу вниз практически невозможно, ведь при касании экрана пользователь обязательно нажмет на одну из кнопок – с последующим переходом на другую страницу.
Намного удобнее выглядит практика, при которой меню на сайте при просмотре с мобильного устройства вызывается по специальной иконке:
4. События при наведении курсора
Довольно часто в верстке и дизайне сайтов применяются события, которые срабатывают при наведении курсора. Это могут быть полезные подсказки, увеличение фото или разнообразные выпадающие меню. Но, как мы знаем, на мобильных устройствах нет курсора в том значении, в котором мы применяем его на десктопах и ноутбуках. При касании элемента на тачскрине происходит событие «нажатие», аналогичное клику мыши. Таким образом, любые действия, которые должны инициироваться при наведении курсора, на мобильных устройствах становятся попросту невозможными или, по крайней мере, неудобными. При адаптивной верстке от них лучше отказаться.
5. Мелкий шрифт и маленькие активные элементы
Важно понимать, что шрифт одного и того же размера на экране компьютера и на экране мобильного телефона не выглядит одинаково – на маленьких экранах он становится менее читабельным. Стоит отметить и то, что смартфонами/планшетами люди часто пользуются в движении: работать с мелким шрифтом становится еще более проблематично.
Размер шрифта — новый фактор ранжирования Яндекс
Яндекс рекомендует шрифт не менее 12px для мобильных версий сайта.
То же самое относится к интерактивным элементам на страницах – кнопкам, ссылкам и т.д. Попасть в каждый из них курсором мыши значительно проще, чем пальцем, особенно если эти элементы располагаются близко друг к другу. В этом случае шанс промахнуться особенно велик.
Таким образом, при погоне за компактностью отображения контента на маленьких экранах крайне важно не жертвовать шрифтом и размером кликабельных элементов. В противном случае компактность окажется бесполезной, ведь сайт станет неудобным и плохо читаемым.
Выводы
Для того чтобы сделать сайт адаптивным, недостаточно выстроить контент страниц в вертикальную колонку. Не менее важно подумать об отличиях юзабилити на десктопах и мобильных устройствах.
Планируя структуру контента, следует понимать, в каком порядке он будет отображаться на маленьких экранах, и заранее внести необходимые изменения.
На мобильных устройствах неудобны или вообще нефункциональны: блоки с собственной прокруткой внутри страниц, несворачиваемые меню, элементы, срабатывающие при наведении, мелкие шрифты и маленькие кликабельные области.
Были времена, когда веб-сайт на мобильном телефоне загружался со скоростью улитки, ползущей по склону горы Фудзи. К счастью, они давно прошли. Сегодня мы можем свободно выполнять различные действия в интернете с мобильника благодаря отличной скорости и покрытию связи.
Обратимся к мировой статистике:
- 2018 год – через смартфоны было сгенерировано 52,2% всемирного онлайн-трафика; это на 1,9% больше, чем в 2017 году (Statista, 2018);
- 70% владельцев мобильных телефонов, сделавших ту или иную покупку в магазине, сперва искали информацию о продукте на смартфоне (Google, 2017);
- 89% пользователей с высокой вероятностью порекомендуют бренд знакомым, если онлайн-опыт с телефона был успешным (Google, 2017);
- 40+% онлайн-транзакций совершается с помощью смартфонов или других устройств (Google, 2017);
- 80% начальников B2B-компаний по вечерам ищут информацию о товарах на своих планшетах (IDG Global Solutions).
На сегодняшний день, сайт, который одинаково корректно отображается и работает и на компьютере, и на смартфоне, и на планшете – не привилегия, а вполне обычное явление. Достигается это с помощью адаптивной верстки сайта.
Адаптивная верстка – особый способ изменения дизайна сайта, зависящий от таких факторов как размер экрана, действия пользователя, платформы и назначения гаджета.
На этапе проектирования адаптивного дизайна существуют некоторые ошибки, которые повторяют многие, даже опытные специалисты. Рассказываем о пяти самых распространенных и призываем не совершать их.
№1. Сокращение контента
Если пользователь вынужден переходить на полную версию сайта, чтобы узнать интересующую информацию, зачем ему нужна мобильная? Часть сайта, которую сократили, из-за того, что она не «влазит» на дисплей смартфона, подобна отрезанной руке на фотографии, не поместившейся в объективе фотоаппарата. Версия на мобильном устройстве должна иметь тот же контент, и тот же функционал, что и полная. И никаких исключений.
Пользователь мобильного устройства должен знать, что информация, которую он получает, не отличается от предоставленной пользователю ПК.
№2. Огромный «вес» изображений
Хоть переход на полную версию сайта сейчас не актуален, мы не всегда можем похвастаться быстрым мобильным Интернетом. Если веб-сайт «забит» большими картинками, он будет плохо грузиться на мобильном устройстве. Выход из положения есть – это оптимизация всех изображений по весу и размеру.
Как свидетельствуют результаты исследования, проведенного Strangeloop, ели сайт на мобильном гаджете будет загружаться дольше 3 секунд, его покинут 57% пользователей.
№3. Мелкие элементы
Напрягать глаза и пытаться различить на небольшом экране мелкие надписи и кнопки, захочет не всякий пользователь. Интерфейс сайта должен быть спроектирован так, чтобы в адаптивной версии можно было сразу рассмотреть все элементы навигации и нажать любую кнопку, не приближая ее.
В адаптивной версии элементы навигации должны быть крупными!
№4. Игнорирование специфики пользования
Особенности адаптивного веб-сайта также зависят от того, когда и как именно люди пользуются тем или иным гаджетом. Важным здесь будет и размер устройства, и способ ввода текста, и качество мобильного Интернета, его скорость, а также другие параметры.
Замечательный пример: смартфоном люди пользуются очень часто «на ходу». Поэтому так важно наличие в мобильной версии сайта уже упоминаемых нами крупных шрифтов. Немаловажно, чтобы все ключевые элементы навигации находились в пределах доступности большого пальца руки. Учитывайте и то, что на гаджетах не работает анимация и другие визуальные эффекты (ховеры). Дизайн должен выглядеть красиво и в статичном виде, а пользование – быть удобным без ховеров.
Обычно, мы используем планшет дома после работы и держим его в вертикальном или горизонтальном положении – как удобнее в тот или иной момент. Это аргумент в пользу того, что верстка должна быть разработана для обоих положений.
№5. Проектирование со смартфона на декстоп
«Mobile first» — популярный в последнее время подход к разработке сайтов. Он подразумевает под собой отказ от сложившейся традиции, когда сперва разрабатывается версия для декстопа, а уже после – для мобильных гаджетов.
Этот подход весьма разумный, но многие понимают его неправильно. «Mobile first» вовсе не означает, что сперва нужно проектировать дизайн для мобильной версии. Его суть – начинать проектирование сайта, как обычно, с декстопа, одновременно продумывая вид версии для гаджетов. А именно, какой вид будет у кнопок, чем заменить анимацию, как сдвигать блоки.
Гораздо проще создать более сложный и детализированный вариант с последующим его упрощением и оптимизацией, чем наоборот. Если поступить по-другому, работа увеличится вдвое: нужно будет добавить те или иные детали, продумать анимацию на сайте и расположение блоков. Такой подход чреват рядом ошибок в дизайне и верстке.
«Mobile first» подразумевает увеличение важности адаптивной версии сайта. Ведь более половины всех пользователей увидят сайт с мобильного устройства и будут рассматривать его функционал там же. Поэтому на продумывание и тестирование адаптивной версии должно быть уделено не менее половины вашего времени. Вторая половина – для декстопной версии. И никак иначе.
Перечислим самые распространенные ошибки, чтобы вы могли избежать их во время разработки мобильной версии сайта или исправить на уже функционирующем сайте.
Ошибка: некорректное отображение страниц — блокировка JavaScript, CSS и графических файлов
Если мобильная версия сайта отображается некорректно, первым делом стоит проверить предоставлен ли роботу Googlebot доступ к JavaScript, CSS и графическим файлам. Поисковый робот должен видеть мобильную версию сайта также, как его видит обычный пользователь.
Если на вашем сайте в файле robots.txt закрыт доступ к JavaScript, CSS и графическим файлам, то данные не будут проиндексированы поисковой системой. От этого позиций вашего сайта в выдаче будут низкими.
Для проверки доступности следует воспользоваться инструментом проверки URL в Google Search Console — с его помощью вы сможете найти и исправить ошибки индексирования сайта.
Ошибка воспроизведения контента
Обычно в мобильных версиях сайта не поддерживаются видео, требующие Flash-проигрыватель или контент с ограниченной лицензией.
Если у вас на сайте есть подобный контент, Google рекомендует использовать стандартные теги HTML5, а также удостоверится, что вы используете форматы видео, которые поддерживаются на всех устройствах.
Для того, чтобы сделать ваш сайт еще более удобным для пользования, советуем для визуального контента добавить текст, который точно передаст его содержание. В таком случае, ваш сайт останется удобным и для тех пользователей, которые используют вспомогательные технологии просмотра или даже браузеры, которые не поддерживают размещенный контент. Наличие альтернативного текста положительно влияет на ранжирование сайта в выдаче.
Ошибки переадресации
Если для мобильной версии у вас есть отдельные версии страниц, необходимо корректно настроить переадресацию для каждой.
Список типичных ошибок переадресации:
- сервер компьютерной версии сайта настроен перенаправлять пользователей на главную страницу мобильной версии с любой открываемой страницы;
- динамические параметры в URL пропадают при переходе на аналогичные страницы мобильной версии;
- перенаправление на мобильную версию сайта настроено не для всех мобильных устройств.
Чтобы избежать ошибок, выполните следующие действия:
- всегда используйте Google Search Console (бесплатный сервис, с помощью которого вы можете контролировать, как ваш сайт представлен в результатах поиска Google). Это позволит вам получать уведомления об ошибках (например, что пользователи мобильной версии перенаправляются на главную страницу сайта вместо нужной);
- если мобильная версия сайта находится на отдельном поддомене или разных url, проверьте, корректно ли настроена переадресация. Страницы должны вести на аналогичные в мобильной версии;
- если в мобильной версии сайта нет каких-то страниц, то откажитесь от переадресации для них с декстопной версии.
Ошибка 404
Бывает, что сайты, которые корректно отображаются на компьютерах, в мобильной версии выдают ошибки. В таких случаях:
- используйте Google Search Console, чтобы своевременно получать информацию об ошибках;
- при использовании мобильной версии сайта с отдельным URL настройте переадресацию для пользователей мобильных устройств;
- при использовании мобильной версии с динамическим контентом, проверьте, что агент пользователя определяется правильно;
- если у каких-то страниц сайта нет мобильной версии, не ищите варианты, куда перенаправить пользователя (например на главную страницу).
Ошибка: нежелательные межстраничные объявления
Если на сайте есть межстраничные объявления или различные оверлеи с формами подписки, то часто в мобильной версии они частично или полностью перекрывают полезный контент на странице. В некоторых случаях их бывает сложно закрыть.
Для того, чтобы рекламные объявления не мешали пользователям мобильных устройств, используйте простой баннер, встроенный в страницу.
Ошибки перекрестных ссылок
Если вы используете отдельный сайт для мобильных устройств, то обычно на нем есть ссылка для возвращения на полную версию сайт и наоборот. Одна из самых распространенных ошибок в этом случае — ссылка не на ту страницу. Поэтому всегда перепроверяйте, куда ведут ссылки.
Ошибка: медленная загрузка
Обязательно проверьте, что у мобильной версии сайта высокая скорость загрузки. В этом вам поможет инструмент Google PageSpeed Insights. Вы сможете узнать, какие элементы страниц замедляют загрузку. С помощью рекомендаций улучшите скорость загрузки вашего сайта.
Ошибка: некорректная настройка области просмотра
Чтобы ваш сайт правильно отображался на экранах разных размеров, корректно настройте область просмотра с помощью мета-тэга viewport, который сообщает, как правильно изменить размеры элементов страницы.
При настройке мета-тега viewport проверьте, что значения ширины и позиционирования элементов CSS относительны, а изображения масштабируются.
В противном случае:
- если выбрана фиксированная ширина области просмотра, то страницы будут показываться в нужном масштабе не на всех существующих экранах;
- если минимальная область просмотра слишком широка, то для маленьких экранов возникнет необходимость прокручивать страницы по горизонтали.
Ошибка: маленькие шрифты
В мобильной версии сайта не используйте слишком мелкий шрифт. Рекомендуемый базовый размер шрифта — 16 пикселей в CSS (или 16 px). После того, как вы настроете область просмотра, определите размеры шрифтов, чтобы они корректно отображались. Подробнее про настройку шрифтов можно прочитать в этой статье.
Ошибка: интерактивные элементы расположены слишком близко
Не располагайте элементы навигации слишком близко друг к другу, чтобы пользователь случайно не задевал соседние ссылки. Позаботьтесь об оптимальных размерах элементов навигации и расстояниях между ними. Пользователям должно быть удобно с ними взаимодействовать.
Вы уже адаптировали продающий сайт под мобильные платформы? А уверены, что сделали это правильно? Возможно, вашу конверсию можно сильно повысить, устранив несколько ошибок страницы.
Более 50% пользователей интернета посещают web-страницы с мобильных устройств. И это без учета YouTube, Instagram, Facebook и других ресурсов, имеющих отдельные приложения. Если ваш сайт не адаптирован под такие девайсы, вы просто теряете клиентов на ровном месте.
Но даже с учетом адаптации, мобильный сайт может иметь ошибки, которые препятствуют успешным сделкам. Проработайте каждую из них, чтобы добиться максимальной конверсии.
1. Неоптимизированные формы заказов
Ваши клиенты ленивы. Запомните это и учитывайте при создании любых продающих ресурсов. Чем больше информации вы требуете от них сразу, тем меньше вероятность целевого действия. Поэтому форму заказа нужно максимально сократить. А если информация необходима для совершения сделки – разделить на несколько частей.
Как, например, это сделано в Rozetka:
Особенно плохо к большим формам относятся мобильные пользователи. На сенсорных экрана в 4-6 дюймов заполнять поля крайне неудобно. Поэтому многие потенциальные клиенты бросают дело на полпути.
На первом этапе заполнения предложите пользователю заполнить только самую нужную информацию:
Дайте возможность заполнить остальные данные на следующей странице или, вообще, указать при личном общении с менеджером.
В первом случае, по факту, ничего не меняется. Человек заполняет то же количество полей. Но разделитель в виде новой страницы действует совершенно по-другому. Процесс делится на этапы. И заполнять форму, кажется, гораздо легче. Понятно, что это только кажется. Но бросить уже проделанный путь пользователям будет намного сложнее, если они перейдут ко 2-му или 3-му шагу.
2. Контакты, которыми нельзя воспользоваться сразу
Используя смартфон, пользователь мгновенно может связаться с вами любым удобным ему способом. Не лишайте его этой возможности. На продающих страницах можно встретить номера телефонов, опубликованные картинкой. Это табу даже для полных версий сайта, не говоря уже о мобильных. С телефона можно быстро скопировать номер и вставить в поле набора. Копировать картинку невозможно. Поэтому размещайте информацию только текстом.
Вы точно слышали о популярности мессенджеров во всем мире. Пользователи массово устанавливают Viber, Telegram, Facebook Messenger. Вычислите, какие именно приложения пользуются спросом у вашей аудитории. И разместите на мобильной версии сайта кнопки для мгновенной связи в выбранных мессенджерах.
Это может выглядеть так:
По клику человек сразу попадает в программу и чат с вашей компанией. Направляйте аудиторию на связь с реальным менеджером или с чат-ботом. Все зависит от того, для каких целей потенциальный клиент переходит в мессенджер. Используйте сервисы и программы, чтобы установить такие кнопки. Для этого подойдет, например, Chatfuel.
3. Контент, невоспроизводимый на мобильных устройствах
Максимально упростите адаптивную страницу. Разные девайсы не поддерживают многие функции. А угадать, каким именно смартфоном пользуется каждый ваш клиент, не получится. Поэтому не добавляйте элементы, которые могут не отображаться на мобильных платформах.
Например, учитывайте, что iPhone и другие мобильные “яблочные” устройства не поддерживают Flash-анимацию. Вместо полезной информации по продукту или триггера влияния пользователь видит такое окно:
Согласитесь, не самое приятное зрелище.
Добавляйте обычную текстовую информацию, JPEG и PNG файлы. Flash-анимацию меняйте на GIF. Вместо навороченного анимированного меню добавьте обычное – просто кнопки или текстовые ссылки. Да, ваш сайт будет выглядеть не так круто на мобильных девайсах. Но это куда лучше, чем страница, наполненная окнами ошибок. К тому же, упрощая сайт, вы значительно улучшает скорость его загрузки.
Об этом, кстати, стоит поговорить отдельно.
4. Неоптимизированные отдельные виджеты на сайте
Эти инструменты помогают повысить конверсию. Вы можете установить на сайт виджет для мгновенной связи с консультантом или pop-up, который на автомате делает дополнительное предложение. Но если эти приложения не адаптированы под мобильные, конверсия, наоборот, пойдет вниз. Окна будут перекрывать полезный контент, формы заказа и другие важные элементы. Или просто “растягивать” страницу, выходя за рамки адаптивной версии.
Обязательно тестируйте сайт на всех платформах перед запуском. Проверяйте буквально каждую функцию. То, что идеально работает на компьютере, может вообще не отображаться на смартфоне или даже планшете. Пробуйте настроить виджеты, чтобы улучшить ситуацию. Если сайт нужно запустить вчера (как это часто бывает в новых проектах 😉 ), убирайте виджеты и ставьте на их место обычные элементы.
Но обязательно доработайте страницу в дальнейшем!
5. Нечитабельный шрифт
Вся важная информация, триггеры и призывы к действию передается в тексте. Поэтому настройке этого элемента странице нужно уделить особое внимание. Да и не все так просто, как кажется на первый взгляд.
Несколько рекомендаций:
- Используйте шрифты без “закарлючек”
Arial – хорошо. Times New Roman – плохо. Вам ведь не нужен сайт из 90-х? Поэтому применяйте обычные строгие шрифты без лишнего графоманства.
- Добавляйте не более 3-х шрифтов на одну страницу
Вы можете выделить другим шрифтом заголовки, подзаголовки или самую важную информацию. Но на все это у вас есть только 2-3 варианта. При использовании большего количества шрифтов скорость загрузки сайта сильно падает.
- Придерживайтесь оптимального размера текста
И для полной, и для мобильной версии минимальный размер основного текста – 16px. Буквы меньшей высоты плохо читаются.
- Соблюдайте межстрочный интервал
Оптимальный показатель – 1px. Главное, чтобы текст не сливался в одно сплошное полотно, где разглядеть хотя бы слово невозможно.
- Добавьте отступы
Не допускайте, чтобы текст сливался с краями экрана. Добавьте отступы справа и слева хотя бы в 15px.
6. Неудобные для touch-скрина кнопки или гиперссылки
Используя курсор мыши, посетитель сайта может кликнуть даже на самый маленький элемент сайта (если вы показываете, что нажать нужно именно туда). На сенсорных устройствах задача усложняется. Сейчас на многих ресурсах я вижу кнопки и ссылки, в которые тупо нельзя попасть даже “пальцем пианиста”.
Теперь представьте: потенциальный клиент заходит на ваш сайт. Читает описание, смотрит видео и решает совершить заказ. Нажимает кнопку “Купить” и… Ничего не происходит. Клик пришелся куда-то мимо кнопки. Он жмет еще раз. Опять ничего. После 5-ти таких нажатий пользователь просто закроет вашу страницу. Возможно, с матом. Вам ведь это не нужно?
Тогда соблюдайте стандарты размеров для кликабельных элементов:
- минимальный – 26px
- оптимальный – 34px
- идеальный – 44px
Стандарты выведены компаниями Apple и Microsoft. Этим данным точно можно доверять. Не тратьте время на поиск подходящего именно вам показателя. Используйте уже готовые наработки.
7. Низкая скорость загрузки страницы
3 секунды!
Именно столько загружается качественная адаптивная версия сайта. Это время должно быть и у вас.
Есть интересная статистика:
- 1 секунда задержки загрузки сайта уменьшает конверсию на 3-7%;
- 10 секунд – на 20-40%.
Вы теряете клиентов, пытаясь сделать ресурс красивее. Так вам важна красота или результат?
Проанализируйте ваш сайт. Если скорость загрузки превышает 5 секунд – улучшайте показатель. 10 секунд – ситуация критична.
Тестирование здесь не может дать точный результат. Каждое устройство индивидуально. Поэтому используйте специальные сервисы:
- Which Loads Faster?
Англоязычный инструмент. Помогает не только определить время загрузки вашего ресурса, но и сравнить скорость с другим сайтом. Подойдет, если у вас уже есть идеальная в этом плане страница. Подгоняйте все сайты под ее показатели.
- Pingdom
Покажет скорость загрузки и вес страницы. Вы поймете, что конкретно нужно заменить, чтобы сократить время.
- Load Impact
Нужно учитывать, что скорость зависит от количества посетителей на сайте в данный момент. Проверьте, как ведет себя ресурс, при разных количествах активных пользователей.
- Neustar
Анализирует всю страницу и отдельные элементы. Вы проработаете каждый блок, чтобы улучшить общий показатель.
- Google PageSpeed Insights
Отображает результат анализа страницы в баллах, учитывая стандарты. Сервис русскоязычный.
Читайте здесь, как правильно проверять страницу на скорость загрузки.
8. Невозможность перехода на полную версию сайта в один клик и неправильная переадресация
Сделайте так, чтобы сайт определял устройство, с которого пользователь зашел, и оставлял его по тому же конкретному адресу.
Представим, вы настроили рекламное объявление в Facebook. Добавили ссылку на конкретный акционный товар в интернет-магазине. Потенциальному клиенту интересно ваше предложение. Он кликает по объявлению с телефона, но попадает на главную страницу сайта. Приходится отдельно искать товар в каталоге. Высока вероятность, что человек просто закроет страницу. Вы потеряли клиента на ровном месте.
Почему так произошло?
Если бы человек нажал по объявлению с компьютера, он попал бы на нужную страницу. Но сайт определил, что он зашел с телефона. И автоматически перенаправил его на мобильную версию. На главную страницу. В этом главная ошибка.
Правильно настройте редирект. С любой платформы посетитель должен попадать на ту страницу, которая ему нужна.
В подвал сайта обязательно добавьте кнопку перехода на полную версию сайта. Возможно, посетителям с планшета (который распознается как мобильное устройство) будет удобнее просматривать ресурс именно в таком виде.
9. Отсутствие автозаполнения полей
Оставьте клиенту минимум действий для совершения заказа. Автозаполнение полей позволяет упростить процесс и, соответственно, повысить конверсию на несколько пунктов.
Человек, пользующийся мобильным девайсом регулярно, точно уже заполнял где-то информацию, которая вам нужна. Это, по сути, стандартные данные – имя, e-mail, номер телефона, адрес или даже платежные данные.
Автозаполнение автоматически вставляет информацию в поля на вашем сайте, основываясь на том, что вводил пользователь ранее. На других ресурсах. Клиенту остается только нажать на кнопку. Это реально покупка в один клик.
Чтобы настроить автозаполнение, пропишите в HTML-код:
10. Ошибка 404 с мобильных устройств
Вспомните… Вы переходите по какой-то ссылке или вводите ее сами в браузерную строку, и видите ошибку 404. Раздражает, правда? А для ваших клиентов это еще один повод просто закрыть страницу и навсегда забыть о вашем сайте.
Во-первых, правильно оформите страницу ошибки (на всякий случай).
Поместите на ней лид-магнит. Если вдруг человек ошибется адресом, вы вовлечете ее в воронку.
Но таких ситуаций вообще лучше не допускать. Особенно, на мобильный версиях. Чаще всего ошибка 404 появляется, если пользователь пытается перейти на полную версию сайта.
Проверьте ссылку на десктопный вариант. Если смартфон распознает ее как ошибку, перестройте алгоритмы. Сделайте все, чтобы каждый посетитель без каких-либо проблем переходил на разные версии сайта по своему желанию.
11. Отсутствие аналитики мобильных пользователей
Многие предприниматели отслеживают общую статистику. Например, при расчете конверсии страницы и десктопные и мобильные пользователи смешиваются. Это неправильный подход!
Вполне возможно, что посетители, которые заходят с мобильных платформ, выполняют целевые действия гораздо реже. Пока вы этого не видите, нет возможности поменять проблемные элементы и повысить конверсию.
Установите HTML-коды для отслеживания только мобильных посетителей. Вам никто не мешает высчитывать общую конверсию. Но такие данные стоит сегментировать. В настройках продающей страницы выберите, чтобы блок с кодом отображался только на смартфонах и планшетах.
Для таких целей отлично подходит, например, Google Analytics или Яндекс.Метрика, если она работает в вашей стране 😉
Вы можете значительно расширить свой функционал, используя правильные инструменты. Например, отслеживать поведение на сайте именно тех пользователей, которые пользуются мобильной версией.
Не знаете, что конкретно использовать? Тогда это вам поможет:
ТОП-10 инструментов для отслеживания поведения пользователей на сайте
12. Неправильно настроенный мета-тега viewport
Этот инструмент определяет выравнивание сайта на разных экранах. Главная ошибка – фиксированный мета-тег viewport для определенной диагонали. Так, например, зафиксировав тег для стандартного ноутбука (15.6 дюймов), вы провоцируете некорректное отображение десктопной версии на мониторах с большой диагональю.
То же касается и мобильных девайсов. У каждого производителя свои стандарты. На рынке есть смартфоны с экранами от 4-х до 7-ми дюймов. Планшеты от 8-ми до 12.9-ти дюймов. И угадать, с какого именно устройства зайдет ваш клиент, невозможно.
Поэтому делайте сайт “гибким”. Настройте viewport так, чтобы ресурс адаптировался под любые экраны. Создайте отдельные стандарты для маленьких, средних и больших диагоналей. И настройте отображение под каждый из них.
13. Непродуманный дизайн мобильной версии
Понимаю, если вы заказали дорогой дизайн у крутого специалиста, жертвовать какими-то его элементами ради мобильной версии не хочется. Но тут ничего не поделаешь.
Есть 2 варианта:
- заказать отдельный дизайн для мобильных платформ;
- изменить существующий для корректного отображения.
Жертвуйте любыми элементами, которые можно редактировать. Правильно структурируйте контент, триггеры и другие продающие элементы. Возможно, внешний вид сайта от этого пострадает. Зато конверсия повысится. А это главное, не так ли?
Возможно, придется заменить фоны или графические изображения на сайте. Это тоже нормально. Если не хотите тратиться на дополнительную версию дизайна, проконсультируйтесь со специалистом по поводу того, как лучше настроить страницу для мобильных платформ.
14. Неоптимизированный мультимедийный контент
Прежде чем добавить видео, аудио или изображение на сайт, подумайте, как это скажется на скорости загрузки. Даже если вы вставляете ролик с YouTube отдельным HTML-кодом, ресурс может стать тяжелее.
Не перегружайте страницу! Оптимизируйте каждый элемент.
Постоянно тестируйте сервисы для определения скорости загрузки. Это поможет правильно вставить видео и аудио.
Изображения загружаются на саму страницу, поэтому использовать сторонние сервисы не получится. Зато вы можете заранее облегчить картинки.
Используйте сервис Optimizilla.
Адаптивная и мобильная версия – разные вещи. Запомните это. Ресурс, адаптированный под телефоны, просто корректно отображается на маленьком дисплее с другим соотношением сторон. Мобильная версия полностью отличается от полной. Это, по сути, другой сайт по той же ссылке, который НЕ отображается на компьютерах.
У этой версии сайта есть 2 основных преимущества:
- Высокие позиции в поисковых системах
Google понимает, удобно ли будет просматривать ваш сайт пользователю с мобильной платформы. И поднимает вас выше, если ресурс удобнее, чем у конкурентов. К тому же, возле вашей ссылки появляется пометка “Для мобильных”. Еще до перехода пользователь понимает, что сайт нормально отобразится на его девайсе.
- Универсальность, независимость от конкретного устройства
Мобильная версия сама подстраивает элементы сайта для корректного отображения на устройствах с любой диагональю. Вам не нужно отдельно настраивать шрифты и картинки для смартфоном, планшетов и так далее. Ресурс сам перестроится, в зависимости от экрана пользователя.
Тестируйте готовую мобильную версию самостоятельно. В интернете есть много сервисов для модуляции экрана смартфона. Но лучше проверить все на настоящем девайсе и убедиться в работоспособности.
Заключение
Мобильный рынок развивается с сумасшедшей скоростью. Недавно выпущенные iPhone 8 и iPhone X создали неимоверный ажиотаж вокруг Apple. А еще ведь есть Samsung со своими Galaxy S8 и Galaxy Note 8, Google с Pixel 2 и десятки других достойных флагманов.
Спрос на мощные смартфоны огромный. Это значит, что еще больше пользователей начнут использовать мобильные платформы для web-серфинга. Понимаете, что это значит? Вам в обязательном порядке нужно прямо сейчас создать мобильную версию всего вашего бизнеса и устранить все возможные ошибки.
Жмите “Мне нравится”, если понимаете, что ваша аудитория тоже активно пользуется смартфонами, и собираетесь влиять на ситуацию.
Вы уже используете видео для продвижения бизнеса? Обязательно посмотрите, Как создать маркетинговое видео, которое продает.