Подборка полезных инструмента для создания адаптивных сайтов

Подборка полезных инструмента для создания адаптивных сайтов

Традиционный дизайн с фиксированной шириной уже не в моде, многие хотят, чтобы  сайт отображался одинаково на всех устройствах: мобильных телефонах, планшетах, смартфонах и т.д ?  Сегодня, как никогда,  популярна технология адаптивного веб-дизайна (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 - при помощи этого сервиса можно посмотреть как будет выглядеть Ваш сайт на различных устройствах.

+ +13 -
Информация
Комментировать статьи на сайте возможно только в течении 90 дней со дня публикации.
  • Top.Mail.Ru