А вы знаете, что можете управлять адаптивностью ваших сайтов?

А вы знаете, что можете управлять адаптивностью ваших сайтов?

30 июня 2017


Автор: Коваленко Алексей
Адаптивностью в готовых решениях уже никого не удивишь. А вот возможность управлять адаптивностью без нужды программировать, может дать вам преимущество перед вашими конкурентами в борьбе за юзабилити.

Особое внимание обратите управлению адаптивностью на следующих участках BXReady: Интернет-магазин:

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

Итак. Несколько примеров применения:

У нас есть такой вариант раскрывающегося меню, как многоколоночное меню (левое или главное)
Так вот. Вы можете управлять количеством (а соответсвенно и размерами) колонок.
Вот самый простой пример, который вы можете попробовать даже на Демо-сайте

При переходе по указанной ссылке у вас включится следующий вариант настройки меню:На больших экранах по три колонки
Фото 1: «menu_sc1.jpg»

А для средних экранов можно задать 2 колонки:

Фото 2: «menu_sc2.jpg»


Но основой любого магазина, конечно, является каталог:


В нашем решении вы можете сами задать состав (количество) товаров в строке , в зависимости от разрешения экрана.

Например, для больших экранов, установим показ 3 товаров в строке каталога:
Получаем список товаров следующего вида:
Фото 3: «catalog_sc1.png»

А вот так будет выглядеть список на средних экранах если мы будем выводить по два товара:

Фото 4: «catalog_sc2.png»

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

Фото 5: «catalog_sc3.png»

Мы привели только пару примеров, однако настоятельно рекомендуем не упустить информацию о том Как легко тюнинговать адаптивность в списках товаров

И это еще не все
Возможность настройки адаптивности находится и на других немаловажных участках сайта

Например, вы можете самостоятельно решить как отображать статьи и на каких устройствах

Фото 6: «other_sc1.png»

Фото 7: «other_sc2.png»


Не отстают от статей и другие разделы

Например, новости:
Фото 8: «other_sc3.png»
Фото 9: «other_sc4.png»


Важный момент, примеры использованы с установленного стандартного варианта решения и на их подготовку ушло не более 5 минут

Материалы по теме адаптивности, которые мы рекомендуем не пропускать:
1)Адаптивность на все 100 и отзывчивость на все 200 в BXReady: Интернет-магазин
2)А знаете ли вы что... BXReady обладает мощным потенциалом управления адаптивностью списков товаров.
3) BXReady: Интернет-магазин. Пособие для веб-мастеров и разработчиков. Адаптивность и списки.

Экспериментируйте, делайте Ваш сайт уникальным и приятным глазу

Ссылка на решение:
BXReady: Интернет-магазин