CSS простыми словами: почему сайт «едет» на телефоне и как это влияет на продажи

CSS (Cascading Style Sheets) - язык оформления сайта: цвета, шрифты, отступы, расположение блоков, адаптация под экран телефона. Если HTML задаёт «скелет» страницы, а JavaScript - поведение кнопок и форм, то CSS отвечает за то, как всё это выглядит на мониторе и в кармане у клиента. Когда владелец говорит «сайт едет на телефоне», почти всегда виноваты стили: фиксированная ширина, мелкий текст, кнопка «Купить» за пределами экрана, горизонтальная прокрутка, форма, которую нельзя заполнить пальцем. В 2026 году больше половины заявок с коммерческих сайтов приходит с мобильных - плохая вёрстка бьёт по конверсии напрямую, а не «когда-нибудь поправим».

• CSS - оформление: цвета, шрифты, сетка, адаптив под разные экраны
• «Сайт едет» - горизонтальный скролл, наезд блоков, обрезанный текст, кнопки вне зоны нажатия
• Зачем владельцу - мобильные клиенты не дожидаются «десктопной версии», они уходят к конкуренту
• Связка - HTML (структура) + CSS (вид) + JS (интерактив); без CSS страница - «голый» текст
• Главный риск - красивый макет в Figma на десктопе и сломанная корзина на iPhone

CSS простыми словами

CSS - набор правил для браузера: «заголовок - 24 пикселя и синий», «кнопка - на всю ширину на телефоне», «боковое меню - спрятать на экранах уже 768 пикселей». Это не программирование в привычном смысле - вы описываете внешний вид, а не бизнес-логику.

Слой	Что делает	Аналогия
HTML	Заголовки, текст, формы, ссылки	Каркас здания
CSS	Цвета, шрифты, отступы, сетка, адаптив	Отделка и планировка
JavaScript	Корзина, слайдер, валидация формы	Лифт, сигнализация, умный свет
PHP / backend	Заказы, оплата, база данных	Инженерные системы за стеной

Важно: подрядчик может показать идеальный сайт на вашем ноутбуке - и при этом 70% посетителей увидят другую картину на телефоне, если CSS не настроен под мобильные экраны.

Почему сайт «едет» на телефоне

«Едет» - разговорное название для набора проблем адаптивной вёрстки. Типичные симптомы и их CSS-причины:

Горизонтальная прокрутка

Появляется полоса прокрутки влево-вправо - пользователь видит «обрезанный» сайт. Чаще всего:

• блоку задали фиксированную ширину (например, 1200 px) без ограничения max-width: 100%;
• большая таблица цен или каталог не перестраивается на узком экране;
• баннер или видео шире экрана телефона.

Налезание блоков

Текст наезжает на кнопку, цена уходит под фото, меню перекрывает заголовок:

• элементы стоят абсолютным позиционированием «как на макете 1920 px»;
• не хватает отступов (margin/padding) на малых экранах;
• шрифт не уменьшается, а контейнер не растёт - контент вылезает за границы.

Мелкий текст и кнопки

На телефоне нельзя прочитать условия доставки или попасть пальцем в «Оформить заказ»:

• размер шрифта меньше 14-16 px для основного текста;
• кнопки уже 44 px по высоте (рекомендация Apple и Google для зоны нажатия);
• ссылки в подвале стоят вплотную - промах и уход со страницы.

«Десктопная» версия на мобильном

Сайт открывается, но всё мелкое - приходится увеличивать пальцами:

• нет viewport в HTML (<meta name="viewport" ...>) - браузер «сжимает» десктоп;
• подрядчик сделал отдельный m.-субдомен и забыл про редирект;
• используется устаревший шаблон без media queries (правил «на экранах до 768 px делай так»).

Что проверить за 5 минут без кода

1. Откройте сайт на своём телефоне (не только в эмуляторе у подрядчика).
2. Пройдите путь главная - каталог - карточка - корзина - оплата.
3. Поверните экран вертикально и горизонтально - ничего не должно «ломаться».
4. Попробуйте заполнить форму заявки одной рукой.
5. Сравните с сайтом конкурента в той же нише - если у них удобнее, ваш CSS проигрывает.

