Коллекция паттернов поведения для элементов отзывчивого веб-дизайна

в 10:41, , рубрики: css, html, javascript, media queries, mobile design, responsive design, responsive web design, Веб-разработка, Дизайн в IT, Мобильный веб, Отзывчивый веб-дизайн, метки: , , , , , , ,

Коллекция паттернов поведения для элементов отзывчивого веб дизайнаДумаю любому современному дизайнеру или верстальщику рано или поздно в голову приходила мысль «А почему бы на этом проекте не использовать принципы отзывчевого веб-дизайна?». Пожалуй, сложно найти человека, который не слышал о responsive design в наше время, когда сёрфить веб могут с телефона, микроволновки и тапочек. Приступая к работе над подобным проектом, неплохо было бы иметь под рукой примеры возможного поведения лейаута и его отдельных элементов.

Парень по имени Брэд Фрост, из медийного агенства R/GA, любезно собрал, оформил и выложил коллекцию статей и паттернов отзывчевого веб-дизайна для нас, любимых. Количество и разнообразность различных подходов действительно поражает, среди них:

  • Примеры поведения общего лейаута — растягивание, перестроение блоков, исчезание ненужных элементов и многое другое;
  • Таблицы — скрытие ненужной информации, показ таблицы в виде диаграммы при маленьком размере экрана и прочее;
  • Действительно удобные примеры показа навигации на мобильных устройствах;
  • Различные типы типографских сеток;
  • Поведения изображений, видео и прочего медийного контента;
  • Отображение форм;
  • Карусели, нотификации и прочие js необходимости (правда пока в зачаточном состоянии);

Так же на ресурсе собраны чуть ли не все статьи, касательно responsive design. Пользуйтесь, не забывайте делать пул реквесты и, конечно же, нарушайте правила и экспериментируйте!

Автор: omfg

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js