Belle Landing: красивый лендинг

Всем привет! Меня зовут Алексей, хочу рассказать про решение «Belle Landing: универсальный красивый лендинг» команды Dreamee.ru. Кратко о возможностях (что и как) описано на странице в Маркетплейс, детальная инструкция есть здесь. Сейчас же хотелось бы чуть подробне рассказать и о том, почему.

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

• красивый минималистичный дизайн;
• быстрая работа;
• пользователь редактирует содержание, но не форму;
• все нужные настройки в одном месте, ненужные исключить.
  

Далее обо всём подробнее.

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

Дизайн Belle Landing выполнен в мягких тонах, текст ровный (без контраста в размере и цвете), чётко структурированный. В целом дизайн плоский и скорее минималистичный: никаких лишних визуальных компонентов, ненужных повторов, тяжёлых анимаций; только необходимые элементы управления и блоки контента.

Разрабатывал дизайн Александр Шумихин.

Лёгкость и скорость

Чтобы пользователю было приятно, нужна не только красивая картинка сайта, но и удобство использования. Belle Landing полностью адаптивен, все значки векторные, карусели поддерживают swipe (прокрутку движением пальца), и потому сайт будет выглядеть и работать одинаково хорошо как на широких мониторах, так и на дисплеях смартфонов. Максимально оптимизирована скорость загрузки и рендера страницы.

Google, и WebPageTest (которые, в принципе, тоже Google ) считают, что получилось хорошо.

Чтобы добиться ещё более полного эффекта, конечно нужно будет немного настроить сервер и сам сайт: включить — а точнее, не выключать кеширование Битрикс; включить GZIP и установить время жизни кеша.

Контент и редактирование

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

Именно поэтому мы максимально ограничили возможность менять оформление текстового наполнения лендинга. Весь текст для основной страницы сайта, можно редактировать только в режиме текста. Менять его цвет, размер, начертание из админки нельзя, соответствующих кнопок просто нет в формах. Несколько свободнее правила для подробных описаний сущностей (показываются во всплывающих окнах). Для них доступны жирный текст, курсив, подчеркивание, зачёркивание, списки, ссылки и даже картинки и видео (возможно, будет убрано в будущем), но нельзя изменить размер шрифта и его цвет.

Настройки и управление

Все настройки сайта собраны на одной странице в админке (она также доступна из публичной части).

Можно выбрать одну из трёх (на данный момент) цветовых схем сайта, а также сделать все картинки на основной странице чернобелыми (этот эффект управляется галочкой, сами файлы картинок не пострадают).

Такие вещи, как номера телефонов и прочие контакты, реализованы в виде настроек. Как следствие, их нельзя отредактировать «на месте» в режиме правки (как контент инфоблоков), а только в диалоге настроек; но зато они хранятся централизованно, и тот же номер телефона не нужно вводить несколько раз — для шапки, подвала и пр.

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

Решение не является Интернет-магазином, однако для некоторых типов блоков доступна функция упрощённого заказа. Все такие заказы содержат ссылку на товар:

При установке решения автоматически создаётся группа пользователей «Редакторы лендинга» и можно создать первого пользователя для неё. У членов этой группы есть права на редактирование только тех настроек и контента, которые относятся к данному решению. Другие настройки сайта и инфоблоки они не видят:

Что ещё

SEO. На страницах присутствует все мета-теги для поисковиков (заполняется в настройках), в контент внедрена микроразметка, используемая для форматирования поисковой выдачи (Google одобряет).

Если нет JavaScript. Обычно пользователь видит доп. описания элементов во всплывающем окне; если у него выключен JavaScript — то на отдельной странице.

Поддерживается многосайтовость.