50 фантастических инструментов для адаптивного веб-дизайна

Автор: Monica Porter
Дата создания: 17 Март 2021
Дата обновления: 17 Май 2024
Anonim
Веб-дизайн сайта: что делать после 1-ого экрана?
Видео: Веб-дизайн сайта: что делать после 1-ого экрана?

Содержание

Как представил / придумал Итан Маркотт как в своей статье «Адаптивный веб-дизайн», так и в его бестселлере, чтобы сделать сайт адаптивным, нужны три элемента:

  1. Гибкая / плавная сетка
  2. Адаптивные изображения
  3. Медиа-запросы

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

Инструменты для начала

Прежде чем вы начнете создавать свой сайт, лучше всего набросать, как элементы на странице будут адаптироваться к разным размерам браузера различных устройств, на которых они будут просматриваться, и избежать разрыва связи, который часто возникает из-за того, что думают в первую очередь о дизайн рабочего стола и остальные адаптивные итерации - как запоздалая мысль (см., в частности, комментарий Стефани (Салливан) Рьюис).

01. Таблицы для набросков адаптивного веб-дизайна

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


02. Скетчбук с адаптивным дизайном

Если вы предпочитаете хранить все свои наброски в одном месте, то можете рассмотреть эту книгу из 50 адаптивных эскизных листов от компании App Sketchbook.

03. Адаптивные каркасы

Одна из трудностей создания адаптивных веб-сайтов заключается в использовании каркасов, чтобы показать, как будет работать адаптивный дизайн. Джеймс Меллерс из Adobe собрал этот экспериментальный инструмент, чтобы показать, как может работать адаптивная каркасная модель сложных макетов.


04. Шаблоны макета для нескольких устройств

При планировании адаптивного дизайна полезно увидеть, как другие люди подошли к нему до вас, поэтому «Шаблоны макета для нескольких устройств» Люка Вроблевски, в которых перечислены популярные шаблоны со ссылками на примеры, является отличным местом для начала.

05. Стиль плитки

Плитки стиля Саманаты Уоррен предлагают новую технику дизайна в эпоху гибкости; это не макеты дизайна с фиксированной шириной, а образцы или мудборды, которые демонстрируют общий подход к дизайну, не вдаваясь в детали.

Инструменты для гибкой / плавной сетки

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


06. Золотая сетка

Джони Корпи, который также разработал Less Framework, недавно выпустил эту новую версию надежной сеточной системы для адаптивного дизайна. Система Golden Grid System, считающаяся «складывающейся», так как легко адаптируется от 16 до восьми или четырех столбцов, также имеет небольшой оверлей браузера, который предоставляет сетку на ваших страницах для тестирования.

07. Foldy960

Талантливые сотрудники Paravel, Inc. выпустили модифицированную сетку 960.gs, которую они используют в качестве основы для своих адаптивных проектов.

08. SimpleGrid

SimpleGrid, созданный Конором Мюрхедом, был построен с учетом быстроты реагирования, поэтому с ним легко приступить к работе с вашим проектом адаптивного веб-сайта.

09. CSS-сетка размером 1140 пикселей

Еще одна отличная адаптивная сеточная система - это CSS Grid размером 1140 пикселей от дизайнера Энди Тейлора из Мельбурна, который переходит от широкого разрешения рабочего стола к мобильному.

10. Колоночная сетка CSS.

Система сетки Columnal, созданная Pulp + Pixels, он же креативный директор Ник Горслайн, основана на системе сетки 1140 пикселей, но с некоторыми дополнительными преимуществами, такими как набор для дизайна с таблицами эскизов и шаблонами каркасов, а также стилями отладки CSS.

11. Семантическая сетка.

Предварительно обработанные расширения CSS, такие как Sass и LESS, становятся все более популярными, и система семантических сеток Тайлера Тейта использует их для максимального эффекта в этой системе сеток, которая утверждает, что не использует ненужных классов или элементов. Узнайте больше на coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Как и система семантических сеток, SUSY Oddbird создал систему сеток, в которой не используется дополнительная разметка или специальные классы, но SUSY нацелен только на пользователей Sass (и его расширения Compass).

13. Гридпак

