DITECH — сайт производства металлоизделий
DITECH · металлообработка с ЧПУ, Минск
DITECH — минский производитель металлоизделий: токарная и фрезерная обработка с ЧПУ, лазерная резка и сварные конструкции. Нужен был сайт, который выглядит как современное производство и превращает посетителя в заявку. Мы спроектировали и собрали многостраничник с нуля — от главной до блога — и отдельно готовую CMS, чтобы контент можно было вести без программиста.
Задача
- У завода не было сайта, который отражал бы уровень производства и собирал заявки. Услуги, парк станков и примеры работ жили в переписке и презентациях, а не на одной площадке, куда можно привести клиента из поиска и рекламы.
Что сделали
- Спроектировали структуру: главная, детальные страницы услуг, портфолио с фильтрами, оборудование, блог и контакты.
- Сверстали по макету Figma без фреймворков — чистые HTML/CSS/JS, быстрые WebP-изображения и адаптив от 1920 до 480px.
- Собрали интерактив без библиотек: слайдеры с drag/swipe, FAQ-аккордеон, фильтры карточек, маска телефона +375, модалки и валидация форм.
- Сделали отдельную WordPress-тему: портфолио, услуги, оборудование и блог редактируются в админке, заявки уходят на e-mail и в Telegram.
- Заложили SEO: уникальные title/description, семантика, микроразметка, robots.txt и sitemap.xml на каждой странице.
Результат
- Готовый сайт-витрина производства: услуги, портфолио, оборудование и блог на одной площадке.
- Заявки с форм приходят на почту и в Telegram — клиент отвечает прямо из мессенджера.
- Контент ведётся через админку без разработчика; сайт готов к продвижению в поиске.
Почему без фреймворка
Сайт производства — это статичный по своей природе контент: услуги, парк станков, примеры работ, контакты. Такое не требует ни клиентского роутера, ни рантайма фреймворка, ни сборщика. Вёрстка сделана на чистых HTML, CSS и JavaScript по макету Figma, и это осознанный выбор, а не экономия.
Выигрыш прямой: браузеру нечего исполнять до того, как показать страницу, поэтому первый экран появляется сразу. У завода, который приводит клиента из поиска и рекламы, скорость загрузки конвертируется в заявки заметнее, чем любой интерфейсный эффект.
Интерактив без библиотек
Слайдеры с перетаскиванием и свайпом, аккордеон в разделе вопросов, фильтры карточек портфолио, маска телефона под формат +375, модальные окна и валидация форм — всё это написано вручную, без подключения готовых пакетов.
Причина та же, что и с фреймворком: каждая библиотека ради одного слайдера тянет за собой десятки килобайт, которые пользователь скачивает до того, как увидит первую фотографию цеха. На сайте, где решает скорость, это плохой обмен.
Отдельная тема WordPress: контент без разработчика
Сверстанный сайт — это половина задачи. Вторая половина в том, что услуги, оборудование, портфолио и блог должны редактироваться сотрудником завода, а не письмом подрядчику.
Поэтому вёрстка перенесена в собственную тему WordPress: каждая сущность заведена отдельным типом записей со своими полями, и добавление нового станка или проекта — это заполнение формы в админке. Разработчик после сдачи для наполнения не нужен.
Заявка, которая доходит
Форма на сайте бесполезна, если письмо ушло в спам, а менеджер узнал об этом через неделю. Заявки отправляются сразу по двум каналам: на почту как архив и в Telegram как уведомление, на которое отвечают за минуты.
Маска ввода под белорусский формат +375 и проверка полей на стороне браузера убирают самую частую причину потерянного лида — телефон с опечаткой, по которому невозможно перезвонить.
SEO заложено на этапе вёрстки
Уникальные title и description на каждой странице, осмысленная структура заголовков, микроразметка, robots.txt и sitemap.xml сделаны сразу, а не добавлялись потом отдельным этапом. Изображения выгружены в WebP и подогнаны по размеру, адаптив покрывает диапазон от 1920 до 480 пикселей.
Это тот минимум, без которого продвижение начинается с оплаты исправлений. С ним сайт готов к поиску и рекламе в день сдачи.
Как это выглядит
