1. Adaptive Images
Ваш веб-сайт всё чаще отображается на устройствах с малым экраном, что приводит к уменьшению объёма просматриваемой информации. Кроме того, к проблемам разработки для малых экранов относится и вопрос изменения размера изображений, что тоже должно быть принято во внимание. К счастью, с этим превосходно справляется инструмент Adaptive Images – PHP-скрипт, работающий на любом веб-сайте. Adaptive Images определяет размер экрана и подгоняет под него размер изображения, что в итоге даёт малый размер изображения на малых экранах.
2. FitText
Вы когда-нибудь хотели иметь масштабируемые заголовки, заполняющие ширину родительских элементов при гибкой разметке? Данный jQuery-плагин позволит вам изменять шрифт и быть при этом уверенным, что всё останется на своих местах, независимо от устройства или браузера.
3. PhotoSwipe
Знали ли вы о том, что можно создавать альбомы изображений, подобные тем, что можно встретить на персональных ПК, и для мобильных устройств? Это бесплатная HTML/CSS/javascript-библиотека, обладающая интуитивно понятным интерфейсом и позволяющая разработчикам и дизайнерам давать возможность своим посетителям управлять изображениями на мобильном веб-сайте. Инструмент совместим со всеми популярными javascript-библиотеками и фреймворками.
4. Less Framework
При создании веб-сайта с несколькими разметками, важно удержать согласованность. Имея разметки, основанные на одной и той же сетке, можно повторно использовать элементы, изменяя ширину, шрифт, размеры или другие малые детали. В этом и заключается идея Less Framework. Имея общую сетку, можно создавать разные макеты, обеспечивая при этом согласованность.
Смотрите выпуски, посвященные изучению Less, на нашем сайте.
5. Skeleton
Используя CSS, можно быстрее создавать адаптивные веб-сайты. Skeleton делает это возможным благодаря облегчённой 960-сетке, позволяя подстраивать веб-сайт под экран ноутбука и мобильного устройства (работая и в портретном и в альбомном формате). Он идёт с набором кнопок, вкладок и других элементов, из которых может состоять мобильный веб-сайт.
6. Responsive Testing Tool
Теперь, когда у вас есть разрабатываемый мобильный сайт, как его протестировать? Настройки безопасности браузера не позволят вам перемещаться по фреймам. Matt Kersley, дизайнер и разработчик, спроектировал средство, которое может решить эту проблему. Инструмент можно скачать с Github, и установить на хостинг веб-сайта, чтобы проводить тестирование прямо во время разработки.
7. Inuit CSS Framework
С поддержкой HTML5, inuit.css поставляется с пользовательским редактором сетки для разработки гибких сеток. Фреймворк является гибким и обновляемым, и позволяет устанавливать чувствительные границы, давая вам полный контроль над тем, что вы собираетесь сделать.
Пожалуйста, не стесняйтесь делиться своими любимыми инструментами для разработки адаптивных веб-сайтов.