Gridpak от Erskine Design - один из новейших генераторов адаптивных сеток. Он позволяет вам устанавливать столбцы и желоба на нескольких точках останова, а затем выводит файлы CSS, JavaScript и PNG, чтобы вся ваша команда работала с одной и той же отправной точки.

14. Сетка

В Gridset все еще присутствует легкая загадочность, поскольку на момент написания этой статьи он еще не был выпущен. Но инструмент от Mark Boulton Design обещает индивидуальные, не требующие предписания, сеточные системы и способ сохранять и управлять сетками в Интернете.

15. Лучшая сетка Photoshop для RWD.

Эллиот Джей Стокс предлагает отказаться от старого стандарта сетки де-факто 960 пикселей и вместо этого работать с базой 1000 пикселей, что упростит работу со всеми процентными вычислениями. Если вы согласны, он сделал PSD, чтобы вы начали работать с ним.

16. Жидкостные сетки

Если ваш дизайн является узкоспециализированным и вам нужно создать свою собственную сетку, вы можете сделать это с помощью калькулятора жидкой сетки, блестящего новичка, номинанта на премию .net Awards Гарри Робертса.

17. Адаптивный калькулятор

Еще один калькулятор пикселей в проценты, но этот от Стю Робсона идет на шаг дальше, чем другие, создавая для вас все правила CSS, то есть вы можете просто скопировать и вставить их в свои таблицы стилей.

Инструменты для адаптивных изображений (и текста)

Еще один важный компонент адаптивного веб-дизайна - плавные изображения. Хотя метод получения плавных изображений прост, оптимизация производительности и загрузки страниц для различных устройств кажется одной из самых больших проблем в адаптивном веб-дизайне. Вот несколько ресурсов для решения этой проблемы.

18. Адаптивные изображения

Filament Group разработала способ отправки изображения подходящего размера в зависимости от разрешения экрана. Этот эксперимент с изображениями, ориентированными на мобильные устройства, которые масштабируются быстро и ответственно, требует наличия двух изображений разного размера для ссылки.

19. Адаптивные изображения

Мэтт Уилкокс черпал вдохновение в инструменте «Адаптивные изображения» для создания адаптивных изображений, который использует PHP и немного JavaScript для передачи соответствующих изображений на устройство пользователя без дополнительной разметки.

20. Sencha.io Src (ранее Tinysrc)

Sencha предоставляет облачный сервис, который отправляет оптимизированные версии размещенных образов в соответствии с размером устройства, запрашивающего их. Чтобы узнать, как его использовать, см. Docs.sencha.com/io/src/.

21. FitText

Еще одна жемчужина от Paravel, Inc - FitText.js, подключаемый модуль jQuery, чтобы сделать заголовок веб-шрифта адаптивным к дизайну и устройству. Подробнее см. Trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Вдохновленный FitText и алгоритмом SlabType, slabText Брайана Макаллистера представляет собой подключаемый модуль jQuery, который выделяет полужирные блоки текста, размер которых изменяется в соответствии с заданной шириной.

Инструменты для медиа-запросов

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

23. Respond.js

Единственная проблема с адаптивным дизайном заключается в том, что браузеры, которые не могут читать медиа-запросы, остаются позади. Возможно, это не проблема для вашей целевой аудитории, но все же рекомендуется использовать пользователей старых браузеров. Respond.js от Скотта Джеля поддерживает только свойства min-width и max-width.

Для получения дополнительной информации см. Filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js.

CSS3-Mediaqueries.js, разработанный Воутером ван дер Граафом, позволяет более старым версиям IE и других браузеров эффективно тестировать и применять все виды медиа-запросов.

25. Adapt.js

Натан Смит, автор оригинальной системы сеток 960.gs, написал Adapt.js, скрипт, который определяет размеры браузера и обслуживает только необходимые таблицы стилей - например, медиа-запросы, но без медиа-запросов, то есть он работает и в старых браузерах.

26. Классификатор

Это обнаружение устройств, рассматриваемое с противоположной точки зрения - сценарий категоризр Бретта Янкорда предполагает, что устройства являются мобильными, если иное не определяется как настольные компьютеры или планшеты, что позволяет вам предоставлять ресурсы браузерам сочувственно.

Шаблоны адаптивного дизайна (и мобильные)

