Подборка полезных инструмента для создания адаптивных сайтов
Традиционный дизайн с фиксированной шириной уже не в моде, многие хотят, чтобы сайт отображался одинаково на всех устройствах: мобильных телефонах, планшетах, смартфонах и т.д ? Сегодня, как никогда, популярна технология адаптивного веб-дизайна (responsive web design), поэтому мы предлагаем Вашему вниманию подборку полезных инструментов, которые значительно упростят создание «универсального» сайта. Надеемся, Вы найдёте здесь что-то нужное.
Вкратце, основными состaвляющими создания responsive web design являются:
1. Использование резинового типа макета;
2. Резиновые изображения и видео;
3. Использование media queries;
4. Подход Mobile First – «Сперва мобильные».
Итак, вот некоторые инструменты, которые помогут Вам в созданиии адаптивного дизайна.
Инструменты для создания резинового типа макета
1. Golden Grid System — модульная сетка, которая использует правила «золотого сечения». Изменяет количество колонок (от 4 до 18) в зависимости от размера экрана (от 240px до 2560px). Скачать её можно здесь.
2. Tiny Fluid Grid – генератор CSS-файлов для сеточной разметки страницы. Недостаток его в том, что он имеет некоторые ограничения.
Чтобы скачать сетку, установите количество колонок, расстояние между колонками, максимальную и минимальную ширину и нажмите «Download».
3. 1140 CSS Grid – ещё один сервис для генерации адаптивной сетки. Подходит как для мобильных устройств,
так и для экранов с большим расширением (по умолчанию максимальная ширина сетки-1140px).
4. Columnal – является «ремиксом» других сеток с некоторыми изменениями. Идея адаптивной сетки взята из 1140 CSS Grid, а идея построения колонок – из 960.gs. Смотрите ДЕМО
5. Fluid 960 Grid System – резиновый шаблон, сделанный при помощи системы 960 Grid. Скачать его можно здесь.
6. SimpleGrid – простой и удобный адаптивный шаблон CSS для построения модульной сетки. Содержит разные таблицы стилей для разных размеров экрана (меньше 720px, больше 720px, 985px, больше 985px, и больше 1235px).
7. BluCSS Framework – бибилиотека стилей CSS для адаптивного шаблона. Адаптируется под экраны настольных компьютеров, ноутбуков, планшетов и мобильных устройств. По умолчанию имеет ширину 1000px (ее можно изменять на нужное значение)
При помощи этой библиотеки можно создавать адаптивные изображения: для этого нужно добавить к изображению класс «blu_».
Инструменты для создания резиновых изображений, видео, шрифта
8. Adaptive Images– позволяет изменить размер изображения в зависимости от размера экрана.
9. Sencha - позволяет динамически изменять размер изображения в зависимости от
размеров экрана мобильного устройства (не увеличивает размер изображений!).
10. Seamless Responsive Photo Grid - эластичная сетка для фотографий, которые прилегают друг к другу. Смотрите демо.
11. Photo Swipe — это адаптивная галерея, которая была созданна для мобильных и сенсорных устройств.
12. Blueberry — это бесплатный jQuer-слайдер, написанный специально для работы адаптивным дизайном
13. Responsive jQuery Slider Plugin Flexslider — адаптивный слайдер. Простой в использовании, поддерживается всеми основными браузерами.
14. FitVidJS – удобный плагин для создания эластичного видео.
15. PXtoEM.com – очень удобный инструмент для конвертации пикселей в em
16. FitText – плагин, который делает шрифты резиновыми.
17. Lettering.js – небольшой плагин для создания радикальной веб-типографики.
Использование media queries;
18. Hardboiled CSS3 Media Queries – содержит готовые решения css-стилей для устройств с разным размеров экрана.
19. Respond.js – помогает Media Queries работать в IE 6-8.
20. CSS3-mediaqueries-js – небольшой плагин, который помогает Media Queries работать во всех браузерах
21. Mobile Boilerplate – одно из лучших решений для построения сложных веб-приложений. Вы получаете не только кросс-браузерный шаблон, совместимый с мобильными устройствами, но и поддержку старых Blackberry, Symbian и Windows Mobile.
Инструменты для тестирования
22. resizeMyBrowser – выберите размер браузера и он откроется в новом окне.
23. Responsive Design Testing - введите url и Вы сможете увидеть, как выглядит сайт на разных экранах
24. Screenfly - при помощи этого сервиса можно посмотреть как будет выглядеть Ваш сайт на различных устройствах.
Комментировать статьи на сайте возможно только в течении 90 дней со дня публикации.