Адаптивный поиск с фильтром

Перевод статьи Криса Койера (Chris Coyier) с CSS-Tricks.com "Search with Filters Responsive Design Pattern ^[1]".

Паттерны дизайна — очень полезная штука, особенно в адаптивном дизайне. Рассмотрим пример: на большом экране в блоке со вкладками по ширине помещается много табов, однако на мобильном устройстве верстка съедет. Решение — использование специального паттерна дизайна ^[2], который сжимает все табы в выпадающие пункты.

Brad Frost ^[3] даже собрал очень хорошую коллекцию адаптивных паттернов ^[4], очень полезно. Еще один пример, форма поиска с фильтром результатов. На десктопе места много:

На маленьких экранах нет столько места, поэтому можно просто переместить правую часть с результатами вниз:

Для лучшего отображение фильтры можно скрывать/показывать по клику:

Возникает вопрос: как пользоваться фильтрами, если страницу на мобильном устройстве прокрутили вниз? Вариант решения — создание «filter bar», который будет привязан к верхней части экрана и поэтому всегда доступен:

В открытом состоянии:

Вот и получился паттерн адаптивного дизайна ^[5]. В коде CSS нед ничего особо примечательного, для изменения структуры используется media query. А в JavaScript-части применяется пример из статьи Persistent Headers ^[6], с незначительными правками.

Конечно он не решает всех проблем, как обычно. На то они и паттерны, а не шаблоны. должен ли «filter bar» содержать поле поиск? Возможно. Что делать, если пунктов фильтра станет больше? Нужна ли кнопка «наверх»? Все это необходимо решать в ходе работы над конкретным проектом.

Автор: grokru

Источник ^[7]