В духе эффективного адаптивного рабочего процесса шаблоны упрощают процесс переноса дизайна в браузер раньше, чем позже. Большинство этих шаблонов объединяют лучшие из упомянутых выше инструментов в один аккуратный пакет: гибкую сетку, дополненную сценариями, при реализации философии «сначала мобильные - вывод контента».

27. 320 и выше

320 and Up Энди Кларка - это шаблон для мобильных устройств, который интегрируется со многими другими современными инструментами веб-дизайна, такими как LESS и Bootstrap (см. №30). Это легкий и гибкий способ быстро запустить и запустить сайт. Также посмотрите наше интервью с Энди, в котором он рассказывает нам больше о новой версии.

28. Без сетки

Gridless - это шаблон HTML5 и CSS3, который может служить основой для вашего адаптивного дизайна с упором на типографику и встроенную кроссбраузерность.

29. Скелет

В отличие от двух предыдущих шаблонов, отправной точкой которых является наименьшее разрешение, комплект разработчика Skeleton, созданный Дэйвом Гамашем, основан на сеточной системе 960.gs и масштабируется до мобильных устройств. Skeleton также может похвастаться отличным стилевым фреймворком, на котором разработчики могут создавать стили.

30. Бутстрап

Bootstrap, созданный Twitter и теперь имеющий открытый исходный код, представляет собой платформу и серию компонентов для быстрого вывода сайта в сеть, а начиная со второй версии все его основные части работают без задержек.

Плагины, прокладки и полифиллы

Хотя современные браузеры и программное обеспечение, как правило, ориентированы на адаптивность, иногда нам приходится использовать дополнительные инструменты для обеспечения единообразия.

31. Адаптивный плагин

Мариос Люблински написал плагин WordPress, который обещает превратить любую текущую тему WP в адаптивную. Как это работает, я еще не знаю, так как на момент написания этой статьи он не был выпущен, но если он оправдает свои обещания, он должен быть очень полезным.

32. Свержение

Обработка переполнения контента хорошо работает в настольных браузерах, но старые мобильные браузеры обрабатывают ее непоследовательно. Полифил Overthrow от трудолюбивой Filament Group обеспечивает последовательную постепенную деградацию на всех устройствах, гарантируя, что все мобильные пользователи получат наилучшие возможности.

33. MediaTable

Плагин Marco Pegoraro jQuery, MediaTable, работает с Respond.js, чтобы помочь вам обойти проблему отображения больших таблиц данных на устройствах с маленьким экраном, создавая адаптивные столбцы и добавляя переключатель отображения / скрытия, где это необходимо.

«Тестирование, тестирование: 1-2-3 ...»

Еще один аспект адаптивного рабочего процесса - узнать ваши целевые устройства и разрешения, а затем протестировать их.

34. resizeMyBrowser

resizeMyBrowser, разработанный фронтенд-разработчиком Чен Луо, имеет несколько предустановленных размеров для окна вашего браузера, чтобы протестировать страницы с адаптивным дизайном или создать новый набор настроек, если вы не можете найти тот, который соответствует вашим потребностям.

35. responseivepx

Подобно resizeMyBrowser, responseivepx, созданный Реми Шарпом, загружает ваши страницы в окно, где вы можете проверить ширину и высоту, чтобы определить, насколько хорошо запускаются ваши медиа-запросы и где в дизайне находятся точки останова.

36. Тестирование адаптивного дизайна.

Невероятно полезный инструмент от дизайнера и разработчика Мэтта Керсли: просто введите URL-адрес своего адаптивного сайта в тестировании адаптивного дизайна, чтобы увидеть, как он отображается при различных размерах браузера.

37. Ответственный

Введите URL-адрес, и Responsinator покажет вам, как он отображается на многих распространенных размерах устройств - с безжалостной роботизированной эффективностью. За это отвечают Тама Пагсли и Энди Хови.

38. Отзывчивый.

Другой эмулятор устройства на странице, Responsive.is, позволяет вводить URL-адрес, а затем быстро изменять его размер между различными предустановками. Это сделано командой разработчиков будущего приложения Typecast.

39. Screenqueri.es

Еще один инструмент для измерения параметров браузера, но Screenqueri.es от Mandar Shirke отличается обширным набором предустановок для мобильных устройств и планшетов, а также сеткой и линейками, которые значительно упрощают точное измерение.

40. Аптус

