Традиционный дизайн с фиксированной шириной уже не в моде, многие хотят, чтобы  сайт отображался одинаково на всех устройствах: мобильных телефонах, планшетах, смартфонах и т.д. ?  Сегодня, как никогда,  популярна технология адаптивного веб-дизайна (responsive web design), поэтому мы предлагаем Вашему вниманию подборку полезных инструментов, которые значительно упростят создание «универсального» сайта. Надеемся, Вы найдёте здесь что-то нужное.

Вкратце, согласно Итану Маркотту, основными состaвляющими создания responsive web design являются:

1. Использование резинового типа макета;
2. Резиновые изображения и видео;
3. Использование media queries;
4. Подход Mobile First – «Сперва мобильные».

Итак, вот некоторые инструменты, которые помогут Вам в созданиии адаптивного дизайна.

Инструменты для создания резинового типа макета

1.Golden Grid System —  модульная сетка, которая использует правила «золотого сечения». Изменяет количество колонок (от 4 до 18) в зависимости от размера экрана (от 240px  до 2560px). Скачать её  можно здесь.  Если Вам нужен PSD-исходник, можете взять его отсюда.

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

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

Подготовлено Дежуркой.

Возможно, вам будет интересно почитать  урок по созданию адаптивного сайта 



Комментарии