—»     —»   7 инструментов для адаптивного веб-дизайна
  Раздел: Инструменты   Нет комментариев  

7 инструментов для адаптивного веб-дизайна



Переход к разработке адаптивных веб-сайтов представил целый набор инструментов, которые могут помочь начинающему разработчику освоиться и использовать кросс-браузерные и не привязанные к конкретным устройствам сайты быстрее и продуктивнее. Давайте рассмотрим некоторые из этих инструментов, которые вы можете использовать по мере углубления в адаптивный веб-дизайн:

1. Adaptive Images

7 инструментов для адаптивного веб-дизайна

Ваш веб-сайт всё чаще отображается на устройствах с малым экраном, что приводит к уменьшению объёма просматриваемой информации. Кроме того, к проблемам разработки для малых экранов относится и вопрос изменения размера изображений, что тоже должно быть принято во внимание. К счастью, с этим превосходно справляется инструмент Adaptive Images – PHP-скрипт, работающий на любом веб-сайте. Adaptive Images определяет размер экрана и подгоняет под него размер изображения, что в итоге даёт малый размер изображения на малых экранах.

2. FitText

7 инструментов для адаптивного веб-дизайна

Вы когда-нибудь хотели иметь масштабируемые заголовки, заполняющие ширину родительских элементов при гибкой разметке? Данный jQuery-плагин позволит вам изменять шрифт и быть при этом уверенным, что всё останется на своих местах, независимо от устройства или браузера.

3. PhotoSwipe

7 инструментов для адаптивного веб-дизайна

Знали ли вы о том, что можно создавать альбомы изображений, подобные тем, что можно встретить на персональных ПК, и для мобильных устройств? Это бесплатная HTML/CSS/javascript-библиотека, обладающая интуитивно понятным интерфейсом и позволяющая разработчикам и дизайнерам давать возможность своим посетителям управлять изображениями на мобильном веб-сайте. Инструмент совместим со всеми популярными javascript-библиотеками и фреймворками.

4. Less Framework

7 инструментов для адаптивного веб-дизайна

При создании веб-сайта с несколькими разметками, важно удержать согласованность. Имея разметки, основанные на одной и той же сетке, можно повторно использовать элементы, изменяя ширину, шрифт, размеры или другие малые детали. В этом и заключается идея Less Framework. Имея общую сетку, можно создавать разные макеты, обеспечивая при этом согласованность.

Смотрите выпуски, посвященные изучению Less, на нашем сайте.

5. Skeleton

7 инструментов для адаптивного веб-дизайна

Используя CSS, можно быстрее создавать адаптивные веб-сайты. Skeleton делает это возможным благодаря облегчённой 960-сетке, позволяя подстраивать веб-сайт под экран ноутбука и мобильного устройства (работая и в портретном и в альбомном формате). Он идёт с набором кнопок, вкладок и других элементов, из которых может состоять мобильный веб-сайт.

6. Responsive Testing Tool

7 инструментов для адаптивного веб-дизайна

Теперь, когда у вас есть разрабатываемый мобильный сайт, как его протестировать? Настройки безопасности браузера не позволят вам перемещаться по фреймам. Matt Kersley, дизайнер и разработчик, спроектировал средство, которое может решить эту проблему. Инструмент можно скачать с Github, и установить на хостинг веб-сайта, чтобы проводить тестирование прямо во время разработки.

7. Inuit CSS Framework

7 инструментов для адаптивного веб-дизайна

С поддержкой HTML5, inuit.css поставляется с пользовательским редактором сетки для разработки гибких сеток. Фреймворк является гибким и обновляемым, и позволяет устанавливать чувствительные границы, давая вам полный контроль над тем, что вы собираетесь сделать.

Пожалуйста, не стесняйтесь делиться своими любимыми инструментами для разработки адаптивных веб-сайтов.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 10791   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930