Сайт веб-студии со своим конструктором кейсов: 16 типов блоков, история версий, две темы

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

Отсюда требования:

- главная, которая одинаково хорошо работает на компьютере и телефоне, в светлой и тёмной теме;

- закрытая админка, где кейс собирается из блоков, сохраняется черновиком и публикуется, а неудачную версию можно откатить;

- страницы кейсов, которые нормально видят поисковики и мессенджеры при пересылке ссылки;

- русская и английская версии по одним адресам;

- никаких персональных данных посетителей на сайте;

- выкладка без ручной работы на сервере.

Главная: услуги с ценой и сроком

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

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

Как мы работаем, без длинного текста

Вместо абзаца про этапы сделали живую схему: от клиента через бриф, дизайн, UX/UI, разработку и тестирование к готовому продукту. Линия сама проходит этапы по очереди, у каждого всплывает карточка со сроком и тем, что в него входит. Схему можно запустить заново кнопкой «Повторить». Так за несколько секунд видно весь путь проекта и сколько примерно длится каждый шаг.

Телефон и тёмная тема

На экранах до 900 пикселей своя шапка и своё меню. Вверху страницы шапка стоит на месте. Когда человек листает, она появляется, а примерно через секунду без движения снова прячется и не закрывает текст. Отдельно учли особенность Safari на iOS, из-за которой строка состояния окрашивалась не в цвет страницы.

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

Свой конструктор кейсов

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

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

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

Картинки и видео лежат в своём хранилище, в админке есть медиатека. Вход в админку через Telegram, и пускает он только тех, кто есть в списке администраторов.

Поисковики и пересылка ссылок

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

Русская версия основная, её видят поисковики. Если браузер просит английский, человек получает английскую версию по тем же адресам.

Без персональных данных и ручной выкладки

На сайте нет формы заявки: посетитель пишет на почту, в Telegram или звонит. Поэтому сайт не собирает и не хранит ни имён, ни телефонов, ни IP-адресов посетителей. Если форма когда-нибудь понадобится, она пойдёт только вместе с согласием и хранением данных в России. Работает сайт на выделенном сервере в России, HTTPS-сертификаты продлеваются сами.

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

У студии есть свой сайт без шаблона, и мы развиваем его сами.

• Восемь услуг на главной с ценой, сроком и составом, схема этапов работы, контакты в один клик.

• Мобильная версия со своим меню и светлая и тёмная темы, контраст текста по WCAG AA.

• Собственный конструктор кейсов: 16 типов блоков, черновики, публикация, история версий с откатом, просмотр в трёх ширинах экрана. Все три кейса на сайте собраны из его блоков.

• Страницы кейсов приходят от сервера целиком, с заголовком и описанием для поиска и превью ссылок.

• Русская и английская версии по одним адресам.

• Сайт не хранит персональных данных посетителей, сервер в России.

• Выкладка без ручной работы: тесты, резервная копия и автоматический откат.

Цифр посещаемости и заявок не приводим: замеров пока нет. Сайт продолжаем развивать.