Однако помимо удаления, можно добавить кое-что полезное. Например, Kilian Valkhof предложил интересное решение, касающееся ссылок. После печати ссылки теряют свою функциональность, однако в будущем у пользователя может возникнуть необходимость, перейти по ссылке, опубликованной в тексте. Следующий код вставляет после каждой ссылки значения её атрибута href.

1
2
3
4
5

a:after {
  content:" (" attr(href) ") ";
  font-size:90%;
  font-weight:bold
}

Результат выглядит следующим образом:

К сожалению это не сработает в IE ниже 7-го, т.к. эти браузеры не поддерживают псевдо-элемент :after.

Почему нужно располагать «сайдбар» справа

• Пользователи читают слева направо. Когда пользователь попадает на страницу, он проводит взгляд слева направо и сверху вниз. Расположите боковую панель справа и первое что увидит пользователь это основное содержимое.
• Пользователи до сих пор используют разрешение 800х600. При создании блога многие оптимизируют его под разрешение 1024х768. Однако, все еще есть достаточное количество людей, использующих мониторы с разрешением 800х600. У таких пользователей, в этом случае, появиться надоедливая горизонтальная полоса прокрутки. Но если основное содержимое находится слева, им не придеться пользоваться прокруткой чтобы прочитать его.

Почему нужно располагать «сайдбар» слева

• Пользователи читают слева направо. Если цель вашего блога это извлечение выгоды, то ваша реклама может быть наиболее приоритетной чем основной контент. Расположите боковую панель слева и посетители увидят ее первой.
• Глаза как правило фокусируются на центре страницы. Если основное содержимое находиться справа, заголовки статей располагаются ближе к центру страницы. В итоге пользователю легче сразу перейти к основному содержимому. Это больше всего подходит к блогам и сайтам с минимальным дизайном, которые не имеют других отвлекающих элементов на странице.
• Matt Harzewski в своей статье Right vs. Left Sidebar предлагает интересную идею как содержимое боковой панели может влиять на ее расположение.

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

Вывод:

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

Оригинал: Should a Sidebar Go On the Left or Right?

Что же можно сделать для того чтобы улучшить удобочитаемость и заставить пользователей читать.

Советы:

• Подчеркивайте ссылки. Пользователи ожидают видеть ссылки подчеркнутыми, поэтому не разочаровывайте их.
• Используйте подходящее расстояние между строками в параграфе. Легче всего это сделать увеличив line-height в 1.5 раза по сравнению с высотой шрифта.
• Четко отделяйте статью от остальных элементов страницы. Должно быть очевидно где статья начинается и где заканчивается. Боковая панель, комментарии, метаданные и т.д. должны быть визуально отделены от основного содержимого.
• Если вы используете цитаты, сделайте так, чтобы они были заметны. Если пользователь не обращает на них внимания, то они не имеют смысла.
• Пишите коротко. Если ваше сообщение содержит 50 слов, вероятно вы сможете сократить ее до 30, не потеряв смысла.
• Используйте утилиты и сервисы для подбора цвета текста и фона и выберите такую комбинацию при которой у людей с ухудшенным зрением не возникнет проблем.
• Используйте структурную иерархию на странице. Например Заглавие — Вступление — Заголовок — Текст — Подзаголовок — Текст и т.д. Это сделает поток содержимого более логичным.
• Воздержитесь от использования различных сносок или рекламы в середине поста. Это сбивает читателя с хода мысли.
• Когда вы используете курсивный или жирный текст, нет необходимости также менять цвет текста. Это может вызвать путаницу у читателя. Что это за элемент, не ссылка ли это?
• Используйте семантическую верстку. Н1, h2, h3 для заголовков, strong для жирного текста. Многие из ваших читателей буду читать вас в агрегаторе новостей, где ваш не сработает.
• Размещайте изображения в начале статьи. В большинстве случаев их цель вовлечь читателя в статью.
• Сплошной текст – это плохо. Ничто не отпугивает читателя больше чем «стена» из одного текста. Оживите его немного!
• Обычно лучше использовать левое выравнивание. В очень редких случаях центрирование или растягивание текста по ширине контейнера может выглядеть лучше.
• Обратите внимание на обтекание текста. в зависимости от того как текст обтекает изображение, вы возможно захотите перефразировать текст или изменить размер изображения для того чтобы эти элементы выглядели лучше.
• Заголовки и подзаголовки должны быть отделены. Одно из главных преимуществ использования заголовков в том что пользователь может быстро пробежать статью и понять о чем она. Это работает только когда заголовки явно обособлены. Поэтому чувствуйте себя свободными в использовании больших шрифтов, подчеркивании, цветов и всего чего необходимо применительно к заголовкам.
• Вы должны знать когда использовать упорядоченные списки, а когда неупорядоченные. Когда пункты располагаются в особенном порядке, пронумеруйте их.
• Делайте отступ у списков. Покажите что это нечто большее, чем просто параграфы.
• Если какое-то изображение является важной составляющей статьи (диаграмма или график), отцентрируйте его и добавьте отступы сверху и снизу. Это даст понять что изображение является важной частью, а не просто украшением.
• Помните что ваши статьи могут читать не только на экране компьютера. Добавьте специальные стили для печати документа, чтобы и на бумаге статьи выглядели также хорошо.
• Когда вы думаете какой использовать шрифт, выберите наиболее распространенный, который есть у всех.
• Если вы добавляете постскриптум к сообщению, сделайте его курсивным, это скажет о том, что это добавление к основному содержимому.
• У выделенных фрагментов в статье должен быть тот же размер текста, что и у основного. Изменение размера будет «разбивать» основной поток.
• НЕ ПИШИТЕ СОДЕРЖИМОЕ СТАТЬИ ТОЛЬКО ЗАГЛАВНЫМИ. Делая все буквы одного размера, вы уменьшаете разницу между ними. Это значительно снижает скорость чтения.
• Не применяйте SnapShots к ссылкам. Хотя эта функция может казаться эффектной первое время, она может быть причиной неудобства в дальнейшем. Всплывающее окно перекрывает несколько строк текста каждый раз когда вы наводите на ссылку.
• Делайте строки в разумных пределах (до 100 символов). Резиновые сайты часто растягивают содержимое по всей ширине на широких мониторах, делая читабельность намного хуже.
• Слишком много параграфов лучше чем слишком мало. Когды вы пишите на бумаге, параграфы как правило содержат 4 или 5 предложений. На веб страницах короткие параграфы, состоящие из 2-х или 3-х предложений, достаточно распространены, поскольку они четко передают основной смысл.
• Не делайте боковую панель слишком длинной. Чем быстрее пользователь просмотрит боковую панель, тем быстрее он перейдет к основному содержимому.
• Если вы используете нумерацию страниц (разделение статьи на несколько страниц), сделайте навигацию по страницам ясной и легкой в использовании. Также добавьте в начало статьи краткое содержание с быстрым доступом к отдельным блокам.
• Для информации которая должна быть, но незначительна (дата статьи, ее автор) лучше всего применять «слабый» серый текст. Серый текст не будет привлекать много внимания.
• Используйте тег acronym к акронимам, с которыми читатели возможно не знакомы. Используйте CSS для добавления к ним нижнего пунктирного подчеркивания (наиболее распространенный способ).

А что вы делаете для повышения удобочитаемости?

Источник: «30 Ways to Improve Readability»