Прошло много времени с тех пор, как я в последний раз обсуждал адаптивный веб-дизайн (RWD). Моя первая статья на эту тему датируется 15 января 2013 года и была первой из длинной серии . Во время серии я определил основные характеристики RWD. Макеты жидкостей и сеток, шрифты, изображения и как начать внедрять адаптивный подход на реальных примерах. Я предлагаю вам взглянуть на эти статьи, чтобы освежить вашу память, прежде чем продолжить с этой. В этой статье будет подробно рассмотрен один аспект RWD, переосмысление значков и логотипов, а также подход к их дизайну.
Новый вызов
То, как мы работаем в Интернете, быстро изменилось. За последние несколько лет его преобразование из настольного компьютера в мобильное привело к тому, что разработчикам и дизайнерам приходилось постоянно идти в ногу со временем и соответствовать новым требованиям.
Количество устройств, которые используют пользователи, увеличилось в геометрической прогрессии, что, в свою очередь, увеличило разнообразие спецификаций браузера и разрешений экрана, которые мы должны учитывать.
Компания RWD помогла нам, предоставив разработчикам мобильных устройств метод, позволяющий прагматично и эффективно приспосабливаться к огромному и постоянно растущему разнообразию экранов и устройств. Как вы, возможно, знаете, этот подход учитывает такие важные факторы, как поведение пользователя, размер экрана и операционная система. Адаптивный дизайн должен автоматически и оптимально реагировать на предпочтения пользователя, независимо от его экрана или программного обеспечения.
Распространенное упрощение RWD состоит в том, чтобы определять его как не более чем дизайн, который учитывает размер экрана и автоматически вносит изменения в контент.
Это намного больше, чем это. Это подход, который учитывает многие другие аспекты дизайна и методологии. Адаптивный дизайн — это контекст, просто адаптации контента на странице недостаточно. Те же контекстуальные принципы должны применяться к деталям дизайна, таким как значки и логотипы, для создания полной адаптивной системы.
Логотипы и значки — это элементы страницы, важность которых нельзя недооценивать. Они способны передавать прямое сообщение в небольшом пространстве, они выходят за рамки текста и языка и преуспевают в общении с большой аудиторией. Вот почему важно, чтобы они развивались и менялись со временем, прогрессивно с технологиями и тенденциями дизайна.
Идеальная иконка для вашего дизайна должна отлично смотреться в разных размерах. Это означает, что вы должны сначала подумать о его качестве и быть уверенным, что он масштабируемый и, прежде всего, разборчивый. Имея множество доступных устройств, мы больше не можем полностью контролировать внешний вид значков. Фактически, каждое устройство имеет свой размер экрана и разрешение, и разработка иконки, которая будет хорошо подходить для всех этих задач, может быть проблемой, особенно если она масштабируется до очень маленького размера. Фактически, в этом случае он может потерять как свое влияние, так и разборчивость.
Есть несколько решений, чтобы попытаться решить эту проблему.
Давайте узнаем их.
Иконочные шрифты
Иконки шрифты потрясающие.
Крис Койер говорит .
Иконочные шрифты — это техника использования веб-шрифтов для отображения символов. Крис Койер и Стивен Брэдли составили список причин, почему они считают их такими удивительными. В частности, иконки шрифтов:
- Масштабирование, изменение цвета и включение теней легко
- Может иметь прозрачные нокауты
- Вообще есть хорошая поддержка браузера
- Может использовать текстовые CSS (все еще нуждается в лучшей поддержке)
- Может быть разработан на лету (внося изменения
:hover - Можно сделать все, что угодно, значки изображений (изменить непрозрачность, повернуть и т. Д.)
- Файлы меньшего размера, так как они содержат меньше символов, чем полные шрифты
В своей статье Стивен Брэдли указывает на некоторые (не все соответствующие) недостатки, которые приводят нас к выводу, что это решение, вероятно, не подходит для всех сценариев. Однако основные проблемы не так уж и плохи, и мы должны рассматривать шрифты значков как правильную альтернативу для наших целей.
CSS для отображения иконок
Второе решение — использовать только CSS для отображения значков. При таком выборе значки будут отображаться без пикселизации. Проблема с этой техникой заключается в том, что стиль значков ограничен тем, что может быть создано в коде, и это может раздражать для обновления.
Отзывчивое решение
Следствием обеих этих альтернатив является чувство ограничения для дизайнеров, которое часто влияет на стиль иконки (например, цвет или уровень детализации). Наилучшим решением представляется сочетание принципов RWD с потенциалом иконографии. В результате этого выбора мы смогли найти баланс между простотой и размером экрана устройства. Можете ли вы представить, изменилась ли точность иконки пропорционально ширине экрана используемого устройства? Или, если бы тот же значок мог реагировать и приспосабливаться к размеру этого устройства?
Если вы хотите получить представление о том, как может отображаться адаптивный значок в зависимости от изменения устройства, посмотрите на respiveicons.co.uk . Создавая значки в формате изображения SVG (масштабируемая векторная графика) и используя медиа-запросы, можно отображать разные значки на экранах разных размеров без потери качества. Результатом является динамически изменяющийся отзывчивый значок, идеально оптимизированный для размера и контекста, в котором он отображается.
Среди профессионалов значки более удобочитаемы при небольших размерах, при этом они не подвергаются минимальному стилю при отображении в большем размере. В зависимости от размера экрана могут отображаться различные детали, и это особенно полезно для проблемы, упомянутой ранее, существования большого диапазона размеров экрана. Более того, гибкая природа адаптивных значков означает, что значки уже оптимизированы для новых устройств.
Однако в то же время есть некоторые недостатки, которые следует учитывать. Во-первых, адаптивные иконки займут больше времени в дизайне. Вы, вероятно, в конечном итоге выберете что-то доступное вместо создания иконок самостоятельно. Если вы этого не сделаете, их создание займет дополнительное время.
Вторая проблема — это признание и пользовательский опыт. Необходимо время, чтобы пользователи привыкли к определенным значкам на разных устройствах определенного бренда. Если вы добились успеха в этом, проблема исчезнет с течением времени. Смена значков может привлечь внимание ваших клиентов и даже привлечь больше заинтересованных пользователей.
Выводы
RWD не все о контексте. Значки и логотипы должны считаться такими же важными, как изображения, текст и совместимость. По этой причине разработчикам следует изучить новые методы, позволяющие веб-шрифтам подходить для различных дисплеев и устройств.
Создание гибких и масштабируемых решений, оптимизированных на сегодня и рассчитанных на завтра, может принести пользу не только пользователям, но и вашим продуктам и услугам.