Рассмотрим некоторые инструменты, облегчающие жизнь дизайнерам, проектирующим универсальные веб-сайты, подстраивающиеся под любой тип устройства, с которого вошёл пользователь, будь то настольный компьютер, планшет или смартфон. Такой тип веб-дизайна называется отзывчивым (responsive).
Responsive Slides. Для тех разработчиков, которые в настоящее время, не используя WordPress, стремятся внести элементы отзывчивого дизайна. Слайдер в JQuery стиле, который будет отображаться на разных устройствах с разными размерами экрана. Реализация JavaScript на этом слайдере едва ли больше, чем один килобайт, то есть он не будет отягощать страницу из-за размера файла во время загрузки на медленных мобильных соединениях. Благодаря разнообразию вариантов и направлений реализации, этот интересный слайдер заслуживает внимания тех, кто создает богатый отзывчивый дизайн, способный работать на любых устройствах. Это отличное решение для популярных сегодня женских сайтов, которые рассказывают о диетах, рецептах блюд, выдадут гороскоп на сегодня или совет как завоевать сердце понравившегося мужчины. Особенность таких проектов — их целевая аудитория часто использует планшеты и мобильные устройства выхода в интернет, поэтому «резиновый адаптирующийся дизайн» будет очень кстати.
Frameless. Большинство сеток, используемых в конструкции отзывчивых сайтов, масштабируются вместе с дизайном, при изменении его размера, но некоторые разработчики предпочитают просто «отрезать» контент, когда он в окне браузера достигает определенной уменьшенной ширины. Если это так, бескаркасные сетки являются наилучшим вариантом. Они работают с неограниченным числом колонок, которые будут растягиваться бесконечно, с CSS назначенными точками останова. Это придаст дизайну статичный вид на любой платформе.
Adobe Edge Inspect. Если отзывчивый дизайн неправильно масштабируется, когда посетитель заходит на него через смартфон или планшет, то время, потраченное на изучение сеток, колонок, и рамок будет потрачено напрасно. Для того, чтобы повысить свои шансы на выявление ошибок, разработчикам рекомендуется рассмотреть использование инструмента Adobe Edge Inspect. Этот инструмент можно использовать сам по себе и для готового сайта, проверяя при плавном масштабировании корректность отображения контента, можно прокручивать контент в «ландшафтном» режиме, а также выполнять другие распространенные задачи для планшетов и смартфонов.