Два простых способа сделать пользователей счастливее

UX  /  Вёрстка  /  Производительность Design  /  UX+Usability  /  Performance  /  CSS  /  HTML  /  YarFullStack

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

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

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

Быстрая загрузка шрифтов

Безусловно, вам может пригодиться статья How We Load Web Fonts Progressively. Или, более фундаментальная A Comprehensive Guide to Font Loading Strategies. Но подождите тратить 15-30 минут вашего времени на увлекательное чтение! Я успел? :)

Давайте подумаем, в чём может быть цель загрузки шрифта?

  1. В вашей компании есть корпоративный стиль, брендбук, строгие рекомендации и использование особенных шрифтов. Тогда читайте статьи выше и переходите к следующему разделу.
  2. Вам сказали “этот шрифт такой клёвый, лишние 100КБ никто не заметит…”. Здесь ещё есть варианты на что-то повлиять. Читайте дальше.
  3. Вы выбираете какой шрифт использовать и у вас нет ярко выраженной антипатии к системным шрифтам (Segoe UI, Roboto,..). Тогда этот способ точно для вас.

Способ простой до невозможности. Что может быть быстрее загрузки шрифта, который не надо загружать? :) Я увидел этот способ в статье Using System UI Fonts In Web Design: A Quick Practical Guide как раз, когда я занимался CSS для YarFullStack. И он мне, конечно же, понравился. Справедливости ради стоит отметить, что Medium уже не использует этот подход. Так что решайте сами.

Как выглядит определение шрифтов для YarFullStack? Да очень просто:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Как это работает? Тоже просто. Если вы работаете на Mac OS X или iOS — у вас сработает один из первых двух вариантов. Для Windows [Phone] — третий и т.д. Естественно, если вы умудрились установить всевозможные шрифты на Android — тогда шрифт будет не совсем “родной”, но тоже симпатичный.

Плюсы понятные — грузится быстро, никаких “морганий”, никакого чтения статей на тему “а вот сейчас-то мы совсем хорошо загрузим шрифт”. Ещё немаловажный плюс — пользователь читает текст на сайте, набранный тем же шрифтом, что и остальной интерфейс. Думаю, это должно быть приятно большинству ваших пользователей. Да, вы можете тащиться от Open Sans или Noto, однако у людей разные вкусы и это прекрасно.

Какие минусы?

  1. Брэнд — если для вас действительно критичен какой-то особенный шрифт — большого выбора у вас нет.
  2. В разных системах сайт будет выглядеть немного по-разному. Однако, если вы не фанат попиксельного выравнивания табличек… Да и, будем честными, чаще всего в разных системах сайт и без этого будет выглядеть немного по-разному.
  3. Вероятно, в будущем вам может захотеться добавить шрифты в список. Правда, лично я это и минусом не считаю — с учётом частоты смены системных шрифтов и критичности этой задачи.

UPD Недавно прочитал, что GitHub использует такой же подход. Немного про это в заметке Новости для разработчиков сайтов. Теперь шрифты на YarFullStack определены так:

font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;

Загрузка картинок в зависимости от разрешения с помощью srcset

Если вкратце, этот способ позволяет не грузить на маленькие смартфончики ваши картинища, оптимизированные для Retina :)

Когда я писал статью Удобное представление таблиц и диаграмм, понадобилось добавить довольно большие анимированные гифки. Когда я подумал про тех, кто может читать эту статью с телефона и не на самом удачном тарифе или соединении…

В общем, я слышал раньше про srcset, но как-то не доводилось применять — картинки обычно использовал довольно мелкие, а тут, суммарно, 3МБ… Почитал пару статей: Responsive Images - The srcset and sizes Attributes и Responsive Images: If you’re just changing resolutions, use srcset.

Сделал:

<img src="/img/clear-off-the-table-small.gif" alt="clear-off-the-table.gif" style="overflow-x:hidden" srcset="/img/clear-off-the-table.gif 800w, /img/clear-off-the-table-small.gif 400w" sizes="(min-width: 1280px) 800px, (max-width: 1280px) and (min-width: 1024px) 600px, (max-width: 1024px) and (min-width: 800px) 520px, (max-width:800px) 90vw, 90vw">

Принцип работы такой: вы указываете отдельно набор картинок с шириной и на каких разрешениях какая ширина предпочтительнее. Браузер учитывает ваши пожелания (но может их немного оптимизировать, на своё усмотрение). В простых случаях sizes можно не указывать. Мне пригодилось, потому что на малых разрешениях дефолтные 100vw выглядели не очень хорошо.

В упрощённом варианте без sizes выглядит так:

<img src="one.png" srcset="two.png 2x, three.png 3x, four.png 4x">

По большому счёту, результатом я доволен. В IE не работает, но полифил прикручивать не стал из-за потенциальных проблем. Открытой остаётся более сложная тема — как, помимо ширины окна, определить, действительно ли нужна маленькая картинка.

Да, чуть не забыл, вроде в HTML 5.1 для <picture> тоже будет нормально работать srscset. Just FYI.

UPD

Наглядное пояснение принципов работы srcset и sizes.

Резюме

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

Например, я лично стараюсь держать себя в руках и, несмотря на многочисленные рекомендации, не добавлять КДПВ к статьям :)

Ещё в планах выбрать другой вариант обратной связи и отстрелить этот тормозной Disqus… Есть идеи? Может в соцсетях обсуждать? Пишите комментарии в этот тормозной Disqus или в Twitter :)

Обсудить в Twitter

UX  /  Вёрстка  /  Производительность Design  /  UX+Usability  /  Performance  /  CSS  /  HTML  /  YarFullStack