Сайт виробника напівпричепів WagnerMaier: представницький корпоративний сайт на дві мови

Клієнт: WagnerMaier
Сфера: Авто та мото
Тип сайту: Корпоративний сайт
Здано: грудень 2025

З чого почали

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

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

Що було зроблено

Каталог і картка товару

Чотири моделі напівпричепів винесли в окремі картки з фотогалереєю, відеооглядом у модальному вікні та повними технічними характеристиками. Характеристики керуються через адміністративну панель — менеджер компанії додає й оновлює дані самостійно, без правок коду. На сторінці товару реалізували секцію «Комплектація» з розгортними вкладками для базової FIX-комплектації та опціонального «Бонусу», кожна — з ілюстраціями.

Інтерактивний логотип-одометр

Логотип WagnerMaier зробили як анімований одометр: коли блок потрапляє в зону видимості користувача, цифри «прокручуються», підсилюючи відчуття механічної точності бренду. Анімацію запускали через IntersectionObserver, щоб вона не навантажувала основний потік браузера і не впливала на швидкість сторінки.

Багатомовність

При першому заході сайт визначає регіон користувача за IP і показує відповідну мовну версію інтерфейсу, з можливістю ручного перемикання мови в шапці сайту. Усі SEO-метадані, розмітка Schema.org і теги OpenGraph локалізовані під обидві мовні версії — це дозволило уникнути ведення окремих доменів для кожного ринку.

Ховер-інтерактивність

На головній сторінці картки напівпричепів у каталозі розкривають спливаючий шар із ключовими характеристиками просто при наведенні, анонси новин розгортаються так само, а відеослайдер показує оверлей при ховері, за винятком зони кнопки відтворення. На сторінці «Про компанію» список компонентів складання інтерактивно підсвічує відповідні елементи на схемі напівпричепа, а картки вакансій розкривають опис при наведенні й ведуть на детальну сторінку вакансії.

Продуктивність

Усі зображення сконвертували у WebP зі ступенем стиснення від 75%, фірмовий шрифт заголовків підключили у форматі WOFF2, скрипти аналітики завантажуються асинхронно через Google Tag Manager. У підсумку всі сторінки на десктопі й мобільних пристроях показують оцінку Google PageSpeed Insights від 90 балів — вимогу «все в зеленій зоні» виконали повністю.

Аналітика та конверсії

Налаштували цілі в кількох аналітичних системах: відправлення форми, клік по номеру телефона, клік по email. Окрема система підключена для наскрізної аналітики рекламних джерел, а Google Tag Manager використали як єдину точку керування всіма пікселями — п'ять аналітичних систем працюють узгоджено, без дублювання подій.

Технічна база

Сайт зібрали з опорою на HTML5, CSS3 і JavaScript (ES6+), з можливістю розгортання на WordPress або іншій CMS за вибором клієнта. Верстка — статична, центрована, коректно працює в діапазоні від 280 px до 1920 px без горизонтального скролу на будь-якому екрані. Усі адреси зроблені ЧПУ, код валідний за стандартами W3C, кодування — UTF-8.

Виклики проєкту

Головна складність полягала в тому, що сайт мав одночасно відповідати двом аудиторіям з різними мовами, очікуваннями й регіональними налаштуваннями — і робити це непомітно для користувача, автовизначаючи регіон за IP, без плутанини з дублюючимся контентом для пошукових систем. Другий виклик — поєднати вимогливу до продуктивності анімовану механіку (одометр-логотип, ховер-ефекти на картках і схемах) з жорсткою вимогою тримати всі метрики PageSpeed у зеленій зоні: довелося виносити важку графіку у WebP, підключати шрифти через WOFF2 і уникати блокуючих основний потік скриптів. Третім важливим моментом стала передача керування каталогом і вакансіями на бік клієнта — адмінка спроєктована так, щоб менеджер компанії міг оновлювати технічні характеристики моделей і публікувати вакансії самостійно.

Результат

Сайт WagnerMaier відповідає вимогам пошукових систем за технічним SEO: валідний HTML5-код, мікророзмітка Schema.org і OpenGraph, ЧПУ-адреси, відсутність горизонтального скролу на будь-якому розрішенні. Менеджмент компанії отримав зручну CMS-панель для самостійного керування каталогом товарів, новинами й вакансіями без залучення розробника. Багатомовна архітектура дозволяє WagnerMaier одночасно працювати з двома ринками, не підтримуючи для цього окремі домени.