Case study

Шесть шаблонов сайтов для сервисных компаний — что мы в них изменили и почему

3 сентября 2026 · чтение ~8 мин

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

Почему шесть, а не один

Один пример всегда провоцирует один и тот же вопрос: «ну хорошо, а у меня иначе». И справедливо — кровельщик продаёт иначе, чем столяр, потому что клиент приходит к ним с разными страхами. К кровельщику — со страхом, что заплатит за то, чего не увидит своими глазами. К столяру — со страхом, что мебель не подойдёт к уже имеющемуся интерьеру.

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

Что есть в каждом из шести

1. Заголовок, который говорит, что получает клиент — а не что делает компания

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

2. Калькулятор стоимости из четырёх вопросов

Это элемент, который чаще всего отличает сайт, приносящий запросы, от того, который просто существует. Клиент хочет знать порядок величины, прежде чем кому-то дать номер телефона. Если этой информации он не найдёт у вас, найдёт у кого-то другого.

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

3. Доказательства вместо прилагательных

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

4. Мобильная версия, спроектированная отдельно

Большинство трафика в этих отраслях — телефон, и всё же мобильная версия обычно возникает как побочный продукт: та же вёрстка, только уже. Это обычно не работает. Фото из заголовка выталкивает текст за первый экран, номер телефона разбивает шапку на три строки, кнопки слишком тесны для большого пальца.

В этих шаблонах на телефоне заголовок лежит поверх фото, а не под ним; в шапке остаётся логотип и одна кнопка; номер телефона переезжает в закреплённую полосу внизу экрана, а галереи сходят с четырёх колонок до двух, чтобы фото не были почтовыми марками.

Что пошло не так — и что из этого следует

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

Картинка, растянутая атрибутом в HTML

Фото в заголовке одного из шаблонов рендерилось как 473 × 900 пикселей вместо 473 × 304 — оно было растянуто по вертикали и раздувало всю секцию до более чем тысячи пикселей в высоту. Причина: атрибуты width и height в HTML работают как подсказка стиля, а правило aspect-ratio действует только тогда, когда один из размеров выставлен в auto (документация MDN). Наше правило задавало ширину, но не высоту, поэтому высота была взята из атрибута и изображение потеряло пропорции. Без измерения реальных размеров в браузере никто не назвал бы это ошибкой — просто «как-то странно выглядит».

Правка, которая никогда не выполнилась

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

Исчезновение элементов при быстрой прокрутке

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

Заголовок, закрывавший информационную полосу

У закреплённого заголовка было жёстко прописано расстояние сверху, рассчитанное для экрана компьютера. На узком телефоне текст полосы переносился на три строки, полоса выросла до 72 пикселей, и заголовок наехал на неё, закрыв 35 пикселей текста. Решение: скрипт измеряет высоту полосы вживую и передаёт её в стили — в том числе после поворота экрана.

Числа без пробелов и текст на грани читаемости

Польское форматирование чисел по умолчанию не группирует четырёхзначные значения, поэтому в результате калькулятора появлялось «5600» вместо «5 600» — мелочь, но в прайсе читается хуже. Отдельно выяснилось, что после осветления подложки под заголовком вспомогательный текст опускался ниже порога контраста 4,5:1, который рекомендации WCAG ставят обычному тексту, и требовал более тёмного оттенка. Обе вещи выявились только благодаря замеру, а не осмотру.

Шесть шаблонов — посмотрите вживую

Все открываются обычно в браузере. Это не настоящие компании — названия, телефоны, отзывы и цены являются примерами, а каждый шаблон имеет вверху постоянную полосу с этим предупреждением.

Полный перечень с описаниями и снимками экрана: все шаблоны в одном месте.

Что из этого следует для вашего сайта

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

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

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