Сайт «Мастер Дома»

Под конец 2018-го года мы запустили новый внешний проект. Это — разработка на WordPress, целью которой было создание отличного сайта сервиса ремонта бытовой техники.

Подготовка проектной документации

Важная стадия проекта в нашей работе — подготовка проектной документации. В нее входит изучение потребителя, его поведенческих факторов. К сожалению в данном случае отсутствовал доступ к старой аналитике, собранной за время жизни домена, поэтоме пришлось довольствоваться домыслами, опытом заказчика и нашим личным опытом в данной области, как потенциальных потребителей, свершившихся, а также и принятие позиции DIY-щиков, домашних мастеров, которые не являются прямыми потребителями услуг ремонта бытовой техники.

Проектная документация

Результатом данного «мозгового штурма» является документация к проекту — подробное ТЗ, ментальные карты. Все это затем было трансформировано в прототипы, обычные прямоугольники серого цвета.

Семантическое ядро

Так как проект изначально у нас затачивался под поисковое продвижение, первым делом, наравне с составлением проектной документации мы собрали интересующие нас ключевые запросы и с помощью KeyCollector-а собрали семантику для проекта.

Очевидно, что в будущем она будет существенно трансформирована с учетом курса движения данного проекта. Тем не менее для того, чтобы определится со структурой ее хватило.

На выходе у нас получилось несколько разделов, в которых мы углублялись в низкочастотные запросы.

В тот же момент мы определились с тем, что главная будет продвигаться по высокочастотным услуг, а не как бренд.

Дизайн проекта

Наконец собрав прототипы мы приступили к разработке непосредственно дизайна проекта.

Вопреки последним тенденциям плоского дизайна и material-концепций был выбрал классический стиль дизайна с примесями. Таким образом иконками категорий у нас стали модели техник их характеризующие, и в то же время кнопки остались плоскими.

Да будет верстка

Скажем сразу, в этом проекте мы напрочь отказались от фреймворка Bootstrap. Вместо этого мы использовали разрабатываемую нашей командой библиотеку FA-Kit. Ее, как и Bootstrap можно собирать фрагментами, пользуясь возможностями SASS, но при этом она все равно остается более легковесной. Так как по сути там обработка сетки, шрифтов и кнопок.

Что в свою очередь дало результаты на тестах типа PagesSpeed.

Экспериментируем

В данном проекте мы пошли по нестандартному пути. Собирали фронт прямо в бэке. Сперва мы развернули проект на WordPress, создали базовую тему и пошли собирать страницы с блоками.

В данном же случае верстка изначально была разделена на такие части, как например:

• Шапка сайта
• Подвал сайта
• Блок основного содержимого между ними
• Блоки для билдера:
  • Вывод категорий на главную
  • Полная форма заявки
  • Список логотипов
  • И другие

Сокращаем временные разрывы

Таким образом у нас получилось немного сэкономить время на разработку. Так как разработка проводилась параллельно, фронт и бэкенд.

Оптимизация верстки для поискового продвижения

Нам кажется странным сегодня на этапе разбора дизайна на фрагменты перегружать сайт, который в дальнейшем станет неподъемным мастодонтом. В таком случае приходится снова лезть в дизайн, разбирать изображения, подгонять под размер, оптимизировать, перелопачивать верстку.

Нет, определенно наш подходил лучше:

1. На этапе дизайна размеры изображений подогнаны на глаз в соответствии с их посадочными местами в верстке
2. Изображения подогнаны попиксельно и экспортированы с оптимальным сжатием
3. Код верстки сверстан таким образом, чтобы соответствовать семантической нагрузке контента
4. И соответствует требованиям W3C

Разработка бэкенда

Когда мы разрабатываем сайты WordPress, обязательно используем фрейморки, такие как Unyson. По своей сути это расширение, которое позволяет сделать 2 основные вещи:

• Получить легкий pagebuider
• Начинить сайт дополнительными полями и вывести эти данные в «морду»

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

Снова про SEO

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

Да будет Url твой правильный

В свою очередь это породило проблемы генерации урлов. Так как базово заложено проведение таксономий через разделитель, например «/blog/». Что нам категорически не подходило. Одно дело блог, другое — важная таксономия в качестве категории услуг. WordPress немного сопротивляется созданию нестандартной системы ЧПУ. Для данного проекта был разработан собственный генератор rewrite-rules, который позволил сформировать структуру и работать с родными функциями WordPress.

Таким образом страницы таксономий мы «посадили» в обычные страницы, а кастомные статьи получили возможность на них отображатся.

Хорошим примером работы этого решения является вывод цен в категории, например, стиральных машин.

Так же понадобилось переписать генерацию Unyson breadcrumbs (хлебные крошки), так как сайт имеет свою структуру url`ов. Данные параметры связи задаются вручную в настройках сайта.

Каждой кастомной записи — свой шаблон

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

Помимо этого, для некоторых страниц тоже были созданы свои шаблоны, например FAQ — построен по принципу комментариев. В нем есть форма, из которой в админку попадают вопросы. И после ответа уходят обратно, уже в виде списка, который можно развернуть.

Только актуальное

Для акций мы сформировали логику, которая будет прятать вниз, а затем в архив морально устаревшие акции. Актуальные и постоянные поднимаются вверх, как пузырьки воздуха, дабы всегда быть на виду.

Каждому запросу — своя статья

Это действительно легкий и годный подход, который мы и использовали на старте. И хотя этот пункт — работа с текстом, в данном кейсе идет последний, начали мы работу с ними в самом начале, как только получили ядро и полный доступ к админке старого сайта.

А затем принялись скрещивать слона с единорогом реанимировать тексты.

Основная их проблема, да и в принципе проблема старого сайта в плане продвижения было то, что заголовки на страницах, в тайтлах были очевидно вытащены без какой-либо обработки из, например, WordStat. В чистом виде, повторяюсь.

Поэтому все это время работы с текстами мы пытались найти баланс между «ключи, ключи, ключи, побольше ключей» и «это можно читать».

При этом надо признать, что были блоки старых текстов, которые вполне вписывались в это «между» и, следовательно, были перенесены, как есть.