Адаптивный дизайн стал одной из главных для веб-разработчиков тем ушедшего 2011 года. Перед всем сообществом стоит дилемма - создавать отдельную "iPhone" версию сайта или же разрабатывать адаптивный дизайн, который будет правильно выглядеть на экране любого размера и разрешения.
Учитывая, что возможности современный мобильных браузеров уже практически сравнялись с десктопными, идеологически правильным выглядит вариант именно адаптивного дизайна. К сожалению, его создание в настоящее время вызывает множество затруднений, так как эта практика еще не получила широкого распространения и инструментарий не известен широкому кругу разработчиков.
Во время праздников встретил интересную статью jQuery Plugins for Responsive Web Design, перевод которой и предлагаю ниже.
1. Responsly.js
Плагин Responsly jQuery создан специально для поддержки устройств с небольшими экранами. Он работает на основе CSS и поддерживается всеми популярными браузерами (тщательно тестируйте IE!). Обладает значительным быстродействием и обеспечивает удобное управление сайтом с помощью CSS файла.
2. Photo Swipe
Photo Swipe это написанная на Javascript галерея изображений. Она была создана в первую очередь для мобильных устройств и позволит создать привычный для их пользователей интерфейс при просмотре изображений.
3. Fit Text
FitText лучший плагин для масштабирования шрифтов. Используя его можно сделать огромный шаг в создании адаптивного дизайна - обеспечить изменение размера шрифта в заголовках в зависимости от размеров экрана.
4. Responsive Menu
Маленький jQuery плагин, который превратит ваше меню в выпадающий список на экранах мобильных устройств и при узком окне браузера.
5. Adaptive Images
Эфективное решение для того, что бы предоставлять мобильным пользователям вашего сайта уменьшенные изображения. Плагин не требует изменений в разметке страницы. Определяя разрешение он создает подходящую, масштабируемую версию изображений для ваших страниц.
6. jQuery Mansory
jQuery Mansory плагин меняет "сетку" сайта в зависимости от разрешения экрана. С его помощью блоки ваших страниц расположатся таким образом, что бы при любом разрешении экрана минимизировались вертикальные разрывы между ними. Макет страницы удачно оптимизируется под любое разрешение экрана.
7. FitVidJS
Легкий плагин, который контролирует размер встроенного видео и оптимизирует его в зависимости от ширины экрана.
8. Convert a Menu to a Dropdown for Small Screens
Еще один плагин, который преобразует горизонтальное меню сайта в выпадающий список при малых разрешениях экрана.
9. jFontSize
Плагин - альтернатива широко известной кнопке "A+/A-". Размер шрифта изначально адаптируется под разрешение экрана, а пользователю предоставляется дополнительная возможность увеличить или уменьшить размер шрифта.
10. jQuery UI mediabox
Плагин для управления отображением встраиваемого контента. Позволяет в реальном времени изменять размер изображений и видео с YouTube и Vimeo.
Учитывая, что возможности современный мобильных браузеров уже практически сравнялись с десктопными, идеологически правильным выглядит вариант именно адаптивного дизайна. К сожалению, его создание в настоящее время вызывает множество затруднений, так как эта практика еще не получила широкого распространения и инструментарий не известен широкому кругу разработчиков.
Во время праздников встретил интересную статью jQuery Plugins for Responsive Web Design, перевод которой и предлагаю ниже.
1. Responsly.js
Плагин Responsly jQuery создан специально для поддержки устройств с небольшими экранами. Он работает на основе CSS и поддерживается всеми популярными браузерами (тщательно тестируйте IE!). Обладает значительным быстродействием и обеспечивает удобное управление сайтом с помощью CSS файла.
2. Photo Swipe
Photo Swipe это написанная на Javascript галерея изображений. Она была создана в первую очередь для мобильных устройств и позволит создать привычный для их пользователей интерфейс при просмотре изображений.
3. Fit Text
FitText лучший плагин для масштабирования шрифтов. Используя его можно сделать огромный шаг в создании адаптивного дизайна - обеспечить изменение размера шрифта в заголовках в зависимости от размеров экрана.
4. Responsive Menu
Маленький jQuery плагин, который превратит ваше меню в выпадающий список на экранах мобильных устройств и при узком окне браузера.
5. Adaptive Images
Эфективное решение для того, что бы предоставлять мобильным пользователям вашего сайта уменьшенные изображения. Плагин не требует изменений в разметке страницы. Определяя разрешение он создает подходящую, масштабируемую версию изображений для ваших страниц.
6. jQuery Mansory
jQuery Mansory плагин меняет "сетку" сайта в зависимости от разрешения экрана. С его помощью блоки ваших страниц расположатся таким образом, что бы при любом разрешении экрана минимизировались вертикальные разрывы между ними. Макет страницы удачно оптимизируется под любое разрешение экрана.
7. FitVidJS
Легкий плагин, который контролирует размер встроенного видео и оптимизирует его в зависимости от ширины экрана.
8. Convert a Menu to a Dropdown for Small Screens
Еще один плагин, который преобразует горизонтальное меню сайта в выпадающий список при малых разрешениях экрана.
9. jFontSize
Плагин - альтернатива широко известной кнопке "A+/A-". Размер шрифта изначально адаптируется под разрешение экрана, а пользователю предоставляется дополнительная возможность увеличить или уменьшить размер шрифта.
10. jQuery UI mediabox
Плагин для управления отображением встраиваемого контента. Позволяет в реальном времени изменять размер изображений и видео с YouTube и Vimeo.
