Промо-сайт стартапа — онлайн-сервиса для организации работы
Заложить сайт, учитывая масштабируемость бизнеса, удаётся далеко не всем. В результате каталог товаров, услуг и прочих данных трещит по швам, а добавление новых функций только вредит дизайну и скорости сайта. «Если б знать, где упасть, — соломки подстелил бы» — часто читаем по глазам клиентов, закатываем рукава и устраиваем большой переезд. И это как раз одна из таких историй — кейс о том, как мы перенесли промо-сайт на WordPress — с фирменным дизайном, довольно стандартным функционалом и прямо-таки безмерным контентом.
О проекте и задаче
Наш клиент, онлайн-сервис для организации работы и жизни xTiles, называет себя ребёнком Notion и Miro. Как известно, дети растут быстро, и так же быстро сайт стартапа перерос свою первую платформу Webflow. Он крайне нуждался в новом решении, за которым и обратился в команду Webnauts.
Наряду с несложным функционалом сайт имел чрезвычайно сложную структуру. Чтобы представить весь масштаб контента для экспорта, достаточно сказать, что одно только меню навигации занимало несколько уровней, а футер сайта — едва ли не целый экран. Здесь тебе и блог с кучей статей, и казалось бы привычный для всех, однако необычно масштабный раздел FAQ, из-за чего он получил название «Академии».
Словом, перенести контента нам предстояло много, причём на двух языках. А перед этим — «натянуть» фирменный дизайн на WordPress и реализовать максимально удобную админ-панель для лёгкого управления огромным массивом информации.
Вёрстка по уникальному дизайну
Бывалый пользователь xTiles вряд ли заметит «подмену» платформы, потому что мы полностью сохранили дизайн и улучшили функционал сайта. Собирали страницы с помощью Elementor Pro — плагина WordPress, который позволяет не только воссоздать дизайн фирменного стиля, но и сделать его адаптивным для каждого устройства — от дисплея смартфона до стационарного компьютера.
Что касается адаптации сайта на WordPress к нестандартным потребностям клиента, то готовые программные инструменты не всегда могут их удовлетворить. Чтобы реализовать на сайте кастомные виджеты, такие, как секции с табами и прайсами, мы пустили в ход язык программирования JavaScript:
Иногда мы ограничивались старыми добрыми шорткодами, например, в разработке некоторых слайдеров и секций раздела FAQ:
Блог
Важной часть любого сайта является блог. Особенно плодовитый на статьи промо-сайт xTiles использует этот инструмент не только для налаживания коммуникации с аудиторией, но и для SEO-продвижения своего продукта. Поэтому мы позаботились, чтобы блог был максимально удобным для читателей и эффективным — для бизнеса.
Синхронизация с Pinterest. До 40% людей лучше воспринимают статьи с визуальным дополнением. А если визуальный контент не просто привлекательный, а ещё и полезный, — его часто хочется сохранить. Чтобы читатели блога могли мгновенно «запинить» (с англ. pin — пришпилить) понравившиеся изображения на визуальную доску, мы подключили к сайту код популярной платформы Pinterest.
Пользователь сайта может проведать об этой функции при наведении курсора мыши на превью, обложку или любое другое изображение статьи, а при тапе либо нажатии — сохранить его в свой аккаунт Pinterest.
Время чтения статьи. Как говорит король юзабилити Якоб Нильсен: «Держите пользователей в курсе того, что происходит». Так мы и сделали — реализовали автоматический расчёт времени, необходимый для прочтения каждой статьи. Если учитывать то, что это блог онлайн-сервиса по планированию и организации, такая фича логична и уместна. Прежде чем уделить статье своё драгоценное время, сначала пользователь имеет возможность его оценить. Что это, если не забота об аудитории?
Иерархическое содержание статьи. Чтобы сэкономить время и обеспечить удобную ориентацию в контенте, мы реализовали виджет с содержанием публикации. Он автоматически формируется из заголовков уровня <h2> и <h3>, клик на которые переносит читателя в нужный раздел статьи.
Шеринг статьи в соцсетях — ещё одна полезная функция на страницах блога xTiles. Она значительно упрощает распространение публикаций и позволяет привлечь больше читателей. Или же, если говорить на языке SEO — увеличить объём органического трафика на сайт с Х, Facebook и LinkedIn.
Разработка промо-сайта на WordPress
Кастомизация административной панели
Ориентироваться на сайте с огромным объёмом контента должно быть также удобно, как и управлять этим контентом — добавлять, редактировать и обновлять содержимое страниц:
Для этого мы адаптировали традиционную админ-панель WordPress под потребности клиента и создали кастомные типы записей, такие как:
- Templates — для создания уникальных страниц для разных типов записей;
- Products — для добавления товарных страниц с тарифами и ценами;
- Internal FAQs — для управления разделом FAQs на сайте;
- Changelog — для журнализации любых изменений, внесённых на сайт.
Мы кастомизировали интерфейс CMS с помощью плагина Advanced Custom Fields (ACF). Всё для того чтобы администратор имел больше контроля над внешним видом и функциональностью сайта без помощи программиста.
Контактные формы
С помощью вышеупомянутого плагина Elementor Pro, лежащего в основе всего сайта, были созданы контактные формы. Одни собирают запросы пользователей, заинтересованных в партнерстве с xTiles, другие — претензии относительно нарушения авторских прав:
Мультиязычность
Благодаря плагину WordPress Multilingual (WPML) промо-сайт xTiles в совершенстве освоил два языка — украинский и английский. Этот популярный инструмент помогает перевести не только пользовательский интерфейс, но и административную часть сайта — записи, виджеты, поля и т. д. Кроме того, он способствует корректной SEO-оптимизации сайта согласно языку поиска благодаря переводу слагов URL-адресов страниц, заголовков и метатегов.
SEO сайта на WordPress
Когда мы уже затронули тему SEO, стоит упомянуть ещё один инструмент, который работает на привлечение трафика. Это Yoast — плагин, который автоматизирует техническую поисковую оптимизацию и не позволит потеряться насыщенному полезным контентом сайт xTiles в поисковой выдаче. Только вообразить, какими красками может заиграть этот и ещё множество дополнительных инструментов в руках SEO-специалиста Webnauts. Хотя, что это мы… Не надо представлять — о многочисленных кейсах SEO-продвижения можно узнать из нашего портфолио.
Скорость загрузки страниц
Огромное количество постоянно обновляемого контента не должно негативно влиять на производительность сайта — и пользователи не будут ждать, и Google не простит. Чтобы ускорить время загрузки, мы установили на сайт:
- ShortPixel Image Optimizer — плагин для оптимизации изображений в фоновом режиме,
- WP Rocket — плагин для кэширования страниц, браузера и других действенных методов оптимизации.
В результате производительность сайта по оценке Google PageSpeed Insights значительно улучшилась:
Перенос двуязычного контента
Мы перенесли всё содержимое на двух языках с первой для сайта CMS Webflow на WordPress. Инструментом нам послужил плагин WP All Export: мы настроили шаблоны экспорта данных в формате XML / CSV и постепенно, по одному типу публикации, перенесли весь контент:
Результат
WordPress, буквально созданный для промо-сайтов и блогов, достойно заменил собой CMS Webflow. При помощи плагинов мы воссоздали дизайн, реализовали удобный функционал и кастомизировали админ-панель под потребности продуктовой компании xTiles.
Теперь масштабируемая и гибкая платформа обеспечивает безупречный пользовательский опыт и удобное управление сайтом на двух языках. В будущем у компании будет больше свободы и возможностей для безболезненного расширения структуры и функционала промо-сайта.
Комментарии