Разработали сайт для строительной компании по всем канонам SEO-оптимизации
Рассказываем, как поработали с дизайн-макетами, админкой и SEO
О компании
Ребята занимаются коттеджами, финскими и скандинавскими банями, барнхаусами и многим другим. Посмотрите, как много классных вариантов у них есть на сайте.
Подготовка
Перед этапом разработки, наша команда проанализировала дизайн-макеты. Не все дизайнерские решения можно было реализовать один в один, поэтому какие-то блоки мы согласовывали отдельно, а в некоторых местах вместе с дизайнером придумывали новые классные решения.
Вместе с этим, мы приводили макеты к единому виду — правили шрифты и отступы, чтобы на этапе разработки нам было удобнее и быстрее верстать страницы.
Дизайнеры не всегда погружаются в технические основы, когда работают с макетом и могут просто не подумать о важных деталях для разработчика
Например, не выносят в UI-kit все необходимые компоненты, которые там должны быть. Или забывают продумать логику перестроения блоков на адаптиве. Из-за этого разработчики тратят больше времени на работу с макетом. И это нормально, ведь есть мы.
Вопрос во времени, которое стоит денег
Если нам отдают дизайн-макеты в лучшем виде с учётом важных деталей для разработчиков, мы быстрее напишем код и не потратим время на обсуждения.
Решения
Отзывчивые изображения — разработческий термин для описания набора приёмов в HTML и CSS. Он помогает изображениям выглядеть одинаково хорошо на разных разрешениях экрана.
Для работы с контентом на сайте мы использовали атрибут Sizes и указали браузеру, какое изображение нужно использовать в зависимости от размера и разрешения устройства.
Сейчас любой пользователь на сайте Дачвилл можем посмотреть карточки с домами и банями с любого устройства в хорошем качестве.
Из технического задания нам было известно, что контент на сайте будет меняться со временем. Поэтому на бэкенде мы сделали админку, чтобы контент-менеджер менял необходимую информацию самостоятельно.
Не было смысла писать что-то кастомное или тащить сложные решения, поэтому мы остановились на самой популярной — WordPress.
Один из наших принципов в разработке сайтов — SEO-оптимизация. Мы придерживаемся правила, что все сайты и приложения нужно оптимизировать, чтобы они грузились быстрее и хорошо индексировались поисковиками.
Как мы уже говорили, для данного бизнеса было важно учесть детали оптимизации, чтобы люди без проблем приходили на сайт из поиска.
Для оптимизации мы использовали:
- Классы и тэги — инструменты для организации и идентификации контента на сайте, которые помогают сайту быстрее найти нужный блок.
- Сплиттинг стилей и скриптов, чтобы подгружать контент для пользователя именно в момент прокрутки сайта, а код сделать более чистым и понятным.
- Микроразметку, которая помогает поисковикам более чётко понимать содержимое сайта и выдавать пользователю более подходящий результат.
Результаты
Подобные сайты нужны каждому второму бизнесу в любой сфере, при этом конкуренция на рынке есть всегда. Поэтому важно продумать сайт на старте и не забыть сделать его подходящим под SEO-продвижение.
- Помогли сделать дизайн-макеты лучше, чтобы потом было легко и быстро собрать проект в рамках единой системы компонентов
- Предложили решения по реализации отдельных задач, связанных с функционалом или визуалом
- Помогли найти подходящие решения по анимации и адаптации элементов под разные экраны и устройства
- Интегрировали сайт на удобную CMS, без лишней нагрузки, чтобы управлять контентом
- Применили все свои знания и опыт по SEO-оптимизации — теперь сайт максимально заточен под дальнейшее продвижение
Команда проекта
Менеджер проекта — Катя
Фронтенд-разработчик — Оля
Бэкенд-разработчик — Ваня
Тестировщик — Саша
«К Лиге я обращаюсь, потому что они имеют стандарты написания кода и работы, которые полностью соответствуют качеству проектов, которое я хочу видеть. Они готовы принимать мои надстройки над стандартами и работать по ним. И, в общем-то, имеют компетенции, чтобы эти стандарты реализовать. Не всегда получается с первого раза, но за очень небольшое количество итераций у нас получается построить процесс, по которому мы дальше идём с клиентами. В работе с Лигой мне нравятся отлаженные процессы. Менеджер всегда подхватит задачку и ответит в чате. Не было такого, что задача просто пропала или про неё забыли. И ещё — они достаточно быстры в реализации.»
Стек технологий
- HTML
- CSS
- WordPress
Команда
- Front-end разработчик2
- Back-end разработчик
- QA-специалист
- Менеджер проекта
