Адаптивность сайта — Документация

Механизм работы адаптивности

Конструктор — это простор для фантазии, поэтому мы, разработчики, не способны предусмотреть все сценарии использования конструктора. Для этого была сделана специальная система адаптации конструкторов. Подробнее о том, как адаптировать конструкторы, описано ниже, а сейчас расскажем, почему это важно

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

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

Если коротко: загружаем на сайт только то, что нужно увидеть и ничего лишнего

Правила адаптивности

Правила адаптивности относятся к конфигурации каждой страницы/шапки/подвала/мегаменю.

В настройках правил адаптивности отображается список всех созданных правил. В каждом правиле в первую ячейку впишите начальное значение ширины окна браузера, а во вторую — конечную, это будет интервал, в котором расположится редактируемый конструктор, при этом нельзя делать так, чтобы интервалы накладывались друг на друга, например: 0-100 и 100-200 создать нельзя, потому что у них есть общая точка — 100, в которой будет не определено, какой именно конструктор открывать. В данном случае было бы верно создать 0-100, 101-200.

Чтобы создать новое правило, нажмите кнопку «Создать» #5 на рис.1 около справа от «Правил адаптивности». В появившихся справа настройках создания вы можете выбрать, на основе какого, уже существующего правила адаптивности, вы хотите создать новое. В таком случае настройки всех групп и всех виджетов будут продублированы в новом. Для создания полностью пустого правила адаптивности, для этого оставьте «Не выбрано»

Чтобы вам было проще ориентироваться в ширинах окон браузеров, приведем ориентировочные границы ширины монитора (экрана) для различных типов устройств:

Телефон: 0-700
Планшет: 701-1050
Компьютер: 1051-* (* означает максимальное значение, так как потенциальная ширина мониторов не ограничена). Да, нужно написать именно звездочку и ничего больше. Она автоматически распознается системой

Однако по собственному желанию вы можете разбивать на любые интервалы

Просмотр правил адаптивности (рис.1)

#1,2,3 — созданные интервалы адаптивности (порядок выставляется автоматически по возрастанию)
#3 — выделенное в качестве редактируемого правило адаптивности
#4 — кнопка перехода в настройки всех интервалов (рис.2)
#5 — кнопка для создания нового правила адаптивности (возможно на основе уже существующего)

Рис. 1

Настройки правил адаптивности (рис.2)

#1 — начальная ширина правила адаптивности
#2 — конечная ширина правила
#3 — кнопка, по нажатию на которую удалится правило вместе со всеми содержащимися в нем виджетами

Рис. 2

Как проконтролировать адаптивность

Чтобы проверить, не «едут» ли элементы сайта (то есть отображаются корректно) при изменении его ширины, мы используем браузер Firefox. Однако вы можете использовать любой другой, поскольку в большинстве браузеров описанные ниже возможности также присутствуют.

Откройте страницу на сайте, которую нужно адаптировать
Нажмите правой кнопкой мыши на пустую область страницы и нажмите «Исследовать элемент». У вас откроется код сайта (окно)
Нажмите на троеточие в правом верхнем углу окна и выберите, где отображать данную панель. Мы рекомендуем выбрать «Закрепить снизу» для оптимизации пространства
Слева от троеточия нажмите на иконку планшета и телефона
Вверху экрана в первом поле ввода напишите ширину сайта, для которого хотите проверить адаптивность (или изменяйте ее мышкой, перетаскивая курсором правую/левую границу сайта
Изменяйте это значение до тех пор, пока не появится элемент элемент, который «поехал»
1. Перейдите в конструктор сайта
2. Добавьте правило адаптивности для интервала, в котором элемент «едет»
3. Настройте элементы так, чтобы они отображались корректно
4. Передите на сайт и убедитесь, что все в порядке
Убедитесь, что все элементы отображаются корректно