Как сверстать сайты и провести интеграцию с cms (рекомендации)

Сегодня поговорим о верстке сайтов и интеграции системы управления контентом. Рассмотрим основные этапы превращения дизайна в html/css и создание шаблонов для cms. Также будут освещены некоторые трюки, которые помогают экономить время и бюджет на веб разработку.

Итак, предположим, что у нас имеется качественный дизайн макет в figma или photoshop, сделанный по сетке. Все слои разложены по папкам, используются понятные названия объектов и можно приступать к верстке.

Для верстки макетов используем 12 колоночную сетку bootstrap. Создаем каркас или структуру кода в html, закладывая основные блоки header, main, footer, container, sidebar. Можно использовать тег section для этих блоков. Внутри основных блоков размещаем стандартные дивы row и в них div с указанием адаптивных классов, например col-md-3, col-sm-12. Таким образом мы сразу делаем нашу верстку адаптивной.

Оформляем наш css файл, придерживаясь БЭМ методологии (block element modifikator). Это значит каждый div у нас имеет свой смысловой класс и этому классу присваивается css правило, к примеру классу headings_red всегда применяется правило {color:red}. Задаем в html необходимые class и присваеваем им правила. Каждому модулю в html у нас должен быть соответствие участка кода в css. И куда бы потом мы не переместили блок, верстка сохраняет свой вид, т.к. мы задаем правила не через родительские блоки, а через смысловые классы.

Верстальщик должен разбираться как работать с макетом figma, photoshop и т.д. В принципе здесь после 1-2 часов изучения устройства редактора все становится понятным. Чтобы верстать надо знать базовые вещи, такие как: вырезать/экспортировать слой, определить цвет элемента, ширину/высоту блока, размер текста, интерлиньяж. Сохраняйте формат jpeg для растровых картинок (фото) и png для векторных изображений.

У каждого дизайн макета есть свои динамические блоки, где-то слайдеры (slide show), вкладки (tabs), карусели (carousel). Верстать их самим без опыта не рекомендуется, используйте готовые плагины. Js подключаем после завершения работы над html структурой, чтобы не отвлекаться и не ждать лишнее время на обновление страницы, куда мы время от времени заглядываем, чтобы увидеть, как применились css правила. Советуем подключать js скрипты внизу страницы сайта перед закрывающим тегом body.

После завершения работ над десктопной версией переходим к адаптации под мобильные устройства. В css добавляем media правила, например @media (max-width:767px) {* {font-size:15px;}}. Где нужно переопределяем размеры шрифта, наличие фона, появление скрытых мобильных меню и скрытие десктопных меню.

Полученный результат тестируем в разных бразузерах и мобильных устройствах, для упрощения можно пользоваться тестировщиком встроенным в браузере. Проверяем валидность кода, то есть отсутствие синтаксических ошибок в validator.w3.org. Тестируем быстроту загрузки страниц в сервисе google page speed insights. В норме зеленая зона для обеих версий. Если у вас не так, смотрите что пишет тестировщик и следуйте рекомендациям.

Итак, наша верстка готова, можем переходить к следующему этапу, внедрению системы управления контентом (cms).

Интеграция с cms

В зависимости от выбранного движка структура шаблонов будет отличаться. Если обновляется тема сайта по умолчанию (default theme), то действия, которые мы делаем при интеграции с cms укладываются в 3 пункта.

1. Работаем с общими шаблонами header, common, index, footer tpl. Подключаем все стили и скрипты к движку, смотрим, чтобы не было конфликтов css и js плагинов.
2. Работа с частными шаблонами, типа cart.tpl. Изучение структуры, замена html кода, сохранение php вывода.
3. При наличии дополнительного функционала, не содержащегося в cms – изменение front end и back end части сайта программистами.

Сэкономить время и средства помогает использование существующих в cms тем и модулей. Разработка тем с 0 чуть сложнее и требует практики.

Если интересует разработка сайта под ключ и услуги интеграции верстки в cms мы всегда на связи и готовы приступить к оперативному выполнению задач.