Промо-сайт химической фабрики
Содержание
Задача
Разработать промо-сайт для украинского производителя химических реагентов: с уникальным дизайном, удобной админкой и базовой оптимизацией для поисковых систем. В результате должна была выйти современная презентация на 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;
- маркетинговом, потому что оптимизирован для поисковых систем.
Как видите, все отделы компании эффективно поработали и выдали клиенту сайт, который наилучшим образом отвечает потребностям современного химического предприятия.
Комментарии