Как «поехавший» мобильный сайт бьёт по продажам

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

Симптом на мобильном	Поведение клиента	Удар по бизнесу
Горизонтальный скролл	Раздражение, закрытие вкладки за 3-5 сек	Потерянный лид, рост отказов
Кнопка «Купить» не видна	Уход в поиск «купить X рядом»	Продажа конкуренту
Форма не влезает на экран	Бросает на полпути	Меньше заявок с рекламы и SEO
Медленная загрузка из-за тяжёлого CSS/шрифтов	Ожидание 4+ сек на 4G	До 40% уходят до загрузки
Нечитаемые цены и условия	Недоверие («сайт кривой - компания сомнительная»)	Снижение конверсии даже при трафике

Цифры для владельца (ориентиры индустрии):

• 53%+ сессий e-commerce в ряде ниш - с мобильных; в локальном сервисе (клиника, автосервис) доля звонков с телефона ещё выше.
• Google с 2020-х использует mobile-first indexing: если мобильная версия хуже, страдает и выдача, и органические заявки.
• Исправление критичных CSS-ошибок на checkout часто даёт +10-30% к завершённым заказам без увеличения рекламного бюджета - потому что трафик уже был, а «дыра» была в интерфейсе.

Практика: посчитайте не «сколько у нас посетителей», а сколько заявок с мобильных. Если десктоп конвертирует 4%, а мобильный 0,8% - проблема почти наверняка в вёрстке, скорости или UX, а не в «плохой аудитории с телефонов».

Адаптив, отдельная мобильная версия и приложение

Подрядчики предлагают разные подходы. Кратко для решения на уровне директора:

Адаптивный дизайн (responsive)

Один сайт, CSS перестраивает блоки под ширину экрана. Плюсы: один URL для SEO, проще поддержка. Минусы: нужен грамотный CSS с самого начала; «натянуть» десктоп на телефон постфактум дорого.

Отдельная мобильная версия (m.site.ru)

Второй набор страниц или шаблон для телефонов. Плюсы: иногда быстрее на legacy-проектах. Минусы: два кода, риск рассинхрона цен и акций, путаница в индексации - без настройки редиректов теряете трафик.

PWA / «приложение»

Сайт с иконкой на экране телефона. Имеет смысл при повторных покупках и сложном личном кабинете; для визитки и лендинга - часто избыточно.

Подход	Когда логичен	Бюджет на старте
Адаптивный CSS	Новый сайт, WordPress, типовой магазин	Включён в нормальную вёрстку
Доработка CSS старого сайта	Трафик есть, мобильная конверсия просела	$500 - $3 000 за критичные страницы
Полный редизайн + CSS	Бренд устарел, отказы > 60% на мобильном	$3 000 - $15 000+
Нативное приложение	Сотни тысяч MAU, push, офлайн-корзина	От $15 000, отдельная история

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

Что спросить у подрядчика при приёмке

Не обязательно читать CSS-файлы. Достаточно вопросов и проверок:

1. Какие страницы тестировали на мобильном? Нужен список: главная, каталог, карточка, корзина, оплата, контакты.
2. Есть ли отчёт PageSpeed / Core Web Vitals для мобильной версии? Плохие показатели часто связаны с тяжёлыми стилями и шрифтами.
3. Один URL для всех устройств? Если нет - как настроены редиректы и canonical.
4. Кто правит CSS после сдачи? Смена цвета кнопки не должна ломать корзину; уточните, входит ли мелкая правка в поддержку.
5. Гарантия на мобильную вёрстку - пропишите в акте: «корректное отображение на iOS Safari и Android Chrome последних двух версий».

Полезно заказать точечный SEO-аудит с блоком mobile usability - там часто находят CSS-проблемы, которые визуально «терпимы», но режут конверсию (мелкий шрифт в футере, перекрывающий попап, CLS при загрузке баннера).

