Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Система управления контентом
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
37
Битрикс24

Битрикс24

www.bitrix24.ru

28
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

11
Devicerra

Devicerra

devicerra.com

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Aword

Aword

Приложение для изучения английских слов

9
Eczo.bike

Eczo.bike

www.eczo.bike

9
GIFTD

GIFTD

giftd.tech

7
Flowlu

Flowlu

flowlu.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Серьёзно, не используйте иконочные шрифты

1 805 14 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Вашему вниманию предоставляется перевод статьи Тайлера Стика об необходимости перестать использовать иконочные шрифты. Последний день уходящего года - разве не лучшее время, чтобы навсегда забыть эту технологию как страшный сон?

Иконки везде. Эти “маленькие чудотворцы” (как их назвал Джон Хайкс) помогают нам увеличить интуитивность интерфейсов, которые мы проектируем и разрабатываем. Их популярность в веб-дизайне никогда не была выше, в частности, лаконичность и универсальность пиктограмм сделали их прекрасно подходящими для больших и маленьких дисплеев.

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

Таким образом, не удивительно, что иконочные шрифты обрели такую популярность.

Иконки, отображаемые через @font-face, подходили под любые разрешения экрана и настраивались всеми способами, которые мы ожидали от текста. Конечно, доставка иконок в шрифте было хаком, но это также было полезно, универсально, и даже немного весело.

Но теперь нам необходимо остановиться. Пора отправить иконочные шрифты на Небеса Хаков, где они смогут порезвиться с основанной на таблицах версткой, “пуленепробиваемыми закруглёнными углами” и Scalable Inman Flash Replacement.

Экранные читалки читают эту дрянь

b_56851da32a0b4.jpg

Большинство вспомогательных инструментов будут вслух зачитывать текст, вставленный с помощью CSS, и многие символы иконочных шрифтов - не исключение. В лучшем случае, ваш значок “избранное” будет произнесён как “чёрная любимая звезда”. В худшем, будет прочитано как “непроизносимо”, либо вовсе пропущено.

Они ночной кошмар, если ты дислексик

b_56851db26dbb4.jpg

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

Они конфликтуют с Emoji

b_56851de30ea94.jpg

Большую часть времени мы полагаемся на автоматизированные системы, чтобы выбрать, какому юникод символу какой значек будет присвоен. Но в юникоде также живут Emoji. Если вы не будете осторожны, они могут перекрываться, хотя и иногда весёлыми способами. Мой любимый пример - баг “четыре звезды и лошадь”.

Совсем недавно на другом сайте были замечены иконки кулаков.

Они часто ломаются

b_56851df478841.jpg

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

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

Хуже того, многие пользователи так никогда и не увидят эти шрифты. Opera Mini, с сотнями миллионов пользователей по всему миру, которая конкурирует с iOS Safari в глобальной статистике, вовсе не поддерживает @font-face.

Они никогда не выглядят правильно

b_56851e03a9248.jpg

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

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

Вы, вероятно, делаете это неправильно

