Откройте статистику любого сайта в Таджикистане — с высокой вероятностью 75–85% визитов придут со смартфонов. При этом многие сайты до сих пор проектируются на большом мониторе дизайнера, а мобильная версия получается «ужатой» побочной копией. Mobile-first переворачивает процесс: сначала проектируется экран телефона, где мало места и каждое слово на счету, и только потом макет расширяется для десктопа.

Чем mobile-first отличается от адаптивности

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

Практические правила мобильного экрана

За годы накопились проверенные ориентиры, которые стоит требовать от любого подрядчика:

  • Кнопки и ссылки — не меньше 44×44 пикселя, с отступами, чтобы палец не промахивался
  • Базовый размер текста — от 16 пикселей, иначе посетитель будет масштабировать страницу
  • Главное действие — звонок, заявка, переход в мессенджер — в зоне досягаемости большого пальца, в нижней трети экрана
  • Формы — максимум два-три поля, с правильной клавиатурой (цифровая для телефона)
  • Никаких всплывающих окон, перекрывающих контент: за них Google отдельно понижает в выдаче

Локальная специфика: мессенджеры и трафик

В Душанбе человек со смартфона редко заполняет длинную форму — ему проще нажать кнопку и написать в Telegram или WhatsApp. Поэтому в мобильной версии кнопки мессенджеров должны быть на расстоянии одного касания, а не спрятаны в подвале. Вторая особенность — экономия трафика и нестабильный мобильный интернет за пределами центра города: страница, которая весит 8–10 МБ, для части аудитории просто не откроется. Целиться стоит в 1,5–2 МБ на страницу первого визита. Проверить вес легко: вкладка Network в браузере покажет, что именно тянет страницу вниз — чаще всего это несжатые баннеры и автозапускающиеся видео.

Как проверить свой сайт за десять минут

Возьмите собственный телефон, включите мобильный интернет вместо Wi-Fi и пройдите путь клиента: найдите услугу, посмотрите цену, отправьте заявку. Засеките время и отметьте каждый момент, где пришлось щуриться, промахиваться или ждать. Затем повторите то же на недорогом Android-смартфоне — именно такими пользуется заметная часть аудитории. Этот простой тест выявляет 80% проблем без всяких инструментов.

Если после такой проверки накопился список претензий к собственному сайту — приходите в WeBrand: мы проектируем сайты от мобильного экрана и доводим их до состояния, когда заявку удобно отправить одной рукой по дороге на работу.