Промосайт хімічної фабрики
Зміст
Завдання
Розробити промо-сайт для українського виробника хімічних реагентів: з унікальним дизайном, зручною адмінкою та базовою оптимізацією для пошукових систем. В результаті мала вийти сучасна презентація на WordPress — з повним каталогом продукції та формою для зворотного зв’язку. Тож приборкувачі WordPress взялися до справи та розробили сайт, який точно вартий вашої уваги.
Читайте також:
Інтернет-магазин насосного обладнанняДизайн
Хімічна фабрика «Основа» раніше вже мала свій сайт, тож головним завданням творчого відділу Webnauts став редизайн. Клієнт прагнув осучаснити інтерфейс у наявних корпоративних кольорах і зробити його більш зручним у користуванні:
В результаті вийшов лаконічний промо-сайт у синьо-зелених кольорах, інтерфейс якого дихає попри велику кількість інформації. Все завдяки грамотній структурі сторінок і окремих блоків:
Звісно, що кожен бізнес прагне викликати у потенційних клієнтів довіру. Ми транслювали цю ідею через дизайн, а саме реальні фотографії та установчі документи на головній сторінці.
Каталог
Здавалося б, перевантажений інформацією каталог ризикує виглядати громіздким і заплутаним, та тільки не в руках вебархітекторів Webnauts. Сторінка з каталогом вдало спроєктована: ліворуч можна зручно обрати потрібний розділ, виконаний у вигляді radio buttons, а лаконічні картки при наведенні курсора «розкриваються», що дозволяє ознайомитися з інформацією без необхідності переходити на іншу сторінку:
Товарна сторінка
Сторінка продукту виглядає збалансовано завдяки чергуванню тексту, фото та випадних списків, а блок «Схожі товари» заохочує відвідувачів не полишати сайт, якщо конкретний продукт не задовольнив потреби клієнта:
Наразі сайт продовжує розвиватись і нарощувати кількість сторінок, зокрема нові сторінки каталогу та товарних позицій:
Верстка
Далі естафету прийняв фронтендер і нанизав готовий дизайн на CMS. Саме так, адже не зважаючи на наявність великої кількості готових шаблонів, WordPress прекрасно співіснує з унікальним дизайном.
Звісно, для цього треба заручитися допомогою кваліфікованого розробника, який оживить фірмовий дизайн, використовуючи HTML, CSS і JavaScript.
Окремої уваги заслуговують плавні мікроанімації, що забезпечують цікаву взаємодію, не відволікаючи увагу користувача.
Ховер-ефекти написані на чистому SCSS — синтаксисі мови сценаріїв препроцесора Sass, який економить час на написання коду.
Для створення фотогалерей і модальних вікон була використана JavaScript-бібліотека компонентів інтерфейсу Fancybox:
Тонким завданням стала реалізація функції вибору країни при введенні мобільного номера. Щойно користувач починає вводити телефонний код, автоматично «підтягується» відповідна країна:
Розробка на WordPress
WordPress насправді блискуче рішення для промо-сайту не тільки зовні, а й зсередини. Адміністратори сайту гідно оцінять зручність CMS, адже зрозумілий інтерфейс панелі дозволяє легко та швидко додавати та редагувати контент, причому двома мовами.
Такої функціональності вдалося досягти за допомогою плагінів, а саме:
- GTranslate — для тимчасового автоматичного перекладу через сервіс Google Translate (на момент, коли сайт уже був перенесений на хостинг, а переклади ще були неготові).
- Polylang — для додавання мов і перекладу: від видимих сторінок сайту до меню та віджетів адмін-панелі.
- Yoast SEO — для пошукової оптимізації сайту.
- ACF (Advanced Custom Fields) — для додавання додаткових кастомних полів до екранів редагування адмінки.
- WP All Import / Export — для імпорту / експорту даних на сайт або із сайту шляхом перетягування файлів.
- Flamingo — для тимчасового зберігання повідомлень (допоки клієнт не налаштував корпоративну пошту).
- WP SMTP — для надсилання електронних листів через мережевий протокол SMTP.
- WP Cache — для швидкої обробки кешованих файлів.
- Smush — для оптимізації зображень на сайті, що впливає на швидкість завантаження сторінок.
- CF7 (Contact Form 7) — для керування контактними формами.
Через розширення цього плагіну ми додали функцію захисту сайту від спаму — reCAPTCHA v3.
SEO-оптимізація
Ще на етапі редизайну ми провели внутрішню оптимізацію сайту, а саме:
- Зібрали семантику, аж до мікрочастотних запитів. Оскільки тематика сайту доволі специфічна, і попит у ній загалом низький, для нас було важливо пропрацювати кожен запит.
- Спроєктували семантичну структуру та під кожен кластер створили сторінки.
Попри те, що SEO вимагає часу для довготривалого ефекту, в нашому випадку всього один місяць оптимізації контенту вже дав відчутні результати. Це пояснюється тим, що клієнт заздалегідь подбав про SEO, адже краще з нуля створити всі умови для вдалого просування, ніж виправляти технічні помилки ходового сайту.
Крім того, за участі SEO-спеціаліста було виконане коректне перенесення старого сайту на новий хостинг.
Отже, сайт «Основа» виступає яскравим доказом того, що іноді достатньо провести хоча б базову SEO-оптимізацію, і результати не змусять чекати. Як бачимо, це стосується навіть вузькоспеціалізованих ніш, як-от хімічна промисловість:
Результат
Сучасний промо-сайт від Webnauts привабливий у багатьох аспектах:
- естетичному, бо має ексклюзивний фірмовий дизайн;
- практичному, бо має зручну та персоналізовану адмінку на WordPress;
- маркетинговому, бо оптимізований для пошукових систем.
Як бачите, всі відділи компанії ефективно попрацювали та видали клієнту сайт, який якнайкраще відповідає потребам сучасного хімічного підприємства.
Комментарии