jQuery плагины для адаптивного дизайна

Вы хотите, что бы ваш сайт правильно отображался на мобильных устройствах и планшетах? Мы уверены, что вы ответите положительно и задумаетесь о том, как сделать дизайн вашего сайта адаптивным. Адаптивный дизайн стал одним из основных трендов конца 2011 года и мы просто не могли остаться в стороне. Прочитать про концепцию адаптивного дизайна вы можете соответствующей записи этого блога.  Сегодня мы продолжим цикл публикаций об этом направлении статьей, которая поможет вам обеспечить техническую реализацию идеи адаптивного дизайна.

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

1. Photo Swipe

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

* * *

2. Responsly.js

Плагин Responsly jQuery разработан с поддержкой экранов планшетов, нетбуков и других мобильных устройств. Он совместим со всеми современными браузерами (будьте внимательны с IE!) и работает на основе CSS.  Это очень "легкий" плагин и управлять сайтом можно просто редактируя CSS файл.

* * *

3. Fit Text

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

* * *

4. jQuery Mansory

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

* * *

5. Responsive menu

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

* * *

6. FitVidJS

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

* * *

7. Adaptive images

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

* * *

8. Convert a Menu to a Dropdown for Small Screens

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

* * *

9. jFontSize

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

* * *

10. jQuery UI mediabox

Это jQuery плагин для отображения разнообразного содержимого на ваших страницах. Это могут быть изображения, видео с YouTube или Vimeo и что угодно другое. Все эти элементы смогут менять размер в реальном времени.