Еще одно приложение для тестирования сайтов с несколькими заданными размерами, но Aptus является родным для Mac. Он доступен через Mac App Store, а будучи встроенным, предлагает дополнительные функции, такие как простые снимки экрана и автономную поддержку.

41. Букмарклет с адаптивным дизайном

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

42. Букмарклет для тестирования адаптивного дизайна

Этот букмарклет Бенджамина Кина позволяет вам больше настраивать, позволяя вам определять свои собственные размеры устройств, причем столько или меньше, сколько вам нужно. Когда он активирован, он показывает сайт во всех выбранных размерах рядом для удобства сравнения.

43. Скринфлай

Screenfly от QuirkTools позволяет тестировать сайт в различных разрешениях на компьютере, планшете, мобильном телефоне и телевидении. Тестирование настольных компьютеров в настоящее время ограничено Safari, в то время как планшеты и мобильные устройства имеют больше возможностей для устройств и браузеров. Телевидение ограничено Opera.

44. Индикатор медиа-запросов

Johan Brook предлагает способ на чистом CSS проверить, когда браузер инициировал медиа-запрос. Индикатор Media Query Indicator - еще один хороший инструмент для тестирования и игры с критическими моментами в дизайне.

45. Прокладка

Shim - один из инструментов, используемых при редизайне Boston Globe, олицетворения движения RWD, - это приложение Node.js, которое запускает веб-страницу на нескольких устройствах в одной сети Wi-Fi, что значительно упрощает тестирование кросс-устройств. .

46.

Если у вас нет сервера Node.js для запуска Shim, Скотт Джель сделал более простую версию под названием Drive-In, которая работает в основном так же, но с использованием PHP, Apache и файла .htaccess.

47. Адоб Тень

Adobe продолжает свое продвижение в веб-технологии с помощью этого инструмента удаленной отладки. Установите Shadow и расширение Chrome на Mac или Windows, а также клиент Shadow на Android или iPhone, и вы сможете обмениваться веб-страницами между множеством разных устройств.

48. Мобильный эмулятор Opera + удаленная отладка.

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

Дальнейшее вдохновение

Хотите узнать, как другие делают свой дизайн адаптивным?

49. MediaQueri.es

Если вы еще не видели этого, на сайте Mediaqueri.es постоянно растет число сайтов, которые перешли на адаптивную сторону.

50. @RWD

Итан Маркотт ведет учетную запись в Twitter, где публикуются последние новости, инструменты и демонстрации из мира RWD.

Дениз Джейкобс обожает быть спикером, автором, тренером по веб-дизайну и проповедником креативности, а Питер Гастон - автором Книги CSS3 и ветераном веб-разработчика, который ведет блог на Broken Links.

Понравилось это? Прочтите это!

  • Советы профессионалов по созданию мобильного сайта
  • Лучшие методы CSS и JavaScript
  • Как создать приложение
  • Лучшие бесплатные веб-шрифты для дизайнеров
  • Узнайте, что будет дальше с дополненной реальностью
  • Скачать текстуры бесплатно: высокое разрешение и готово к использованию.
Предыдущая статья

Что внутри Angular 8?
Следующая статья

2D-искусство на 3D-холсте поразит вас
Для вас
Учебное пособие по Adobe Fresco: создание портрета в приложении для рисования
Узнать

Учебное пособие по Adobe Fresco: создание портрета в приложении для рисования

Май 2024
В этом уроке Adobe Fre co я создам яркий и эмоциональный портрет, показывающий, как в приложении можно использовать различные техники и текстуры, чтобы оживить и реалистичнее ваше искусство. От грубог...
10 советов по моделированию твердых поверхностей
Узнать

10 советов по моделированию твердых поверхностей

Май 2024
Это изображение Великого Восточного парохода Брунеля, созданное в 1858 году, находится в постоянной экспозиции нового музея стоимостью 7 миллионов фунтов стерлингов в Бристоле, который распахнул свои ...
Что делать, если вы начинаете ненавидеть рисование
Узнать

Что делать, если вы начинаете ненавидеть рисование

Май 2024
Несмотря на впечатляющую художественную карьеру, длившуюся почти 15 лет, Том Фаулер возненавидел рисование. Так что же делать иллюстратору, когда его страсть к рисованию остывает? В случае с Томом он ...