html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

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

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

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

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

12

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • sobeninaolga
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции