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

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

13 января 2016


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

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

Дизайн и эмоции

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

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

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

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

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

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

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

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

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

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

Фото 3: «extra_02_crazy_typography_min.jpg»

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

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

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

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

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

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

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

Фото 8: «admin_user_editor.png»

Фото 9: «admin_user_editor_public.png»
Что ещё

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

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

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