Задачей было не только сделать новый сайт. Мы помогали компании развивать комплексный маркетинг: SMM, CONTENT, SEO, EMAIL. Но в этом кейсе речь пойдет о сайте.

Ресурсы компании были разделены интерфейсно и технологически, разбросаны по разным доменам. Проекты развивались в разное время разными людьми, поэтому появилась необходимость привести маркетинг Clio Soft к единому знаменателю. После недолгого согласования решили расположить функционал сайта на Wordpress. На создание интерфейса ушла одна неделя, на верстку – один месяц, на настройку движка и интеграцию верстки – еще один месяц, 2 недели – на тестирование и ловлю багов, 2 недели – на перенос контента.

Блог компании на тему PLM и цифрового производства размещался на домене .com и крутился на Tilda. Основной сайт находился в зоне .ru.

Отдельной трудностью стала уникальная верстка каждой статьи в блоге компании. Каждый материал представлял собой уникальный сверстанный лендинг со своими текстовыми стилями. Выглядело красиво:

Пример верстки страницы

Но каждая статья стоила дорого и на создание уходило много времени. Требовался типовой движок, на котором простой контент-менеджер мог управлять публикацией материалов. Это сократило стоимость материала, увеличило частоту публикаций и органический трафик на блог.

Раньше каждая статья версталась вручную, поэтому образовалось много текстовых стилей: цитаты, разделители, таблицы, надписи в рамках. Порядка 100 элементов. При переносе на Wordpress необходимо было сохранить стройность материалов и создать в редакторе 100 дополнительных стилей, протестировать их кроссбраузерность.

Для работы над проектом использовали репозиторий на Github, интерфейс создали в Figma, по этой ссылке можно посмотреть проект. Для десктопа использовали холст 1920 px с 12-колоночной сеткой, мобильную версию создали на базе iPhone 11 Pro. iPad Mini – коварный формат. С одной стороны, он ближе к телефону, но когда начинаешь адаптировать элементы, обязательно что-то не влезет или, наоборот, окажется слишком мелким. Поэтому мы всегда проектируем интерфейс для планшетов.

Все типовые элементы объединили в компоненты, огромное преимущество работы с Figma. Отчасти поэтому:

Ускорилось создание десктопной и адаптивной версии, шаблонизированы все элементы на родительские и дочерние компоненты.

Пример страницы «Услуги»

Clio Soft совместно с Siemens регулярно проводит бесплатные вебинары для инженеров. На каждый вебинар привлекается трафик из контекстной и таргетированной рекламы, email-рассылок. Отсутствовали посадочные страницы на сайте Clio-soft.ru, на которые можно было вести трафик, с большой яркой кнопкой «Отправить заявку на регистрацию». Использовались внешние конструкторы. Каждый раз нужно было настраивать лендинг, перенастраивать рекламу, тестировать заявки, собирать их в единую базу.

Мы предложили создать на сайте раздел «Вебинары», где на базе Wordpress, так же как любую новость, можно публиковать анонсы предстоящих вебинаров и после мероприятия отправлять старые в архив. Теперь создать красивый и понятный лендинг для регистрации на вебинар можно прямо из админки сайта, там же собрать и обзвонить все заявки. Благодаря публикации прошедших вебинаров увеличились поведенческие факторы на сайте.

Люди стали возвращаться на сайт, смотреть вебинары и рекомендовать ссылки друзьям.

Пример типового лендинга вебинара

Ниже можно посмотреть и скачать макеты страниц в jpeg.

• Главная - Desktop, IpadMini, Iphone
• О компании - Desktop, IpadMini, Iphone
• Услуги - Desktop, IpadMini, Iphone
• Анонсы вебинаров - Desktop, IpadMini, Iphone
• Страница вебинара - Desktop, IpadMini, Iphone
• Контакты - Desktop, IpadMini, Iphone

Иконочный шрифт использовался Google Material Icons, шрифты Google Fonts.

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

Уже через 1,5 месяца после подписания договора мы тестировали рабочую версию ресурса.

Сайт состоит из статических и динамических разделов. К первым можно отнести «О компании», «Контакты». Остальные страницы динамические. В статических страницах мы подключили модули Include.php. Например, на многих страницах анонсируются услуги компании:

Если когда-нибудь понадобится изменить, например, цвет иконок, придется это делать на всех страницах. Благодаря подключаемым модулям Include.php, можно изменить данные только в одном месте, и изменения одновременно транслируются на все страницы с таким модулем.

К динамическим разделам относятся «Блог» и «Вебинары». Сюда постоянно добавляются новые статьи, материалы. Необходимо сделать возможным администрировать такие разделы через админку. У каждой сущности есть анонс, состоящий из картинки, описания, даты, и собственная страница с редактируемыми стилями внутри. Wordpress – лучшая CMS для блога. Быстрая, легко редактируемая, привычная большинству пользователей. Поэтому для данного сайта мы остановили выбор на ней.

Пример интерфейса панели администратора Wordpress

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

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

Примеры адаптивного интерфейса

В результате роста показателей поведенческих факторов, адаптивности, скорости работы, увеличения частоты обновления контента

Чтобы не потерять проиндексированные поисковыми системами страницы, настроили 301 редирект. В панели администратора сделали возможным редактировать meta-теги, чтобы не добавлять проверочный код разных сервисов прямо в php-файлы на сервере.