Перевод статьи Криса Койера (Chris Coyier) с CSS-Tricks.com "Search with Filters Responsive Design Pattern".
Паттерны дизайна — очень полезная штука, особенно в адаптивном дизайне. Рассмотрим пример: на большом экране в блоке со вкладками по ширине помещается много табов, однако на мобильном устройстве верстка съедет. Решение — использование специального паттерна дизайна, который сжимает все табы в выпадающие пункты.
Brad Frost даже собрал очень хорошую коллекцию адаптивных паттернов, очень полезно. Еще один пример, форма поиска с фильтром результатов. На десктопе места много:
![](https://habrastorage.org/r/w1560/storage2/5f4/f3a/532/5f4f3a5329c03e0b7503c2dd1400035c.png)
На маленьких экранах нет столько места, поэтому можно просто переместить правую часть с результатами вниз:
![](https://habrastorage.org/r/w1560/storage2/8ae/27c/65b/8ae27c65bc83bc6708be9c15b062acdd.png)
Для лучшего отображение фильтры можно скрывать/показывать по клику:
![](https://habrastorage.org/r/w1560/storage2/717/ac2/d85/717ac2d85d4aaad0c27314a918500edc.png)
Возникает вопрос: как пользоваться фильтрами, если страницу на мобильном устройстве прокрутили вниз? Вариант решения — создание «filter bar», который будет привязан к верхней части экрана и поэтому всегда доступен:
![](https://habrastorage.org/r/w1560/storage2/0ae/542/98d/0ae54298d05c9abf3d641e647621b09a.png)
В открытом состоянии:
![](https://habrastorage.org/r/w1560/storage2/db2/644/fd2/db2644fd2f93181cc2eb1891c2843e90.png)
Вот и получился паттерн адаптивного дизайна. В коде CSS нед ничего особо примечательного, для изменения структуры используется media query. А в JavaScript-части применяется пример из статьи Persistent Headers, с незначительными правками.
Конечно он не решает всех проблем, как обычно. На то они и паттерны, а не шаблоны. должен ли «filter bar» содержать поле поиск? Возможно. Что делать, если пунктов фильтра станет больше? Нужна ли кнопка «наверх»? Все это необходимо решать в ходе работы над конкретным проектом.
Паттерны дизайна — очень полезная штука, особенно в адаптивном дизайне. Рассмотрим пример: на большом экране в блоке со вкладками по ширине помещается много табов, однако на мобильном устройстве верстка съедет. Решение — использование специального паттерна дизайна, который сжимает все табы в выпадающие пункты.
Brad Frost даже собрал очень хорошую коллекцию адаптивных паттернов, очень полезно. Еще один пример, форма поиска с фильтром результатов. На десктопе места много:
![](https://habrastorage.org/storage2/5f4/f3a/532/5f4f3a5329c03e0b7503c2dd1400035c.png)
На маленьких экранах нет столько места, поэтому можно просто переместить правую часть с результатами вниз:
![](https://habrastorage.org/storage2/8ae/27c/65b/8ae27c65bc83bc6708be9c15b062acdd.png)
Для лучшего отображение фильтры можно скрывать/показывать по клику:
![](https://habrastorage.org/storage2/717/ac2/d85/717ac2d85d4aaad0c27314a918500edc.png)
Возникает вопрос: как пользоваться фильтрами, если страницу на мобильном устройстве прокрутили вниз? Вариант решения — создание «filter bar», который будет привязан к верхней части экрана и поэтому всегда доступен:
![](https://habrastorage.org/storage2/0ae/542/98d/0ae54298d05c9abf3d641e647621b09a.png)
В открытом состоянии:
![](https://habrastorage.org/storage2/db2/644/fd2/db2644fd2f93181cc2eb1891c2843e90.png)
Вот и получился паттерн адаптивного дизайна. В коде CSS нед ничего особо примечательного, для изменения структуры используется media query. А в JavaScript-части применяется пример из статьи Persistent Headers, с незначительными правками.
Конечно он не решает всех проблем, как обычно. На то они и паттерны, а не шаблоны. должен ли «filter bar» содержать поле поиск? Возможно. Что делать, если пунктов фильтра станет больше? Нужна ли кнопка «наверх»? Все это необходимо решать в ходе работы над конкретным проектом.