Кейс · Этот сайт

Сайт, который проверяет себя перед каждой выкаткой

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

Страниц 38
Стилей всего 76 КБ
Библиотек в вёрстке 0
01 · Задача

Сайт студии, который сам себе доказательство

Студия продаёт сайты, приложения и автоматизацию. Значит, её собственный сайт — не визитка, а образец: если он тормозит, разъезжается на телефоне или обещает то, чего нет, продавать разработку становится нечем.

Отсюда требование, которое звучит скучно и определяет всё остальное: сайт должен выдерживать частые правки без того, чтобы что-то незаметно ломалось. Правок здесь много — цены, новые страницы, кейсы, гео. Ломается всегда не то, что правили.

02 · Кому и с каким возражением

Кто сюда приходит и что его останавливает

Владелец местного дела: салон, типография, автошкола

Возражение: «Мне сделают красиво и уйдут, а я останусь с сайтом, который не умею менять».

Ответ сайта: кейсы, где написано не только что сделали, но и чем проверили и что осталось незакрытым. Плюс прямая цена на страницах услуг, а не «рассчитывается индивидуально».

Тот, кто уже обжёгся на подрядчике

Возражение: «Наобещают и пропадут».

Ответ сайта: у каждой работы живая ссылка — можно открыть и потрогать. Демонстрационные работы подписаны как демонстрационные, и это написано нами, а не обнаружено читателем.

Тот, кто сравнивает с конструктором

Возражение: «Соберу сам за вечер, зачем платить».

Ответ сайта: разбор в блоге про конструктор и чистый код — без запугивания, с честным «в вашем случае конструктора хватит».

03 · Как устроено

Страницы собираются, а не копируются

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

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

Стек намеренно скучный: HTML, свой CSS с переменными, обычный JavaScript. Ни React, ни сборщиков, ни модных библиотек. Сервер — четыре зависимости на всё про всё. Причина простая: всё, что подключено, однажды придётся обновлять, а сайт местной студии должен пережить год без внимания.

04 · Что решает машина

Цена живёт в одном месте — и это проверяется

Цена на сайте есть в четырёх местах сразу: на страницах услуг, в прайсе бота, в рекламных макетах и в разметке для поисковиков. Пока она записана числом в каждом из них, она разъезжается — не по небрежности, а сама собой, по очереди.

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

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

Сроки — то же самое и по той же причине. «От 3 дней» на первом экране при «от 7 дней» в прайсе — это обещание, которое нечем закрыть.

05 · Сторона владельца

Заявка уходит в несколько каналов сразу

Один мессенджер — это одна точка отказа. В России это не теория: в августе один из мессенджеров перестал открываться, и проекты, завязанные на него одним, остались без заявок.

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

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

06 · Чем проверено

Пять проверок, каждая куплена своей поломкой

Ни одна из них не придумана заранее. Каждая появилась после того, как что-то сломалось молча.

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

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

Честно

Чего на этом сайте нет и почему

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

Нет чужих логотипов «нам доверяют». Логотип ставится с разрешения, а не для веса.

Нет всплывающих окон, которые ловят у выхода. Они поднимают заявки и портят впечатление — а мы продаём вторую и третью работу тому же человеку, а не первую всем подряд.

Нет счётчиков посещаемости в шапке и «уже 1500 клиентов». Это проверяемое заявление, и одно несовпадение стоит доверия ко всему остальному.

Смотрите также