Как сделать мобильный сайт в 2026: адаптивность и версия для телефона

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

Что значит «мобильный сайт»: адаптивность и мобильная версия

Заниматься мобильной версией стоит хотя бы потому, что телефон давно стал основным устройством выхода в сеть: глобально с мобильных приходит больше половины всего веб-трафика.

Есть два подхода. Адаптивный дизайн: один и тот же адрес и один код, но раскладка перестраивается под ширину экрана. Отдельная мобильная версия: сайт на другом адресе (обычно m.site.ru) специально для телефонов. Google рекомендует именно адаптивный подход как основной, потому что у страницы один URL и один HTML для всех устройств, за таким сайтом проще следить.

Почему это важно для поиска: с июля 2024 года Google индексирует все сайты по их мобильной версии (mobile-first indexing применяется к 100% сайтов). То есть позиции в выдаче, в том числе на десктопе, поисковик определяет по тому, как страница выглядит и работает на телефоне (Search Engine Land). Если мобильная версия неудобная, страдает весь сайт.

Способ 1. Конструктор с автоадаптивностью

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

Например, в Тильде каждый стандартный блок имеет базовую адаптивность, которая срабатывает сама при загрузке на разных устройствах, а при желании мобильный вид блока можно донастроить вручную: размер шрифта, ширину картинок, порядок элементов (справка Tilda). Адаптивность даже можно полностью отключить в настройках страницы, но по умолчанию лучше её оставить включённой (ответы Tilda). Как собрать сайт на этом конструкторе с нуля, мы подробно разбирали в отдельном материале про сайт на Тильде.

Что важно проверять в конструкторе: на телефоне часто ломаются самодельные секции (в Тильде это Zero Block), где вы двигали элементы мышкой. Их мобильный вид почти всегда нужно поправлять отдельно, автоматика тут помогает меньше.

По теме: Как сделать сайт-визитку в 2026: три способа и готовый промпт

Способ 2. Вайбкодинг: адаптив описываете словами

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

1. Сформулируйте задачу и сразу добавьте требование мобильности: «Сделай лендинг для мастерской, адаптивный под телефон и планшет, кнопки крупные, меню на мобильном сворачивается в бургер».
2. Получите первый вариант и откройте его на узком экране прямо в предпросмотре.
3. Дайте нейросети правки по-русски: «на телефоне шапка налезает на текст», «сделай карточки в один столбец на мобильном». Она переделает код.
4. Повторяйте, пока раскладка не станет аккуратной и на широком, и на узком экране.

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

Способ 3. Адаптив вручную, если вы в коде

Тем, кто пишет разметку сам (или через ИИ, но хочет понимать, что под капотом), адаптивность держится на трёх вещах. Первое: тег viewport в шапке страницы, без него телефон покажет десктопную ширину и мелко её ужмёт. Правильная запись, это width=device-width, initial-scale=1, и в неё не стоит добавлять запрет на зум, иначе людям будет неудобно (ClickRank).

• Медиазапросы (@media): правила, которые меняют раскладку по ширине экрана, например переносят колонки в один столбец на узком.
• Относительные единицы вместо жёстких пикселей: проценты, rem, современные сетки Flexbox и Grid тянутся под экран сами.
• Картинки шириной не больше контейнера, чтобы они не вылезали за край и не заставляли листать вбок.

Это уже уровень вёрстки, и на нём как раз удобно подключать вайбкодинг: описать нужные брейкпоинты словами быстрее, чем набирать медиазапросы вручную.

По теме: Как сделать сайт меньше в 2026: вес страницы и скорость загрузки

Как проверить сайт на телефоне

Проверка, это половина дела. Порядок простой:

1. Откройте сайт на своём реальном телефоне. Это главный тест: как раз здесь видно живые касания, скорость и переносы.
2. Включите режим устройства в браузере на компьютере. В Chrome это DevTools по F12 и переключатель Ctrl+Shift+M, дальше выбираете пресет iPhone или Pixel и смотрите раскладку на разных экранах (Chrome DevTools).
3. Дайте страницу паре знакомых с разными телефонами. Чужой Android или старый экран часто вскрывает то, что на вашем не заметно.
4. Проверьте скорость: тяжёлые картинки на мобильном интернете грузятся заметно дольше.

Режим устройства в браузере, это только первое приближение: код на нём не исполняется по-настоящему, поэтому финальную проверку всегда делайте на живом телефоне.

Частые ошибки мобильной вёрстки

• Забыли тег viewport, и телефон показывает мелкую десктопную копию, которую приходится растягивать пальцами.
• Горизонтальная прокрутка: какой-то элемент шире экрана, и страница ездит вбок. Обычно виноваты широкая картинка или таблица.
• Мелкие кнопки и ссылки впритык друг к другу, по ним сложно попасть пальцем.
• Слишком мелкий шрифт: текст, который на мониторе читался, на телефоне превращается в микроскопический.
• Всплывающее окно на пол-экрана без заметного крестика, закрыть его на телефоне почти нельзя.
• Тяжёлые картинки и видео, которые долго грузятся на мобильном интернете.

Проектируйте сразу от телефона: если макет аккуратно собирается на узком экране, на широком он почти всегда разложится сам. Обратный путь, от десктопа к мобильному, обычно даёт больше правок.

Частые вопросы

Мобильный сайт и адаптивный сайт, это одно и то же?

Почти. Адаптивный сайт, это один сайт, который сам подстраивается под любой экран, в том числе под телефон. Отдельная мобильная версия на адресе m.site.ru, это уже другой подход, сегодня его выбирают редко, а поисковики советуют именно адаптивный.

Нужно ли делать отдельный сайт для телефона?

Как правило, нет. Достаточно одного адаптивного сайта: и дешевле, и проще поддерживать, и поисковику понятнее, ведь у страницы один адрес и один код.

Можно ли сделать мобильный сайт бесплатно?

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

Как быстро понять, что сайт неудобен на телефоне?

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