Как подготовить сайт
к мобильному трафику?

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

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

Далее: как сделать сайт удобным для посещения с мобильных устройств?

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

Мобильная адаптация - это самый распространенный способ подготовки сайта под разные экраны.

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

▶ Дизайнер разрабатывает макеты страниц отдельно для ПК, планшетов и смартфонов, а далее при верстке разработчик задает для каждого макета соответствующие размеры и разрешение экрана. Как только пользователь попадает на сайт, система распознает его устройство – отображается нужный «динамический» интерфейс.

▶ При разработке сайта на конструкторе страницы могут адаптироваться сами - в Tilda именно это происходит при использовании стандартных блоков.

При работе с Zero-блоками веб-дизайнер самостоятельно располагает элементы каждого блока для разных экранов.

В Тильде в zero-блоках веб-дизайнеру предлагается несколько экранов, справа налево:

1) ПК (иконка ноутбука): 1200-MAX
2) Планшеты: 960-200 px
3) Планшеты: 640-960 px
4) Смартфоны: 480-640 px
5) Смартфоны: 320-480 px

Для каждого из устройств, попадающего в определенный диапазон, будет показан свой вариант адаптации zero-блока.

При мобильной верстке подразумевается разработка отдельной версии сайта для посещения только с мобильных устройств – смартфонов и планшетов.

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

Использование респонсивного дизайна позволяет использовать один и тот же макет веб-страницы для разных устройств – «сжимая» и «разжимая» его. Эта технология подходит только для простого дизайна.

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

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

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

Пример: размер формы обратной связи по отношению к iPhone X - поля занимают почти всю ширину экрана.

Пример адаптации блока. На ПК версии в ряду располагаются две карточки, в то время как на смартфоне - по одной (по две было бы мелко и тесно). Обратите внимание, как поменялась ширина кнопки по отношению к экрану при его уменьшении.

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

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

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

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

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

Единственное условие - визуальная гармония. Пользователь не должен напрягаться, изучая контент.

▶ Если вы работаете в Tilda, у текстовых описаний не стоит делать размер - size - меньше 16. Это относится не только к мобильным устройствам, но и к ПК.

▶ Выбирая ширину текста, нужно ориентироваться не на дизайн, а на читабельность - на мобильных устройствах это 30-40 знаков в строке.

▶ При адаптации ни в коем случае не пытайтесь поместить текст на площадь, которой недостаточно. Речь идет о трекинге/кернинге и интерлиньяже - о расстоянии между буквами одного слова или строчками. Большинство шрифтов имеют приятные для нашего глаза изначальные расстояния. Но если вы все же захотите поиграть с интерлиньяжем, то помните, вертикальное пространство между строчками должно быть где-то на 30% больше высоты знака.

Пример блока (320-480) на Тильде и размеры шрифтов.

Пример блока на Тильде (ПК) и размеры шрифтов.

Большинство современных сайтов, конечно же, адекватно отображаются на разных устройствах. Редко, когда компании пренебрегают мобильным трафиком и ждут клиентов только с ПК, потому что мобильных устройств с каждым годом становится все больше. Тем более что уже есть люди, отказавшиеся от компьютеров.

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

▶ Неудобная навигация. Привычные пользователям ПК шапка и подвал (header и footer) не всегда смотрятся презентабельно на смартфонах. Поэтому при адаптации от них часто отказываются, заменяя мобильным меню, например, «гамбургером».

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

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

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

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

Удобный сайт – прямой путь к улучшению поведенческого фактора!

Повышение репутации сайта и уважение аудитории

Понижение отказов

Улучшение поведенческих факторов

Повышение скорости загрузки страницы на мобильных устройствах

Увеличение трафика

Увеличение конверсии

Улучшение позиций в поисковой выдаче

Повышение эффективности рекламы

Улучшение юзабилити: уменьшение полосы прокрутки, упрощение навигации по сайту
(в сравнении с ПК версией), повышение удобства чтения и взаимодействия с элементами сайта

▶ При помощи панели разработчика (F12, ctrl+shift+I)

▶ На реальных устройствах

▶ В конструкторе Тильда в «предпросмотре» (подходит только для самостоятельной оценки дизайна внутри конструктора)

▶ При помощи онлайн-сервисов. Например, https://search.google.com/test/mobile-friendly у Google или https://webmaster.yandex.ru/site/tools/mobile-friendly/ у Яндекса

▶ Проверка скорости сайта: https://pr-cy.ru/speed_test/

Пример: проверка страницы по https://search.google.com/test/mobile-friendly.
Чтобы проверять сайт в Яндексе, нужно сначала внести его в Вебмастер.
А у Google достаточно вставить ссылку в специальное поле и нажать кнопку "проверить страницу".

Пример: проверка страницы в Вебмастере.

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

▶ При помощи панели разработчика
(F12, ctrl+shift+I)

▶ На реальных устройствах

▶ В конструкторе Тильда в «предпросмотре» (подходит только для самостоятельной оценки дизайна внутри конструктора)

▶ При помощи онлайн-сервисов.
Например, search.google.com/test/mobile-friendly у Google

или webmaster.yandex.ru/site/tools/mobile-frie... у Яндекса

▶ Проверка скорости сайта:
https://pr-cy.ru/speed_test/

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

Нужна ли адаптация? Мнение Спектр ВЕБ: ДА!

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