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 ставлять звичайному тексту, і потребував темнішого відтінку. Обидві речі виявилися лише завдяки виміру, а не огляду.

Шість шаблонів — подивіться наживо

Усі відкриваються звичайно в браузері. Це не справжні фірми — назви, телефони, відгуки і ціни є прикладами, а кожен шаблон має вгорі постійну смугу з цим попередженням.

Повний перелік з описами і знімками екрана: усі шаблони в одному місці.

Що з цього випливає для вашого сайту

Якщо сайт є, а телефон мовчить, перевірте на власному телефоні три речі. Перше: чи в першому екрані видно, що саме отримує клієнт, чи лише назву фірми і фото. Друге: чи можна дізнатися порядок ціни без дзвінка. Третє: чи замість прикметників є перевірювані речі — терміни, числа, допуски, відгуки з прізвищем.

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

Часті запитання