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

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

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

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