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

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

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

Мобильная адаптация

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

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

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

При разработке сайта на конструкторе страницы могут адаптироваться сами - в 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/

На что нужно обратить внимание при мобильной адаптации? Несколько советов по адаптации сайта

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

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

Также не старайтесь поместить на небольшой площади «все на свете». Особенно не ставьте близко друг к другу элементы с ссылками, кнопки. Во-первых, смотрится это весьма хаосно, а потом – неудобно для пользователей (можно случайно нажать не туда).
Не используйте flash-элементы
Не используйте flash-элементы – динамические изображения, потому что не все устройства их поддерживают.
Откажитесь от анимации
Откажитесь от анимации или минимизируйте ее на мобильной версии. Опять же, ради ускорения загрузки.
Откажитесь от шапки и/или подвала
Откажитесь от шапки и/или подвала, заменив эти пути навигации мобильным меню. Например, «гамбургером». Навигация по сайту должна быть как можно проще. Если хотите оставить header, то максимально упростите его: уменьшите лого и уберите лишнюю информацию (режим работы, адрес…) – лучше поместите туда «читабельный» и кликабельный номер телефона или иконки вашего ватсапа/телеграма.
Упрощайте формы обратной связи
Не нужно устраивать из форм регистрации опросники на 5 минут. Во-первых, пользователи не любят лишнее оставление данных, а во-вторых, это неудобно для мобильных устройств. Оставьте пару важных полей – имя и телефон (+ e-mail).
Оптимизируйте изображения
Постарайтесь, чтобы фото на вашей странице весили как можно меньше. Не используйте неоправданно большие картинки. Оптимальная скорость загрузки страницы – 2-3 секунды. Подробнее про оптимизацию читайте тут.
Уберите рекламу и всплывающие окна
Уберите рекламу и всплывающие окна с версии для мобильных устройств. Если человек зашел на сайт со смартфона и тут же попал на окно, которое «непонятно, как убрать», в большинстве случаев он тут же покинет страницу.
Поймите правильно, альтернатива!
Если делаете мобильную версию сайта (второй сайт), то позаботьтесь о том, чтобы поисковики не восприняли это за дублирование и не наложили санкции.

Решение: в коде для изначальной версии используйте тег Link rel=»alternate» и укажите ссылку на мобильный вариант. Пример: http://m.site.com»>.
Разумная экономия.
Если не планируете дополнительные траты на подготовку сайта к мобильным устройствам, а сам сайт не будет иметь сложный функционал, не избегайте конструкторов. Закажите сайт, например, на Tilda.

Так стоит ли адаптировать сайт?

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

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

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