21 отличный инструмент для адаптивного веб-дизайна
Как веб-дизайнер, мы знаем, что адаптивный веб-дизайн остался навсегда. Вы потратили время на создание очень красивого и надежного веб-сайта со значительным количеством трафика на ваш сайт из поисковых систем. Затем вы приходите к реальности устройств. Какое устройство будет использоваться для открытия вашего сайта? А как насчет высоты и ширины устройства? Существуют тысячи устройств, а также несколько измерений и окон просмотра.
Как веб-дизайнеры, мы знаем, что наш дизайн будут просматривать с разных устройств и браузеров, и в то же время наши блоки кода будут выполняться на разных устройствах.
Произошло значительное увеличение количества устройств с доступом в Интернет, что сопровождалось большой плотностью пикселей, взаимодействием, разрешением и т.д. Также, судя по текущим тенденциям в области технологий, будет больше устройств, с помощью которых люди могут получить доступ к Интернету.
Тот факт, что адаптивный веб-дизайн необходим для каждой сети, не означает, что это так просто, учитывая тот факт, что вы должны учитывать несколько устройств, а также размеры и области просмотра. Задача состоит в том, что мы должны создать интерфейс, который будет масштабироваться практически на всех устройствах, от маленьких экранов до больших экранов в театральном зале.
Это просто сделало обязательным, чтобы все веб-сайты реагировали на различные устройства для удобной навигации и лучшего взаимодействия с пользователем.
Если вы видели один из наших прошлых постов о полезном наборе инструментов адаптивного веб-дизайна, то вы знаете, что в Интернете так много инструментов для адаптивного веб-дизайна. Но благодаря моему многолетнему опыту веб-дизайнера, разработчика и консультанта, а также тщательному исследованию, которое я провел, я поделюсь 21 замечательным инструментом и ресурсом для адаптивного веб-дизайна. Имейте в виду, для дизайнеров, которым еще предстоит смириться с адаптивным веб-дизайном. Я рекомендую прочитать «Важность и причины адаптивного веб-дизайна», вы также можете задать свой вопрос, и эксперт ответит вам по электронной почте. После чего вы можете продолжить здесь с 21 отличным инструментом для адаптивного веб-дизайна.
01 Фонд ЗУРБ
ZURB Foundation — одна из самых популярных и передовых платформ для адаптивного сайта. ZURB потратил много ресурсов на фреймворк, в дополнение к нескольким усилиям, которые были направлены на проект с открытым исходным кодом на фреймворке.
ZURB Foundation имеет огромную стратегию улучшения, поскольку вам разрешено увеличивать сложность слоя в зависимости от размера экрана и возможностей дизайна. Мало того, вы также найдете обширную библиотеку, состоящую из нескольких компонентов пользовательского интерфейса, что упрощает создание прототипа любого интерфейса, который вы можете себе представить.
02 Реактивный ремень
В процессе веб-дизайна произошел массовый поворот, поскольку каркас не показывает, как конкретный дизайн будет выглядеть в нескольких веб-средах. А для использования некоторых инструментов прототипирования требуются знания в области кодирования.
Вот тут-то и появляется Jetstrap. Это позволяет дизайнеру быстро собирать прототип, просто перетаскивая компоненты из пользовательского интерфейса на холст. Навыки разработки интерфейса не требуются для начала, и в итоге вы получите дышащую веб-страницу. Вам нужно только использовать инструменты перетаскивания в интерфейсе.
03 Еженедельник адаптивного дизайна
Веб-разработчик Джастин Эйвери тратит время на рассылку специальных информационных бюллетеней о ресурсах, инструментах и методах адаптивного веб-дизайна. Как дизайнер, я провожу часть своего времени в твиттере, читая ленты об адаптивном веб-дизайне. Некоторые фиды содержат последние ресурсы и полезные советы по созданию адаптивного веб-дизайна. Присоединение к обсуждению адаптивного веб-дизайна на LinkedIn, несомненно, улучшит ваши навыки и даст вам последние идеи о текущих тенденциях в адаптивном веб-дизайне.
04 Стиль прототипа
Прототип стиля — это HTML-страница, показывающая стиль кнопки, типографику, цвет, стиль фотографии, прокрутку и другие элементы для предлагаемого сайта.
Одной из основных целей прототипа стиля является создание полезных и воспроизводимых результатов. Хотя нет никаких правил для создания прототипа стиля, вы должны включить некоторые основные элементы, такие как стиль кнопки, типографика, цвет и прокрутка, помимо других элементов, которые можно включить.
Прототип стиля позволяет добавлять анимацию, цвет и другие элементы в веб-окружение.
05 Коллажи Элементов
При создании полностраничных макетов одной из самых сложных вещей, с которыми нам приходится сталкиваться как дизайнеру, является разработка минут каждой страницы. С профессиональной точки зрения рекомендуется тратить больше времени на разработку основных сообщений на главной странице, чем на остальные страницы.
Как дизайнеру, создание макетов вашего сайта в фотошопе не рекомендуется с учетом современных тенденций в индустрии веб-разработки, так как у вас есть много других дел.
Основатель агентства SuperFriendly Дэн Молл пошел еще дальше в упрощении с помощью Element Collages.
Element Collages имеет очень хороший пользовательский интерфейс для визуального изучения компонентов интерфейса. Коллажи помогают вам в визуальном направлении, и вам не нужно создавать весь компонент самостоятельно, учитывая тот факт, что вы не проектируете только для одного устройства.
06 груш
Некоторые важные преимущества руководств по стилю внешнего интерфейса включают в себя упрощение тестирования, улучшение рабочего процесса, общий словарный запас и использование в качестве справочного материала, к которому можно постоянно возвращаться. Pears — это тема WordPress с открытым исходным кодом, созданная Дэном для создания руководства по стилю внешнего интерфейса.
Pears позволяет дизайнерам легко использовать общую библиотеку для согласованной системы дизайна.
07 Икомун
Retina и другие дисплеи с высоким разрешением быстро становятся обыденностью, растровые значки не очень хорошо масштабируются на этих устройствах с высоким разрешением. К счастью, индустрия веб-разработки справляется с этой задачей.
Эффективным решением этой проблемы является создание значка, независимого от разрешения, что может быть достигнуто путем создания пользовательского шрифта значка и встраивания его с помощью CSS @font-face.
Iconmoon просто упрощает процесс создания и отображения иконочного шрифта. Вы сможете выбирать из библиотеки значков с возможностью загрузки своего значка. Оттуда вы можете создать свой собственный шрифт значка и загрузить пакет, который включает шрифт и соответствующий CSS. Когда дело доходит до создания значков, не зависящих от разрешения, Iconmoon является важным инструментом.
08 Форсайт.js
Различные устройства имеют разные способы отображения растровых изображений, но как дизайнер вы должны помнить, что загрузка изображений с высоким разрешением может увеличить вес страницы. Обнаружение Foresight.js позволяет обнаруживать отображение и подключение устройства, чтобы определить, следует ли загружать компоненты высокого разрешения или нет.
09 Детектор
Обнаружение устройств и профилирование могут быть сложными временами, поскольку библиотекой устройств трудно управлять. Поскольку обнаружение функций зависит от обнаружения на стороне клиента, поэтому зависимость только от него может привести к некоторым ограничениям гибкости при предоставлении функций на широкий спектр устройств.
Это привело к созданию детектора Дейвом Олсеном с использованием сценария PHP и браузера на основе Javascript, а также множества библиотек обнаружения функций. Библиотека пользователей Modernizr и обнаружение пользовательского агента для определения классов устройств. Detector может самостоятельно адаптироваться к новым устройствам и браузерам без необходимости извлечения информации из центральной базы данных браузера.
10 Enquire.js
Каждый дизайнер знает важность использования медиа-запросов в CSS. Что тогда происходит, когда вы хотите изменить некоторые переживания в определенный момент? Это может быть легко выполнено скриптом Enquire.js.
Сценарий Enquire.js использует matchmedia для условного выполнения некоторых функций и загрузки некоторого сценария при соблюдении определенных условий. При этом вы можете ожидать лучшего пользовательского опыта и простоты от пользователей.
11 Социальный счет
Загрузка виджетов социальных сетей, таких как Facebook, Twitter и Google, требует 19 виджетов HTTP-запросов и добавляет дополнительные 246,7 КБ к весу страниц, что часто увеличивает время загрузки веб-страниц и потребляет больше пропускной способности.
Зак Лезерман решил эту проблему, создав легкое решение под названием social count. Это небольшой скрипт, который лениво загружает социальные виджеты, чтобы пользователи вообще не подвергались наказанию.
12 FitVids
Некоторые медиа-объекты, включая видео, отличаются от изображений тем, что они не сохраняют часть своего соотношения сторон после изменения размера. Это создает проблему масштабирования при просмотре видео с множества различных веб-устройств.< br/> Крису и другому дизайнеру удалось разработать плагин под названием FitVids.js. Плагин может определять и использовать правильное соотношение видео или любого другого медиа-объекты при изменении размера. Благодаря этому вы можете получить правильный коэффициент изменения размера при изменении размера вашего видео и, как результат, получить точно отображаемые медиа-объекты, включая видео, в ваших приложениях.
13 оптимизированных для IE мобильных CSS
Каждый дизайнер знает, насколько важны медиа-запросы, но дело в том, что Internet Explorer не поддерживает медиа-запросы. В то же время, как дизайнер, вы не можете отказаться от медиазапроса только потому, что хотите поддерживать старый IE. Эту проблему можно легко решить с помощью Sass. Sass поможет нам создать стили, ориентированные на мобильные устройства, и в то же время предоставить соответствующие стили рабочего стола для старой версии IE.
14 рабочих мест.
Как дизайнер, если вы поищите в Интернете инструменты для тестирования области просмотра, вы найдете множество инструментов для тестирования области просмотра. Но проблема в том, что большинство инструментов тестирования области просмотра полагаются на популярные ширины устройств, такие как 320, 768, 1024 и так далее.
Я классифицирую и выявляю общие диапазоны (маленькое, среднее, большое и т. д.), просто чтобы убедиться, что вы выявляете общий спектр разрешения.
15 пропорциональных медиазапросов
Некоторые дизайнеры все еще используют значения пикселей для установки точек останова, в то время как мы использовали ширину, размер и единицы шрифта относительно точки зрения различных устройств. Хороший учебник был предоставлен Лайзой Гарднер, который объясняет, как мы можем использовать относительные единицы для точек останова, чтобы улучшить взаимодействие с пользователем.
16 MQTest.io
Как дизайнеру иногда может быть сложно отслеживать медиа-запросы, которые поддерживает конкретный браузер. Это легко решить с помощью MQTest.io, разработанного Вильями Салминеном. Инструмент поможет вам распознавать и анализировать различные медиа-запросы, на которые отвечает тот или иной веб-браузер. При этом вы также можете использовать медиа-запросы, которые обычно не используются.
17 Букмарклет Sparkbox media query
Sparkbox — это букмарклет медиа-запросов, который помогает определять запросы для текущих или используемых медиа-файлов. Для дизайнеров крайне важно иметь доступ к размерам экрана, так как это экономит время, а также помогает в определении пропорциональных медиа-запросов.
18 BrowserStack
Как дизайнер, мы знаем, насколько дорогим, сложным и даже пугающим может быть тестирование в репрезентативном стеке браузеров и устройств. Это легко решается, когда мы используем BrowserStack.
Стек браузера обеспечивает удаленный доступ к нескольким устройствам и средам, что позволяет вам выполнять некоторые проверки качества. BrowserStack настолько же впечатляет, насколько и эффективен при тестировании на старых версиях Internet Explorer.
19 Мобитест
Производительность является одним из наиболее важных аспектов веб-дизайна. С Mobitest вы сможете увидеть, как работают ваши проекты, с помощью некоторого анализа.
При тестировании вашего дизайна на Mobitest вам нужно только ввести веб-адрес, после чего инструмент отобразит сайт на реальном устройстве, и в то же время выдаст вам много статистики производительности, так как вы также сможете узнать нагрузку время и средний размер страницы вместе с другими статистическими данными.
20 Проверка Adobe Edge
Важность тестирования на реальном устройстве не может быть переоценена для веб-дизайнера, так как вам нужно увидеть и проанализировать, какую производительность ваш дизайн принесет пользователю до публикации. Adobe Edge Inspect сделал тестирование на реальном устройстве очень простым и понятным, поскольку у вас есть инструмент, который автоматически обновляет все подключенные устройства. Вы также можете тестировать код на широком спектре устройств.
21 Кодепен Про
CodePen — это инструмент, который помогает быстро продемонстрировать адаптивные шаблоны и методы. Это инструмент, который также помогает выполнять наши проекты на разных устройствах и компьютерах, продолжая печатать.
CodePen — это мощный инструмент, который помогает вам видеть результаты вашего кода на нескольких устройствах и компьютерах по мере его ввода.
Вывод
Все упомянутые выше 21 инструмент хороши для адаптивного веб-дизайна. Но каждый из инструментов имеет разный функционал, лично у меня нет каких-то предпочтений, так как все инструменты эффективны, хоть и с разным интерфейсом и функциональностью. Выбор за вами.