Типичные ошибки владельца

1. Смотреть только на десктоп при приёмке - «на моём мониторе красиво» не равно «клиенты покупают».
2. Требовать «как на макете пиксель в пиксель» на телефоне - иногда разумное упрощение блоков повышает конверсию.
3. Добавлять виджеты (чат, попап, cookie-баннер) без проверки на мобильном - они перекрывают кнопку заказа.
4. Экономить на вёрстке, вкладываясь в рекламу - платный трафик утекает в отказы.
5. Менять тему WordPress без теста checkout - новый CSS может сломать только мобильную корзину.

Итог

CSS - это то, как ваш сайт выглядит и удобен ли он на телефоне. Когда владелец говорит «сайт едет», речь почти всегда о стилях и адаптиве, а не о «вирусах» или хостинге. В эпоху mobile-first плохая вёрстка - это прямая потеря заявок: клиент уже пришёл, но не смог нажать «Купить» или прочитать цену.

Имеет смысл:

• проверять ключевой путь покупателя на реальном телефоне до оплаты подрядчику;
• сравнивать конверсию десктоп vs мобильный в аналитике;
• требовать адаптивный CSS на одном URL, а не «потом сделаем мобильную»;
• не гнаться за модными эффектами, если они тормозят загрузку на 4G.

Хороший CSS незаметен - клиент просто оформляет заказ. Плохой - вы платите за рекламу и SEO, а половина аудитории видит «сломанную витрину» в кармане.

Часто задаваемые вопросы

CSS и HTML - это одно и то же?

Нет. HTML описывает структуру: заголовок, абзац, кнопка, форма. CSS описывает оформление: цвет кнопки, размер шрифта, расположение колонок, скрытие меню на телефоне. Без HTML CSS не к чему применять; без CSS страница выглядит как документ из 90-х. Для приёмки сайта проверяйте оба слоя: «есть ли текст для Google» (HTML) и «удобно ли нажать на телефоне» (CSS).

Почему на компьютере сайт нормальный, а на телефоне «едет»?

Потому что на большом мониторе хватает ширины для фиксированной вёрстки, а на экране 390 px те же стили не перестраиваются. Типичные причины: нет адаптивных правил (media queries), таблица или баннер шире экрана, устаревший шаблон с viewport «как для десктопа». Решение - мобильное тестирование и правка CSS, а не просьба клиенту «открывайте с компьютера».

Можно ли исправить мобильную вёрстку без переделки всего сайта?

Часто да. Подрядчик может точечно переписать CSS для главной, каталога и checkout - это дешевле полного редизайна. Не получится «дешёво», если сайт на конструкторе 2012 года с жёсткой сеткой на всех страницах - тогда сравните смету доработки и нового адаптивного шаблона. Минимум: исправить горизонтальный скролл, размер кнопок и форму заказа - это уже влияет на заявки.

Влияет ли «поехавший» сайт на позиции в Google?

Да, косвенно и напрямую. Google оценивает mobile-friendly, Core Web Vitals (скорость, стабильность верстки при загрузке), удобство нажатий. Плохой CSS увеличивает отказы и снижает поведенческие сигналы; в Яндексе мобильный опыт тоже учитывается. Отдельная «кривая» мобильная версия без редиректов может плодить дубли страниц. SEO не заменит вёрстку: можно быть в топе и терять клиентов на сломанной кнопке «Позвонить».

Сколько стоит нормальная адаптивная вёрстка?

Зависит от объёма. Лендинг с адаптивным CSS от профессионала - часто $800 - $2 500. Корпоративный сайт на 10-15 шаблонов - $2 500 - $8 000. Интернет-магазин с уникальным дизайном - $5 000 - $20 000+. Доработка только мобильной корзины на существующем WordPress - $500 - $2 000. Заложите 10-15% бюджета на тестирование на реальных устройствах после сдачи - дешевле, чем месяц рекламы на сайт, где кнопка заказа за экраном.