“Но автор,” – я уже слышу от вас – “вы совершенно проигнорировали пуленепробиваемые иконочные шрифты от Filament Group`s, поддерживающие резервные варианты для отображения иконок”.

И вы правы. Эти технологии великолепны! Если вы используете иконочные шрифты, вы должны придерживаться рекомендаций статьи.

Но вы, вероятно, не будете это делать.

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

Или, может быть, вы будете проектировать и поддерживать пользовательский иконочный шрифт, тщательно выбирая символы юникода, документируя и рекомендуя использовать ваши иконки. Потом, в один прекрасный день, Ваня забывает добавить резервную копию для иконки кнопки, которую он добавил (которая, кстати, смотрится прекрасно), которую затем использует Дима в Pull Request, и прежде чем вы об этом узнаете, ваше приложение станет наполнено разного рода хаками и проблемами при отображении.

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

Там всё лучше

SVG прекрасно подходит для иконок! Это формат векторных изображений с дополнительной возможностью поддержки CSS, JavaScript, многократного использования, доступности и многого другого. Он был создан для подобных вещей.

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

“SVG не могут быть объединены в спрайты”

Очень даже могут. Более того, существуют специальные инструменты, такие как svg-sprite или IcoMoon, которые могут автоматизировать этот процесс.

“SVG файлы много весят”

Обычно, когда я это слышу, команды сравнивают один бинарный иконочный шрифт с несколькими отдельными не сжатыми SVG файлами.Разрыв резко уменьшается, если вы оптимизируете ваши SVG файлы, объединяете в спрайты и активируете Gzip сжатие, либо внедряете в страницу.

Изредка я слышу, что разрыв всё равно становится большим, если подключены сотни иконок. Напрашивается вопрос: Зачем вы внедряете сотни иконок на каждой странице?

“Разметка иконок требует много кода“

Давайте сравним:

<!-- Typical @font-face icon: -->
<span class="icon icon-search" aria-hidden="true"></span>
 
<!-- Typical SVG icon: -->
<svg class="icon">
  <use xlink:href="path/to/icons.svg#search"/>
</svg>

Разметка SVG иконки немногим сложнее, однако взамен это понятнее и семантически правильнее, в отличии от какого-то пустого элемента с параметром aria-hidden.

“Браузерная поддержка SVG хуже, чем у шрифтов”

На момент написания статьи, поддержка SVG в мире превышает 96%... На 4% выше, чем аналогичная статистика распространения @font-face. К тому же, SVG более доступен и прямолинеен при ошибках.

“В фреймворке, который мы выбрали, уже используется иконочный шрифт”

А если фреймворк спрыгнет с крыши, вы тоже следом?

Не будьте “табличным парнем”

Я был в школе, когда веб-стандарты только получали распространение. В то время, когда большинство моих преподавателей ратовали за семантическую вёрстку, один из них не отказывался от табличной верстки. “Табличный парень” утверждал, что ни один инструмент не сравнится с версткой макетов с использованием <table>, что таблицы по своей сути лучше всего подходят для основанных на сетке дизайнов. Он хвастался, как он может легко и просто достичь “Святого Грааля” с использованием его любимых таблиц. В качестве одного из аргументов в свою пользу он приводил разнообразие кроссбраузерных несоответствий, что является проблемой и современного CSS.

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

Если вы не хотите перестать использовать иконочные шрифты ради людей с читалками экрана, людей с дислексией, людей с отсутствием поддержки @font-face в браузере, людей, у которых по какой-то причине не загрузился один из иконочных шрифтов, или дизайнеров, которые просто хотят видеть иконки на экране…

Тогда сделайте это для себя. Не будьте табличным парнем.

Оригинал статьи в блоге автора: http://blog.cloudfour.com/seriously-dont-use-icon-...

+1
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
ATOM-M CMS
Система управления контентом
Борис Лапин
"ради людей с читалками экрана, людей с дислексией, людей с отсутствием поддержки @font-face в браузере, людей, у которых по какой-то причине не загрузился один из иконочных шрифтов, или дизайнеров, которые просто хотят видеть иконки на экране…"

Давайте не использовать цвета - дальтоники не поймут;
Давайте передавать информацию не текстом, а рисунками - не все умеют читать;
Давайте выкинем мониторы - не все умеют видеть.

Почему большинство должно подстраиваться под меньшинство?
Ответить
ATOM-M CMS
Система управления контентом
Саша Данилов
А зачем терять аудиторию, когда существует достойная альтернатива? К тому же, в большом бизнесе это меньшинство может составлять довольно большую прибыль.
Ответить
ATOM-M CMS
Система управления контентом
Борис Лапин
если не в ущерб большинству, то пожалуйста.
Ответить
Perecel
автоматический отбор целевой аудитории (реклама в соц сетях)
Дмитрий Кубитский
технологии ради технологий? ОМГ, в каком мире я живу)
Ответить
Hoffman
"Изредка я слышу, что разрыв всё равно становится большим, если подключены сотни иконок. Напрашивается вопрос: Зачем вы внедряете сотни иконок на каждой странице?"

НАДО МНЕ, БЛИН
Ответить
ATOM-M CMS
Система управления контентом
Саша Данилов
Ну окей, окей, пусть сотни иконок) Но как бы то ни было, при современных скоростях интернета можно скачать на пару килобайт больше, чтобы взамен получить отсутствие проблем от шрифтовых иконок и фичи svg, в чем я согласен с автором
Ответить
Пора за дело!
Проект решающий проблемы начинающих бизнесменов
Юра Римский
В защиту табличной вёрстки. Я чего-то не встречал безкостыльных реализаций трёхколоночной вёрстки, когда высота крайних колонок должна быть равна высоте средней. А display: table прекрасно справляется без всяких css-шаманств.
Ответить
Вебинары
Сервис проведения вебинаров
Alexander Lashchevsky
Одно дело <div> со стилями display: table, что можно допустить, другое - использование тега <table>.
Ответить
Пора за дело!
Проект решающий проблемы начинающих бизнесменов
Юра Римский
Для браузера это одно и тоже - табличная вёрстка: он выводит <table> и display: table одним движком с одинаковой скоростью. По организации работы тоже самое - табличная вёрстка: вы просто вместо <table> и <td> пишите <div'ы>. Можно простой автозаменой перевести табличную вёрстку на якобы блочную.

display: table удобнее для организации адаптивности, его можно заменить при уменьшении экрана и по семантическим причинам.
Ответить
Дикий Лид
Агентство интернет маркетинга
Олег imarketer
Проще говоря используйте шрифты, которые используются в Яндексе. Чаще всего в интернете мы видим именно шрифты Яндекса, как самого популярного ресурса...
Ответить
ATOM-M CMS
Система управления контентом
Саша Данилов
Можно подробнее? Не заметил, чтобы использовались иконочные шрифты, только отдельные svg файлы и png спрайты
Ответить
ATOM-M CMS
Система управления контентом
Александр
Шрифты яндекса? что-то новое.
Ответить
Virink
CG Social Network
Roman Zaykovsky
"Большинство вспомогательных инструментов будут вслух зачитывать текст, вставленный с помощью CSS, и многие символы иконочных шрифтов - не исключение. В лучшем случае, ваш значок “избранное” будет произнесён как “чёрная любимая звезда”. В худшем, будет прочитано как “непроизносимо”, ЛИБО ВОВСЕ ПРОПУЩЕНО."
О ужас, иконка не озвучится...
Ответить
ATOM-M CMS
Система управления контентом
Саша Данилов
Да, тоже это показалось странным у автора, ведь ужас будет именно в том случае, если они именно будут прочитаны.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать