Pull to refresh

Favicon и заголовок окна

Typography *
imageВозможно, у вас вызовет сомнение тот факт, что иконка сайта и заголовок окна имеют какое-то отношение к веб-типографике, спешу вас заверить. Имеют! Как корешок книги к её обложке. Не буду лить воду и сформулирую правила оформления иконки и заголовка окна, созданые для повышения удобства при навигации по вкладкам.

Иконка


  1. Сайт должен иметь иконку, хоть чёрный квадрат, хоть кружок. Это необходимо для того чтобы пользователь мог отличить сайт в бесконечном ряду вкладок, в истории или в избранном.
  2. Иконка не обязана повторять логотип сайта, всё-таки 16×16. Тут важно сохранить «читаемость», чтобы иконка не превратилась в цветное пятно. Её задача состоит в визуальной идентифицикации сайта. Иконка может напоминать логотип или содержать фирменные цвета.
  3. Использование различных иконок для различного контента снижает различаемость, поэтому использовать разные иконки имеет смысл лишь в случае крайней необходимости.
  4. Иконку можно использовать как индикатор входящих сообщений или каких-либо изменений, с учётом сохранения различаемости. Например:

    При проигрывании медиаконтента желательно отображать иконку со значком проигрывания, чтобы пользователь знал «в каком ухе у него жужжит»! Но следует помнить, что при добавлении в избранное сохранится та иконка которая отображалась в момент добавления, поэтому следует использовать её там где происходит быстрое потребление информации (twitter, вконтакте, youtube и т.п.), на сайтах предназначеных для долгого сплошного чтения такая индикация может только отвлекать.
  5. Иконка должна быть статичной и не должна содержать анимации.
    Возможно вы подумаете, что небольшая анимация с задержкой в 5-10 секунд может быть полезна, но представьте себе ситуацию, когда у пользователя открыто несколько вкладок, допустим 5, даже при такой задержке, каждые 2 секунды будет проигрываться анимация одной из иконок! А это создаёт лишнюю работу глазам.


Заголовок окна


  1. Заголовок окна должен содержать текст близкий по содержанию к заголовку первого уровня (он должен быть один на странице). Т.е. он должен сообщать пользователю содержимое страницы.
  2. Заголовок должен быть кратким, не более 5 слов.
  3. Если в заголовоке отражается иерархия, то порядок должен быть от меньшего к большему, например:
    «Favicon — Типографика — Хабрахабр»
    Но не на оборот! Здесь важно помнить, что иконка идентифицирует ресурс, а заголовок — контент.
  4. Знаки препинания подчиняются правилам для обычных заголовков: точку опускаем, вопросительный и восклицательный знаки оставляем.

Резюме


Как видите правила очень просты и подчинены логике. А некоторые используются для поисковой оптимизации, так что вдвойне полезны. :)

Тонкости


Следует отметить, что Firefox, Safari и Opera (в IE не проверял) поразному понимают и интерпретируют слеш идущий перед адресом иконки, поэтому его (слеш) лучше опускать. Так же следует отметить, что Firefox кеширует иконки надолго, поэтому при смене иконки имеет смысл указать версию в имени файла.

В помощь


Для полноты материала добавлю ссылки на генераторы иконок
Tags:
Hubs:
Total votes 114: ↑105 and ↓9 +96
Views 6.7K
Comments Comments 58