Содержание
- Размер фона: 100%;
- Дизайн с текстом
- Шрифты как значки
- Масштабируемая векторная графика
- Различные приемы для разных сценариев
- Справляясь с будущим
Я видел будущее веб-сайтов и приложений в разрешении 300 пикселей на дюйм. На момент написания этой статьи только последние модели iPhone и iPad имеют эти дисплеи Retina, но они появляются так быстро, как производители компьютеров могут их сделать.
Поскольку мы исходили из истории создания разрешений 72ppi или 96ppi, эта проблема разрешения шизофрении будет сохраняться на долгие годы. В качестве средств правовой защиты давайте подумаем нестандартно о проблеме доставки адаптивных или гибких изображений, не беспокоясь о разрешении их посетителя.
Размер фона: 100%;
Один из способов - разместить изображения в качестве фона элементов HTML и установить размер фона: авто;. По мере расширения элемента контейнера увеличивается и изображение на заднем плане. Это скорее нишевое решение, подходящее для небольших площадей экранной недвижимости.
Ярким примером этого является стрелка на веб-сайте fittextjs.com, который также является отличным инструментом для разработки текста для адаптивных макетов.
Эта проблема все еще существует с целостностью изображения. Если изображение расширяется до пространства, намного большего, чем предполагалось, пикселизация и другие артефакты изображения становятся легко видимыми.
Дизайн с текстом
Один из способов создания адаптивных образов - использование обычных букв и цифр, которые мы используем для чтения и письма.
Возможность обмениваться информацией по всему миру - это одна из проблем, которые преодолевает Интернет. Еще одна проблема - люди из многих стран общаются друг с другом с помощью текста. Разные языки означают разные символы, и это означает гораздо больше, чем просто азбука.
Чтобы решить эту коммуникационную головоломку, нам нужен общий набор символов, которые мы можем извлечь, которые могут использоваться и поддерживаться различными операционными системами и приложениями.
Вот где на помощь приходит Unicode. Это отраслевой стандарт для настройки и отправки символов для многих языков. И это включает иконки.
Прекрасно сделанные значки в том, что они очень эффективны в общении: им не нужен перевод. Например, небольшая картинка, изображающая телефон, преодолевает множество языковых барьеров.
Чтобы использовать значки Unicode с HTML5, обязательно установите набор символов в элементе head:
meta charset = "utf-8">
Затем в элементе body вы можете просто скопировать и вставить Unicode прямо со справочной веб-страницы, например en.wikipedia.org/wiki/Unicode_symbols.
Чтобы пойти дальше, используйте создание содержимого CSS с закодированными символами Unicode как способ улучшения содержимого:
a [href ^ = "mailto:"]: перед {содержанием: " 2709"; }
Хотя символы Unicode - это один из подходов, вероятно, лучше всего использовать их в качестве дополнительного визуального элемента. Программы чтения с экрана - браузеры, считывающие содержимое веб-страниц для людей с ограниченными возможностями - вероятно, не смогут считывать символы Юникода.
Фактически, некоторые программы чтения с экрана читают этот символ как вопросительный знак. Итак, веб-дизайнер будьте в курсе.
Шрифты как значки
Используя Unicode в качестве значков, мы также можем настроить их внешний вид с помощью CSS. Но мы также можем пойти дальше и применить ту же мысль к шрифтам, которые содержат только значки, иногда называемые шрифтами дингбата.
Поскольку и значки Unicode, и дингбаты задаются с помощью текста, эти наглядные пособия можно расширять и сжимать с различными устройствами, установив высоту текста в ems или в процентах.
Основная проблема с использованием шрифтов дингбата заключается в том, что они по-прежнему представляют собой символы. Хотя визуально люди могут видеть значок, посетители сайта с программами чтения с экрана будут слышать случайные символы.
Чтобы обойти проблему, используйте создание содержимого CSS и атрибут данных для сохранения символа, как показано в pictos.cc/articles/using-icon-fonts/:
style> [data-icon]: перед {font-family: "icon-font"; content: attr (data-icon);} / style> a href = "http://example.com/cloud/save/" > span data-icon = "C" aria-hidden = "true"> / span> Сохранить в облаке / a>
Эта проблема создает дополнительные препятствия для программы чтения с экрана. Если они могут анализировать создание контента, они не смогут извлечь символ из attr () значение.
Эта серия обфускации не является идеальной техникой, но, похоже, на данный момент она работает. Во всяком случае, я надеюсь, что это заставит разработчиков программ чтения с экрана сделать лучший инструмент.
Масштабируемая векторная графика
Другой способ - работать с масштабируемой векторной графикой (SVG). SVG сделал большой скачок в поддержке браузеров. Фактически, все современные браузеры изначально поддерживают встроенные изображения SVG.
Если вы хотите создать графику SVG, имейте в виду, что популярные инструменты для работы с векторными изображениями, такие как Adobe Illustrator или Adobe Fireworks, уже позволяют экспортировать в этот формат.
Проблема с SVG не в формате изображения, а в более старых версиях IE. Начиная с версии IE9, Microsoft добавила поддержку SVG.
Есть несколько решений этой проблемы. Один из них - использовать сниффинг браузера (своего рода). В более старых версиях IE мы можем полагаться на изысканный блок условных комментариев, найденный в HTML5 Boilerplate, и использовать простой плагин jQuery под названием SVG Swap (см. Github.com/teleject/svg-swap). Таким образом, когда появляется более старая версия IE, ее место занимает замещающее изображение PNG-8, JPEG или GIF.
Другое решение - выполнить обнаружение функций. Если вы уже используете Modernizr на своем сайте, настройте Modernizr для проверки встроенного SVG и доставки полифилла через yepnope.
Различные приемы для разных сценариев
Наконец, не забываем про CSS3. Благодаря передовым свойствам, таким как изображение-маска, цвет заливки текста, цвет обводки текста и другие, мы постоянно добираемся до места, где Photoshop находится в браузере, ожидая визуализации нашей графики вместе с остальной частью страницы. верстка и элементы дизайна.
Для вдохновения в этой области просмотрите заголовки Трента Уолтона в его сообщениях в блоге, например, под названием «In Flux».
Справляясь с будущим
Это несколько способов обойти необходимость в растровых изображениях и, следовательно, необходимость в нескольких версиях одного и того же изображения. Поддержка браузеров (хотя некоторые до сих пор используют префиксы поставщиков) приводит к отличному визуальному оформлению и, что более важно, позволяет сохранять несколько файлов с разными разрешениями устройств.
Это гибкое изображение для решения проблемы, которая в ближайшее время не исчезнет.
Изображение заголовка - Патрик Хоэсли.
