Belle Landing: красивый лендинг
13 января 2016
Описание
Всем привет! Меня зовут Алексей, хочу рассказать про решение «Belle Landing: универсальный красивый лендинг» команды Dreamee.ru. Кратко о возможностях (что и как) описано на странице в Маркетплейс, детальная инструкция есть
здесь. Сейчас же хотелось бы чуть подробне рассказать и о том, почему.
Цель, которую мы поставили для этого проекта, — создать решение не только функциональное, но в то же время красивое, приятное как с эстетической точки зрения, так и в использовании. Чтобы достичь этой цели, решали следующие задачи:
Дизайн Belle Landing выполнен в мягких тонах, текст ровный (без контраста в размере и цвете), чётко структурированный. В целом дизайн плоский и скорее минималистичный: никаких лишних визуальных компонентов, ненужных повторов, тяжёлых анимаций; только необходимые элементы управления и блоки контента.
Разрабатывал дизайн Александр Шумихин.
Лёгкость и скорость
Чтобы пользователю было приятно, нужна не только красивая картинка сайта, но и удобство использования. Belle Landing полностью адаптивен, все значки векторные, карусели поддерживают swipe (прокрутку движением пальца), и потому сайт будет выглядеть и работать одинаково хорошо как на широких мониторах, так и на дисплеях смартфонов. Максимально оптимизирована скорость загрузки и рендера страницы.
Google, и WebPageTest (которые, в принципе, тоже Google
) считают, что получилось хорошо.
Чтобы добиться ещё более полного эффекта, конечно нужно будет немного настроить сервер и сам сайт: включить — а точнее, не выключать кеширование Битрикс; включить GZIP и установить время жизни кеша.
Контент и редактирование
Бывает, что неудачные решения контент-редактора (игра со шрифтами, выделение слов и предложений ярким цветом или огромным кеглем) напрочь губят изначально красивый и целостный внешний вид сайта.
Именно поэтому мы максимально ограничили возможность менять оформление текстового наполнения лендинга. Весь текст для основной страницы сайта, можно редактировать только в режиме текста. Менять его цвет, размер, начертание из админки нельзя, соответствующих кнопок просто нет в формах. Несколько свободнее правила для подробных описаний сущностей (показываются во всплывающих окнах). Для них доступны жирный текст, курсив, подчеркивание, зачёркивание, списки, ссылки и даже картинки и видео (возможно, будет убрано в будущем), но нельзя изменить размер шрифта и его цвет.
![Фото 3: «extra_02_crazy_typography_min.jpg»](https://site-cloud-files.bitrix.info/main/318/318571e0971cac59b018ae4a05f4c7a2/extra_02_crazy_typography_min.jpg)
Настройки и управление
Все настройки сайта собраны на одной странице в админке (она также доступна из публичной части).
![Фото 4: «admin_user_admin_min.png»](https://site-cloud-files.bitrix.info/main/23a/23aee328261b97b8eb8c88a6f8c31753/admin_user_admin_min.png)
Можно выбрать одну из трёх (на данный момент) цветовых схем сайта, а также сделать все картинки на основной странице чернобелыми (этот эффект управляется галочкой, сами файлы картинок не пострадают).
Такие вещи, как номера телефонов и прочие контакты, реализованы в виде настроек. Как следствие, их нельзя отредактировать «на месте» в режиме правки (как контент инфоблоков), а только в диалоге настроек; но зато они хранятся централизованно, и тот же номер телефона не нужно вводить несколько раз — для шапки, подвала и пр.
Всего предусмотнено 13 блоков контента, отличающихся способом представления информации. Их все можно легко менять местами, убирать и задействовать снова — простым перетаскиванием мыши там же, в настройках:
![Фото 5: «settings_07_sort_min.png»](https://site-cloud-files.bitrix.info/main/dc7/dc7d2e52ad77f8da87f058a065d7c529/settings_07_sort_min.png)
Контент (инфоблоки) редактируется, как обычно в Битриксе, однако мы убрали из форм всё неиспользуемое в решении, чтобы контент-редактор мог не отвлекаться на лишнее.
![Фото 6: «admin_03_public_content.png»](https://site-cloud-files.bitrix.info/main/b14/b146b5f68625b5f8eddf7770c299e54d/admin_03_public_content.png)
Решение не является Интернет-магазином, однако для некоторых типов блоков доступна функция упрощённого заказа. Все такие заказы содержат ссылку на товар:
![Фото 7: «feedback_02_list.jpg»](https://site-cloud-files.bitrix.info/main/0ec/0ecb4d11f4438510c188fada270b14df/feedback_02_list.jpg)
При установке решения автоматически создаётся группа пользователей «Редакторы лендинга» и можно создать первого пользователя для неё. У членов этой группы есть права на редактирование только тех настроек и контента, которые относятся к данному решению. Другие настройки сайта и инфоблоки они не видят:
![Фото 8: «admin_user_editor.png»](https://site-cloud-files.bitrix.info/main/358/358adbba03b24534ce8680126c29f1d9/admin_user_editor.png)
![Фото 9: «admin_user_editor_public.png»](https://site-cloud-files.bitrix.info/main/95b/95b726ecd49ff6c346a181f5d6204be1/admin_user_editor_public.png)
Что ещё
SEO. На страницах присутствует все мета-теги для поисковиков (заполняется в настройках), в контент внедрена микроразметка, используемая для форматирования поисковой выдачи (Google одобряет).
Если нет JavaScript. Обычно пользователь видит доп. описания элементов во всплывающем окне; если у него выключен JavaScript — то на отдельной странице.
Поддерживается многосайтовость.
Цель, которую мы поставили для этого проекта, — создать решение не только функциональное, но в то же время красивое, приятное как с эстетической точки зрения, так и в использовании. Чтобы достичь этой цели, решали следующие задачи:
- красивый минималистичный дизайн;
- быстрая работа;
- пользователь редактирует содержание, но не форму;
- все нужные настройки в одном месте, ненужные исключить.
Дизайн и эмоции
Мы отказались от концепции «кричащего лендинга», когда каждый элемент изо всех сил привлекает внимание пользователя и подталкивает его к совершению нужного действия. Бесспорно, у каждой задачи своё решение, но мы исходили из других соображений: в первую очередь, пользователю должно быть приятно находиться на сайте. Дизайн Belle Landing выполнен в мягких тонах, текст ровный (без контраста в размере и цвете), чётко структурированный. В целом дизайн плоский и скорее минималистичный: никаких лишних визуальных компонентов, ненужных повторов, тяжёлых анимаций; только необходимые элементы управления и блоки контента.
Разрабатывал дизайн Александр Шумихин.
Лёгкость и скорость
Чтобы пользователю было приятно, нужна не только красивая картинка сайта, но и удобство использования. Belle Landing полностью адаптивен, все значки векторные, карусели поддерживают swipe (прокрутку движением пальца), и потому сайт будет выглядеть и работать одинаково хорошо как на широких мониторах, так и на дисплеях смартфонов. Максимально оптимизирована скорость загрузки и рендера страницы.
Google, и WebPageTest (которые, в принципе, тоже Google
![Фото 1: «:)»](https://www.1c-bitrix.ru/bitrix/images/main/smiles/9/icon_smile.gif?1500368328651)
![Фото 2: «extra_01_google_page_speed_min.jpg»](https://site-cloud-files.bitrix.info/main/cfd/cfd3accb6f517eb652121a57804a4f95/extra_01_google_page_speed_min.jpg)
Контент и редактирование
Бывает, что неудачные решения контент-редактора (игра со шрифтами, выделение слов и предложений ярким цветом или огромным кеглем) напрочь губят изначально красивый и целостный внешний вид сайта.
Именно поэтому мы максимально ограничили возможность менять оформление текстового наполнения лендинга. Весь текст для основной страницы сайта, можно редактировать только в режиме текста. Менять его цвет, размер, начертание из админки нельзя, соответствующих кнопок просто нет в формах. Несколько свободнее правила для подробных описаний сущностей (показываются во всплывающих окнах). Для них доступны жирный текст, курсив, подчеркивание, зачёркивание, списки, ссылки и даже картинки и видео (возможно, будет убрано в будущем), но нельзя изменить размер шрифта и его цвет.
![Фото 3: «extra_02_crazy_typography_min.jpg»](https://site-cloud-files.bitrix.info/main/318/318571e0971cac59b018ae4a05f4c7a2/extra_02_crazy_typography_min.jpg)
... при этом, именно редактировать можно почти любой контент (кроме, разве что, текста кнопок и некоторых подсказок).
Все настройки сайта собраны на одной странице в админке (она также доступна из публичной части).
![Фото 4: «admin_user_admin_min.png»](https://site-cloud-files.bitrix.info/main/23a/23aee328261b97b8eb8c88a6f8c31753/admin_user_admin_min.png)
Такие вещи, как номера телефонов и прочие контакты, реализованы в виде настроек. Как следствие, их нельзя отредактировать «на месте» в режиме правки (как контент инфоблоков), а только в диалоге настроек; но зато они хранятся централизованно, и тот же номер телефона не нужно вводить несколько раз — для шапки, подвала и пр.
Всего предусмотнено 13 блоков контента, отличающихся способом представления информации. Их все можно легко менять местами, убирать и задействовать снова — простым перетаскиванием мыши там же, в настройках:
![Фото 5: «settings_07_sort_min.png»](https://site-cloud-files.bitrix.info/main/dc7/dc7d2e52ad77f8da87f058a065d7c529/settings_07_sort_min.png)
![Фото 6: «admin_03_public_content.png»](https://site-cloud-files.bitrix.info/main/b14/b146b5f68625b5f8eddf7770c299e54d/admin_03_public_content.png)
![Фото 7: «feedback_02_list.jpg»](https://site-cloud-files.bitrix.info/main/0ec/0ecb4d11f4438510c188fada270b14df/feedback_02_list.jpg)
![Фото 8: «admin_user_editor.png»](https://site-cloud-files.bitrix.info/main/358/358adbba03b24534ce8680126c29f1d9/admin_user_editor.png)
![Фото 9: «admin_user_editor_public.png»](https://site-cloud-files.bitrix.info/main/95b/95b726ecd49ff6c346a181f5d6204be1/admin_user_editor_public.png)
SEO. На страницах присутствует все мета-теги для поисковиков (заполняется в настройках), в контент внедрена микроразметка, используемая для форматирования поисковой выдачи (Google одобряет).
Если нет JavaScript. Обычно пользователь видит доп. описания элементов во всплывающем окне; если у него выключен JavaScript — то на отдельной странице.
Поддерживается многосайтовость.
Вам нужна консультация?
Можете связаться с нами удобным удобным способом
- позвонить по номеру +7-778-003-002-0
- написать на почту sale@ready.kz
- заказать звонок
- заполнить форму обратной связи