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

В связи с ростом спроса на такие сайты у разработчиков возникает потребность  в удобных инструментах для их создания. Сегодня мы постарались собрать вместе jQuery плагины для создания адаптивного дизайна, которые позволят вам решить массу проблем. Используя следующие плагины, вы сможете не только масштабировать изображения, видео и шрифты в зависимости от размера экрана пользователя, но и менять всю сетку сайта.

Isotope

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

* * *

jQuery Mansory

Еще один плагин, который позволяет изменять сетку сайта это jQuery Mansory. Он стремится расположить все доступные элементы таким образом, что бы минимизировать пустые места по вертикали между ними. Его применение дает одни из лучших результатов для экранов мобильных устройств.

* * *

Responsive menu

 

Responsive menu это простой плагин, который делает меню удобным на экранах малого разрешения.

* * *

Convert a Menu to a Dropdown for Small Screens

Этот плагин вместо стандартного отображения элементов меню в строчку делает из них выпадающий список.

* * *

Responsly.js

Плагин Responsly jQuery позволяет управлять всем сайтом, редактируя всего один CSS файл. Его основная задача это создание версии страницы для экранов мобильных устройств. Обеспечена поддержка всех популярных браузеров, но мы рекомендуем особо тщательно тестировать его работу в IE.

* * *

Breakpoints.js

Используя плагин Breakpoints.js вы можете определить критические значения разрешения экрана, переход через которые будет генерировать пользовательские события. Они позволят выполнять на странице любые необходимые действия.

* * *

jFontSize

Мы все привыкли к кнопке A+/A-, которую можно встретить на множестве сайтов. Плагин jFontSize выполняет те же функции. Он адаптирует размер шрифта для наилучшего отображения на экране в соответствии с разрешением экрана пользовательского устройства.

* * *

Fit Text

С помощью Fit Text заголовки на страницах вашего сайта будут менять размер в зависимости от размеров экрана используемого устройства.

* * *

jQuery UI mediabox

jQuery UI mediabox это универсальный плагин, с помощью которого могут быть изменены размеры любых элементов на странице, например, видео с YouTube или Vimeo. Все изменения могут происходить в реальном времени.

* * *

FitVidJS

Этот плагин изменяет размер встроенных видео в зависимости от ширины экрана.

* * *

Photo Swipe

Photo Swipe это универсальная фотогалерея на основе Javascript. Она разрабатывалась в первую очередь для использования на мобильных устройствах. Ее применение позволит сделать просмотр изображений на вашем сайте интуитивным для всех пользователей мобильных платформ.

* * *

Elastislide

Elastislide это адаптивная карусель изображений, которая изменяет размеры и поведение в зависимости от доступного размера экрана. Если добавить эту карусель в контейнер с изменяемым размером, то и сама карусель будет меняться с ним вместе. В работе этого плагина используется jQuery Touchwipe.

* * *

Responsive Thumbnail Gallery

Этот плагин позволяет создать изображения двух размеров. Вам потребуется определить пороговое значение размера, после которого будет показываться изображение другого размера. Со всем остальным плагин справится сам.

* * *

Adaptive images

Это не совсем jQuery плагин, но все же его стоит упомянуть. Adaptive images очень удобно использовать на сайтах с адаптивным и тянущимся дизайном. Без внесения изменений в разметку страницы ваши изображения будут доставляться к конечному пользователю в том размере, который наиболее соответствует разрешению его экрана.

* * *

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

• 980px: монитор
• 768px: планшет
• 480px: смартфон (ландшафтная ориентация)
• 320px: смартфон (портретная ориентация)

Ниже мы приведем несколько примеров:

* * *

Шаблон сайта о моде #37517

* * *

Промышленный шаблон #37685

* * *

Бизнес шаблон #37359

* * *

Благотворительная организация #37421

* * *

Бизнес шаблон #37735

 

* * *

Свадебный шаблон #37765

Автор — Илья Скрипка



Комментарии