Слева: текущая версия яндекс.почты, справа — чистенькая.

Делаем Яндекс.Почту немного приятнее

Быстрый CSS-фикс списка писем.

Andrew Vlasov
Published in
2 min readAug 23, 2013

--

Шапка письма

Честно говоря, мне многое не нравится в интерфейсе Яндекс.Почты. Даже главный блок — тело письма выглядит неряшливо и хаотично. Нужно все переделывать. Но эта статья о другом.

Список писем мельтешит перед глазами кучей мелких деталей.

— непрочитанные сообщения выделяются жирным текстом и синим кружочком;

— каждое сообщение содержит иконку «пометить как важное», хотя иконка с флажком говорит «пометить как спам».

— плюс время сообщения, иконка наличия вложений, иконка тематики вроде «скидки».

Можно немного почистить.

Сразу скажу, что способ для тех, кто владеет версткой и знает CSS. Для изменения стилей Яндекс.Почты (да и любого другого сайта) я использую расширение My-Style для хрома и сафари. На нужном вам сайте нажимаете Ctrl+M и в появившемся поле вводите нужные стили.

Ниже я буду писать изменения, а в комментарии к ним — код CSS.

  1. Спрячем этот самопальный скролл, слишком много вертикальных линий. И добавим внутреннюю тень для всего списка.
  2. Спрячем флажок, так как он не несет информационной нагрузки. Но будем показывать его при наведении.
  3. Сделаем полупрозрачным синий кружок. И так же будем показывать его при наведении на письмо.
  4. И уберем жирное выделение начала текста письма.

Все.

--

--

Andrew Vlasov
UI in Russian

12+ years of UX/UI design, webdev & product. Chief ICO Officer at SBC, CEO at COINS.expert, Cofounder & Head of Design at Galactikka social network