Адаптивность на все 100 и отзывчивость на все 200

Адаптивность на все 100 и отзывчивость на все 200

26 ноября 2015


Автор: Кузьмина Диана
Практически все элементы и компоненты в решении BXReady Интернет-магазин продуманы еще и с точки зрения адаптивности. Теперь вы можете настраивать не только внешний вид элементов, но и как они будут выстраиваться в списках. Это очень удобно для работы с сайтом и является особенной фишкой нашего решения.

Кому-то это может показаться мелочью, но точно не контент-менеджеру (или веб-мастеру), который теперь сможет:
  • спокойно выводить абсолютно разные списки (блоки, плитки, слайдеры) независимо от формата отображения элементов в них,
  • легко устанавливать: количество колонок, количество элементов в списках, количество элементов при разных разрешениях.
И, главное, что все эти настройки он проведет всего за несколько минут!

Несколько наглядных примеров.

Вот так сейчас выглядит концентратор на демо-сайте:

Фото 1: «5_elements.png»

В настройках компонента установлена 10-колоночная сетка и вывод 5 элементов при данном разрешении.


Фото 2: «elements_quantity.png»

Ну, а если вы захотите вывести всего 3 товара при разрешении LG, MD и SM, а при XS - 1 товар (например, создали новую широкую карточку для элементов, либо в разделе всего 3 товара), вы можете поменять эти настройки и сразу же увидите изменения на сайте.

LG, MD, SM

Фото 3: «3_elements.png»

XS

Фото 4: «XS.png»

Кстати! с редакции 15.5 практически все компоненты Битрикс работают на базе Bootstrap. Причем сетка используется в 12 колонок.
Это не всегда удобно. К примеру - в одноколоночном дизайне очень классно смотрятся именно пять товаров в ряд, чего в принципе невозможно сделать, используя 12 колоночную сетку. Тем не менее... Мы эту задачку решили.И не просто решили, теперь у каждого из вас есть возможность использовать адаптивность компонент как в 12, так и в 10 колоночном варианте
Возможность применять 12 и 10 колоночные сетки в процессе настройки - это с виду незаметная, но очень мощная фишка, которая может развязать руки веб-мастерам.

Но списки элементов - это еще не все.

Помимо основных компонентов списков, настроить адаптивность можно и у всплывающего меню (при установленном в нем многоколоночном выводе).
Фото 5: «responsive.png»


LG
Фото 6: «LG.png»


MD
Фото 7: «MD.png»

Это также особенная фишка нашего проекта. Про меню мы напишем еще специальные статьи, но с точки адаптивности - оно тоже продумано.


Решение BXReady Интернет-магазин не только изначально адаптивно, но и сделано так, чтобы вы еще могли настраивать эту адаптивность под свои потребности.

А теперь важное резюме:
Мы так привыкли к термину адаптивность, что уже забываем про дословный перевод Responsive Design.
Так адаптивность или отзывчивость?
Не будем ломать голову.
С нашим решением вы можете адаптировать свой контент под различные устройства,
а отзывчивость со стороны настроек компонентов мы вам уже обеспечили.