Улучшаем юзабилити сайта (часть 2)

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

Прежде чем я начну, хочу вам сразу порекомендовать ознакомиться с первой частью статьи про юзабилити. Там есть много полезных советов про контент, веб-дизайн, навигацию и прочее. Если не читали, то не поленитесь это сделать. Так вы узнаете, что такое юзабилити и заодно проверите качество своего сайта. Уверен, это вам пойдет только на пользу!

Содержание статей

Итак, начнем с самого важного. А именно с улучшения качества статей. Как ни странно, но содержание статей играет очень важную роль как в улучшении контента, так и в повышении удобства пользования. Многие скажут: «На кой черт мне и моим посетителям сдалось это содержание? Все равно, человек, зайдя на сайт, не обращает на такую навигацию никакого внимания!» Да, в какой-то мере тут есть доля правды! Я и сам редко читаю оглавление поста. Однако, это не повод, чтобы его не использовать.

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

Якорные ссылки для улучшения юзабилити сайта

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

Так делать нельзя! Если вы ссылаетесь только на определенную часть статьи, то тогда ставьте якорную ссылку на эту часть, а не на всю запись целиком. Вопрос: «А где я якорные ссылки-то возьму?» А в этом вам поможет как-раз таки само содержание. Если оно у вас будет готово, то вам достаточно просто скопировать ссылки и вставить их в другие записи.

Так очень удобно как для посетителей, так и для вас самих. Человеку не нужно искать информацию. Вы его сразу будете направлять на нужную часть записи. Также вам самим не нужно лезть в исходный код и смотреть, какой якорь подставить. Достаточно просто зайти в статью и с оглавления скопировать нужную якорную ссылку. Быстро и удобно!

Создаем содержание статей для юзабилити сайта

Теперь ваш главный вопрос, это как можно создать содержание статьи. Тут в принципе, ничего сложного нет. Достаточно в нужных местах проставить якоря и сделать оформление. Вот как я это делаю. Когда пост готов, то все подзаголовки я выписываю в виде маркированного списка и ставлю прямо перед самым первым подзаголовком поста. Далее, в CMS (у меня WordPress) я перехожу с визуального редактора в html (1).

Содержание в виде маркированного списка

После этого текстовые списки обрамляю специальным кодом.

<b><a href="#1">мой текст</a></b>

Тег b это физическое выделение жирным. Все ссылки я у себя выделял жирным стилем, чтобы было заметнее. Однако сейчас я от этого отказался. Просто я решил ссылки в тексте сделать немного темнее чтобы их не нужно было постоянно выделять жирным. Жирные ссылки сильно бросаются в глаза. Поэтому я отказался от такого выделения и изменил цвет, чтобы смотрелось нормально. Если вы не хотите выделять жирным, то тег b или strong лучше не использовать в коде.

Конечно, можно попробовать делать жирные ссылки только в оглавлении. Но тут, главное, ваш цвет. Если по глазам не будет бить, то можно попробовать выделить жирным. Если же ссылки сильно стали выделяться, то лучше отказаться такого выделения. Итак, далее после тега b идет название якоря. Я его делаю в виде чисел, чтобы было удобнее. Ну и в конце нужно ставить закрытые теги a и b. В итоге, если смотреть визуально, то получается вот так, как на картинке.

html код на содержание статьи

Обратите внимание, что если нужно отобразить заголовки третьего уровня, то их следует оформлять так, как на картинке между двумя красными линиями. Также обратите внимание, что закрывающий тег </li> (2) лучше ставить в конце тега </ul>, а не после последнего заголовка второго уровня. Так у вас список будет смотреться компактнее. В общем, вот вам ниже примеры. В них я не буду уже включать тег b. Если вам нужно выделить жирным, то вы сами без труда подставите этот тег.

Пример маркированного списка с заголовками второго уровня:

<ul>
 <li><a href="#1">Заголовок 1</a></li>
 <li><a href="#2">Заголовок 2</a></li>
</ul>

Пример нумерованного списка с заголовками второго уровня:

<ol>
 <li><a href="#1">Заголовок 1</a></li>
 <li><a href="#2">Заголовок 2</a></li>
</ol>

Пример маркированного списка с заголовками второго и третьего уровней:

<ul>
 <li><a href="#1">Заголовок второго уровня</a></li>
 <li><a href="#2">Заголовок второго уровня</a>
<ul>
 <li><a href="#3">Заголовок третьего уровня</a></li>
 <li><a href="#4">Заголовок третьего уровня</a></li>
</ul>
</li>
 <li><a href="#5">Заголовок второго уровня</a></li>
 <li><a href="#6">Заголовок второго уровня</a></li>
</ul>

Почти так же будет выглядеть и нумерованный список. Просто вместо ul подставляем ol. Теперь вам нужно каждый якорь в содержании привязать к определенным заголовкам в самой статье. Чтобы было легче найти нужный код, я нажимаю Ctrl + F и в поисковой строке ввожу <h. После этого начинаю искать расположение подзаголовков. Их достаточно легко найти, так как браузер все ответы выделяет особым цветом. Так вы уже не запутаетесь.

Когда нахожу нужный подзаголовок, то вместо <h2> прописываю <h2 id=»1″>. К каждому подзаголовку прописываем свой идентификатор в виде числа. То есть для других заголовков <h2 id=»2″> и так по нарастающей. Если заголовок третьего уровня, то будет примерно так, <h3 id=»4″>. Получается вот так:

<h2 id="1">Название подзаголовка в самой статье</h2>

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

Все, теперь у вас готово содержание! Теперь осталось его только оформить. Советую всегда использовать оформление для выделения из общей массы текста. Так пользователь сможет обратить внимание на ваше оглавление. Вот пример плохого оглавления:

Пример плохого содержания статьи

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

А вот пример правильного и красивого содержания:

Пример хорошего и красивого содержания

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

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

Оформление неактивных и наведенных ссылок

Давайте разберемся, как сами ссылки влияют на удобство пользования вашим сайтом. Для начала я скажу, что все ссылки должны четко выделяться в тексте. Я свои ссылки раньше выделял жирным, но сейчас уже это не делаю. Просто если не использовать такое выделение, то ссылка будет мало заметна.

Цвет ссылки в юзабилити сайта

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

Цвет не наведенных (неактивных) ссылок старайтесь подгонять под главный цвет сайта. К примеру, у меня это синий цвет. У вас может быть зеленый или еще какой-нибудь. Только не делайте слишком темным цветом. Мне попадались некоторые темы, где все ссылки были черного цвета. Это неправильно! Такие ссылки будут практически незаметны в тексте.

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

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

Пример подчеркивания ссылок в статьях

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

Как оформить посещенную ссылку?

Итак, наведенная и неактивная ссылка должна отличаться по цвету. В итоге у нас имеется два разных цвета. Но это еще не все! Еще должен присутствовать и третий цвет — это цвет посещенной ссылки. Скажу вам серьезно, что если вы ни будете выделять посещенные ссылки, то вы угробите как минимум 50% юзабилити своего сайта. Это очень важный элемент для удобного использования. К сожалению, многие веб-мастера не придают этому большого значения. А зря!

Как оформить посещенные ссылки

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

Выделять посещенные ссылки рекомендую фиолетовым цветом. Это тоже уже закрепившийся стандарт цвета. Такие ссылки выделяйте в статьях и на страницах. Посещенные ссылки заголовков статей, рубрик или меток в анонсах постов, в меню или в боковых колонках можно не использовать. Главное, выделять ссылки в самих постах и на страницах.

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

Итак, как оформить посещенную ссылку другим цветом? Для этого заходим в стили и вставляем код перед классом, отвечающий за вывод обычных ссылок. Вот код:

нужный класс a:visited {
 color: #609;
}

От вас потребуется определить нужный класс и вписать его в код перед a:visited {. В большинстве тем он может быть разным. Чтобы было понятнее, рассмотрим на примере одной темы WordPress. Далеко ходить не будем и возьмем дефолтную Twenty Thirteen.

Так, тему я установил. Теперь мне нужно перейти на какую-нибудь статью и нажать F12. Браузер в том же окне мне покажет исходный код страницы. Я использую Google Chrome. Нажимаем на значок поиска (3) и наводим курсор на ссылку (4).

Исходный код на странице

Далее в исходном коде смотрим вкладку Styles (она правее находится).

Найти классы ссылок в исходном коде страницы

Там видно, что стиль ссылки привязан к классу:

  • .entry-content — оформление ссылок в самом посте;
  • .comment-content — оформление линков в комментариях.

Класс ссылки

Все, класс узнали. Теперь заходим в стили (файл style.css) и ищем этот класс. Для удобного поиска не забываем про Ctrl + F. На рисунке выше видно два класса со стилями, отвечающие за оформление ссылки. Один для неактивной (5), другой для наведенной ссылки (6). Вот между ними вставляем такой код:

.entry-content a:visited,
.comment-content a:visited {
 color: #609;
}

Получится так:

Создать посещенную ссылку для повышения юзабилити сайта

Тут видно, что вставлено два нужных класса. Все, теперь посещенные ссылки будут выделяться в тексте статей и комментариев.

Создаем активные ссылки

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

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

Теперь вопрос: «Как оформить активную ссылку?» Тут практически все то же самое, как и в случае с посещенными ссылками. Только в этом случае вместо псевдокласса visited нужно прописать active и задать нужный код цвета. Если брать предыдущий пример с темой Twenty Thirteen, то по идее, к необходимым стилям вам дополнительно нужно вставить вот такой код:

.entry-content a:active,
.comment-content a:active {
 color: #ffff00;
}

Однако этот код почему-то не хочет работать не только в Twenty Thirteen, но и в моей теме с нужными классами. Не пойму, что тут не так. Если кто-то знает, как ссылку сделать активной, то подскажите в комментариях. Ну а так, придется мне пока без активных ссылок сидеть. Впрочем, это не слишком большой минус. Его влияние на улучшение юзабилити сайта не слишком большое. Главное, что заданы другие состояния линков.

Оформление внешних ссылок

Оформление внешних ссылокКазалось бы, ну что еще нужно от этих ссылок. Мы уже и так почти оформили все 4 состояния линков. Что еще может остаться? Оказывается, что есть еще один очень важный момент! Это оформление внешних ссылок.

Скажу вам, что на сайте пользователь всегда должен видеть где внешняя, а где внутренняя ссылка. Многие веб-мастера при наведении любят полностью скрывать адрес контекстной ссылки. Хорошо если в таком случае установлен RDS-бар и на сайте используются noindex/nofollow. Тогда еще можно увидеть внешние линки.

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

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

Оформление внешних ссылок для юзабилити сайта

Тут видно, что в конце внешней ссылки используется специальная иконка в виде окошка и стрелки с направлением на северо-восток. Я тоже рекомендую вам использовать похожую иконку, так как по смыслу она наиболее подходящая. А вот цвет этого графического элемента лучше делать отличным от цвета неактивной ссылки. Если ссылка идет синего цвета, то иконку лучше сделать зеленой. Так иконка не будет сливаться с основной ссылкой.

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

Оформить внешние ссылки на сайте можно разными способами. Я тут расписывать не буду, так как материала очень много. Скажу, что сам я использую плагин WP Fontallic EasyPromoWeb со шрифтами от Font Awesome. Там также есть еще два дополнительных набора иконочных шрифтов. Так что выбрать есть что. Можно, конечно, и кодом вывести, но мне плагином удобнее. Ничего не слетает и все сразу видно в редакторе. Можете тоже его попробовать.

Иконочные шрифты от Font Awesome

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

Направления пользователя

Направление пользователя для юзабилити сайта и блогаТут я имею в виду как вы направляете пользователей, которые кликают на ваши ссылки. Тут тоже «зарыта собака» которая может откусить хороший % от вашего юзабилити. Давайте сначала начнем с внутренних переходов. Мы всегда в своих записях ставим контекстные ссылки на другие посты. Однако почему-то многие забывают использовать функцию открытия ссылки в новой вкладке.

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

Еще иногда некоторые веб-мастера при переходе по внешней ссылке любят использовать специальные редиректы. Причем пользователя не сразу перекидывает на чужой сайт, а сначала показывает ему какую-то запись c таймером обратного отсчета. Не хило, правда ли! Когда отсчет закончится, то происходит либо переход, либо «песец«. Просто бывает так, что может не перекинуть на нужный сайт и выдать либо ошибку, либо главную страницу предыдущего сайта. Мне лично такое уже пару раз попадалось.

В общем, во внешних ссылках на другие рекомендуемые ресурсы не используйте редиректы. Особенно с таймерами и непонятными английскими надписями. Или неужто вы хотите своего пользователя довести до полного инфаркта? Помните, у вас на сайте должна царить хорошая атмосфера и удобство. А как вы знаете, юзабилити — это и есть удобство.

Теперь давайте переключимся на сквозные ссылки и линки в анонсах постов. Если это внутренние ссылки, то они должны открываться в старой вкладке. По сути сквозные ссылки (они расположены в меню и в боковых колонках) транслируются на всех страницах сайта. Поэтому нет смысла открывать их в новой вкладке. Человеку не нужна информация в старой вкладке, поэтому ее можно перекрыть новым материалом в этой же вкладке.

А если у вас будет постоянно открываться все в новой вкладке, то это будет дико бесить пользователя, так как все старые и ненужные вкладки ему придется сразу же закрывать. Поэтому сквозные внутренние ссылки (кроме внешних) всегда открываем в старой вкладке. Такое же правило почти относится и к анонсам постов. Конечно, посты можно открывать и в новой вкладке, но это действие может раздражать постоянных пользователей.

Улучшаем юзабилити сайта и блога

Дело в том, что им не нужно оставаться на старой вкладке, чтобы просмотреть ваши предыдущие записи. Как правило, они уже просмотрены. Поэтому лишние вкладки тут ни к чему. Единственное, такой момент может пригодиться для новых читателей. Им не нужно уходить, так как на странице есть много непросмотренных анонсов. Также можно открывать в новой вкладке если на вашем сайте каждый день появляется много новых материалов. В таком случае постоянным читателям не помешает задержаться на странице с анонсами.

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

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

P.S. Сейчас многие веб-мастера настолько погружены в это SEO, что забывают о более важных задачах.

Zavitushka-dlya-sayta

 
rss-1Следить за новыми статьями на этом блоге!

 

Комментарии 51

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

    • Привет, Лариса! Я для этого использую плагин Featured Images in RSS w/ Size and Position. Он выводит картинки в анонсах постов, а также в настройках дает возможность выбрать размер картинки и ее расположение.
      Обязательно поставь себе! А то без картинок анонсы смотрятся убого.

      • Ооой пасииб! *give_rose*
        А я думала енто где то в фидбернере нужно настраивать, все хотела тебя спросить.
        Ага поищу сегодня об этом плагине что и как.

      • Сереж, этот плагин берется из админки? Просто в инете не нашла то, что нужно. Не совсем там понятно. А у меня и так выводятся картинки в анонсах… начинаю путаться…

        • Да, Лариса. Из админки. Сам плагин выводит анонсы только в rss ленте. На самом блоге он не делает. По поводу настроек там ничего сложного нет. В опциях тебе нужно выбрать только размер картинки (миниатюра, средняя или большая) и задать расположение. Правда, там все на английском, но можно перевести каким-нибудь переводчиком если вдруг станет что-то непонятно.

          А можешь сделать, как у меня. Заходишь в «Featured Images In RSS Feeds». В «Choose the featured image size to include in your RSS feeds.» выбираешь medium. В «Choose the positioning of the featured images in your RSS feeds.» ставишь на Image left text wraps.

      • Нашла, но нашла как вставить картинки без плагина. Буду пробовать на досуге. *wacko* *mosking*

        • А я решил плагином воспользоваться. Он очень легкий и содержит минимальное количество кода. Нагрузки тоже практически никакой нету. Поэтому что кодом, что этим плагином — одинаково. Поэтому решил плагинчик поставить. :-)

          • Сереж поставила, завтра посмотрю придет на почту анонс с картинкой иль нет )

          • Сереж спасиб за плагин, супер просто, тока картинка побольше была, чем в твоем анонсе. Но это я потом размер подправлю. Сереж, вот скажи, стоит ли мне установить поиск от яшки на сайт? Или от гугла лучше? Сижу всю утро и не могу решить нужен он мне или нет. Вроде как и нужен… или не нужен… *wacko* Сама себе проблемы создаю…

            • Поиск лучше поставить, так как стандартный поиск WordPress оставляет желать лучшего. Если у тебя нет проблем с индексацией от Яндекса, то ставь его поиск. Если же есть какие-то проблемы, то лучше поставить от Гугла.

              • у меня долго индексируются новые рецепты, только во время апов *cry* тогда от гугла лучше поставлю

                • В таком случае, да, лучше от Гугла поставить. Он как правило индексирует без проблем. Только, Лариса, не ставь рекламу на самой странице поиска. Некоторых за это банили.

  • Сергей, привет. Раскритиковал меня=))) Но, оглавление я нишу не для Юзабилити. Содержание в статье для меня, как оглавление в книге не больше, не меньше, так как если человек не прочитает первую главу, зачем ему читать последнюю. Для Юзабилити согласна с якорными ссылками отличный вариант. Про него уже давно знаю из статей Борисова. :-) У тебя вариант мне показался лучше. Вечером перечитаю ещё раз сейчас на работе=)

    • Привет, Ольга! Обязательно дорабатывай оглавления. Лишним не будет. И не забудь оформить его, а то пользователь может не заметить.

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

    • Да, Анна. У тебя тоже с подчеркиванием. Советую тебе сделать цвет неактивных ссылок синим. Ну а наведенные ссылки сделай красным. Также не забывай про посещенные линки. Это очень важно! Также содержание оформи в рамочку. Раньше по моему ты оглавление оформляла, а сейчас что-то перестала это делать. Разленилась, наверное. :-)

  • На самом деле у меня плагин стоит для вывода содержания)). Сначала оно было в рамочке, потом я убрала. Подумаю над тем, чтобы снова ее вернуть))

    • Обязательно вставляй в рамочку. :-) Так намного заметнее и красивее. А без рамки оглавление просто будет сливаться с основным текстом.

  • Интересный обзор, я так не делаю, потому что статьи маленькие(не люблю большие). А вот с якорями у меня вообще проблема. Как то пробовал их поставить и плагином и так, не идет зараза и все. *unknw*

    • Ничего страшного. Все приходит со временем. :-) Тем более у вас, Андрей, статьи небольшие и читаются на одном дыхании. :-) Так что содержание тут не понадобится. Его обычно используют в объемных статьях с несколькими подзаголовками.

  • Очень хорошая идея насчёт создания оглавления статей. Наверное, тут всё-же, главную роль играют анкоры, тем более, что они содержат и ключевые слова. Понимая всю полезность оглавления, у себя не использую. Честно говоря, даже не могу объяснить почему…
    Понравилась идея различать внешние исходящие от внутренних, надо будет подумать на этот счёт. А по поводу открытия ссылок в новых вкладках — я всегда удивляюсь почему некоторые это не используют…

    • Наверное, не знают, что так будет удобно для посетителей или скорее всего, так стараются понравиться поисковым системам. Так раньше многие сеошники любили делать. Специально не открывали в новой вкладке. Боялись, что человек будет сразу закрывать старые окна, тем самым ухудшая пф. В общем, глупые seo-заморочки! *mosking*

  • Привет Сергей!
    Пару месяцев назад я искал информацию о якорях в статьях и о содержании для себя и за одно появилась идея для новой своей статьи.
    Так вот, я перечитал более 20-и статей на эту тему. Тогда еще не было этой твоей, поэтому сейчас я очень растроился :(
    Твоя статья про якоря просто — ШЕДЕВР , я тебе даже завидую немного (ведь у меня тоже есть похожая) :)
    Сергей, расскажи мне пожалуйста, как ты делаешь такое красивое сожержание? Я имею ввиду рамку с картинкой. Сможешь раскрыть секрет? :)
    Наверно через CSS?

    • Привет, Игорь! :-)
      Оформление текста я делаю плагином Special Text Boxes. Там в нем можно даже свои стили задавать. Раньше пробовал без плагина, но красиво не получалось. Картинка с фоном криво отображалась. Поэтому пока плагином пользуюсь. Потом когда научусь, попробую придумать что-нибудь свое и без плагина.

  • Сереж привет! Пришла к тебе за советом. Задумалась я тут о микроразметке для рецептов. Но не знаю, с какого конца подступиться к этому. С одной стороны есть плагигны, порыскала по инету, но что-то даже страшно их ставить. Одни не русифицированы, а с другими могут быть проблемы. Если к примеру их отключить, то пишут, что и рецепты пропадают. ( А если поставить такой плагин, а он вдруг полетит и останусь я тогда без контента. ((
    С другой стороны я даже не знаю, как технически вписать микроразметку в код. Ищу-ищу, но к сожалению не понимаю ничего. А если микроразметку вставить в код, то смогу ли я и обычные тексты публиковать?
    Вообще говорили, что разметка типа не работает, но в последние дни я в поиске все чаще встречаю сайты с фотками в выдаче, значит стала работать. Вообщем, я не знаю как быть и что сделать. *unknw*

    • Лариса, я так с этой разметкой пока не заморачиваюсь. Конечно, ее неплохо бы поставить, но если ее не будет, то это не смертельно. Микроразметка позарез будет нужна только коммерческим сайтам. Там им нужно и телефоны показывать в выдаче, и маршрут проезда и все остальное. Для некоммерческих сайтов таких нет требований. :-)

      Я из-за этого не пробовал размечать. Поэтому как здесь лучше подойти, я тебе не подскажу. Если ты ее хочешь поставить, то попробуй разметить кодом, а не плагином. Говорят, вроде кодом не сложно. Там просто в определенных местах нужно теги проставить. В сети должна быть информация. Попробуй на YouTube еще поискать. Может там какие-то подходящие ролики найдутся.
      Попробуй пока без плагинов обойтись. Если не получится, то можешь поставить плагин. Не важно, что на английском. В сети можешь попробовать воспользоваться онлайн-переводчиком. Потом будет более менее понятно.

  • Да, насчет коммерческих сайтов я слышала. Для кулинарных это все же чуть другое. Так как даже я сама щелкаю в выдаче уже по тем рецептам, которые даже на второй странице но с картинкой.

    Спасиб Сереж, про ютуб я не подумала. )

    • Лариса, попробуй еще поспрашивать у блогеров кулинарных блогов. Посмотри в выдаче, какие блоги используют разметку и поспрашивай у них. Уверен, они тебе подскажут что да как. Только на сайтах не спрашивай, где много авторов. Там тебе никто не подскажет. :-(

  • Я вот на wp-kama видела классное содержание .по аналогии с кнопкой вверх. Хочется собраться и сообразить что-то подобное)

    • Ага, я тоже видел похожее с кнопкой наверх в конце каждого подзаголовка. Поначалу тоже хотел себе так сделать, но потом подумал — а нужна ли пользователю вообще, эта кнопка. Как правило возвращаются наверх только с конца страницы, а не с каких-то подзаголовков. Поэтому решил не ставить такую кнопку. А делается она почти по аналогии. :-)

      • Не, у него именно не кнопка, а содержание выводится =)
        Вот, пролистай статью, справа будет wp-kama.ru/id_5177/3-sposoba-sozdat-shablon-stranitsyi.html

        • Ага, теперь понятно! Согласен, хорошо сделано. *good* И глаза не мозолит, как при всплывающих окнах. Но я такое не умею пока делать. Я в таких углубленных технических вещах пока не бум-бум. *unknw*

          • Надо ползти у него выпытывать)) Ибо из кода вытягивать — не вежливо. Ну если только идею подглядеть
            Я о таком задумывалась еще до того, как у него появилось, но не знаю, как сделать,чтоб скрипт инфу захватывал))

            • Попробуй попросить у него написать статью на эту тему. Если человек не против, уверен, он обязательно напишет и поделится с остальными. :-) Может даже плагин выпустит. Это будет вообще, отлично. Я кстати, его плагин смайликов использую у себя на блоге. Очень хороший плагин.*good*

  • Решилась наконец заняться ссылками в тексте и забуксовала на a:visited. Такое впечатление, что мой шаблон не поддерживает выделение посещенных ссылок. При попытке прописать этот псевдокласс фиолетовым неактивные ссылки становятся фиолетовыми и не меняют цвет при наведении. Возможно, это как в твоем шаблоне не устанавливаются активные ссылки.

    • Сейчас глянул, у тебя в содержании все нормально, а в похожих статьях немного не так. Там идет уже другой класс:
      div.post-wrap.
      В общем, рядом с кодом:

      div.post-wrap a {
        text-decoration: underline;
        color: #186981;
      }

      тебе нужно вставить :

      div.post-wrap a:visited {
        text-decoration: underline;
        color: #609;
      }

      Попробуй пока так. Потом в статьях и в похожих записях появятся посещенные ссылки.

  • Вставила как ты написал и все ссылки стали фиолетовыми. Теперь при наведении они мигают тремя цветами)). В содержании все работает, потому что там отдельный плагин, где можно выбрать цвета ссылок. А в целом на шаблон a:visited не распространяется

    • Аня, сейчас у тебя теперь нормально все. Я смотрю, посещенные ссылки в тексте отмечаются фиолетовым. Непосещенные — синим, а наведенные — красным. Все нормально! При наведении у меня появляется только красный цвет. Не знаю, чего у тебя трицвета моргают при наведении. Наверное, с кэшем что-то. Попробуй зайти с другого браузера.

      • Возможно дело в браузере. В хроме все корректно отображается, а в мазиле три цвета в одном. Ну ок, оставлю так. Спасибо)))

        • Аня, это скорее всего кэш не очистился. Потому что к тебе сейчас с мозилы зашел и все нормально отображается, как в хроме. В общем, оставляй пока так, как есть. :-) Каких-то недочетов я у тебя не вижу. :-)

  • Сереж привет! Блиин, так хотела содержание сделать и сделала, но представляешь верхнее меню мне все загораживает ((( Обидно до слез

    • Да, Лариса. У тебя там плавающее меню. Смотрю, ты его немного изменила. Теперь оно стало двухуровневым. Попробуй его сделать покомпактнее. Все же желательно меню делать в одну строчку. Ну и посмотри в настройках темы. Может там можно отключить плавающее меню. Ну, чтобы при прокрутке эта менюшка скрывалась и не привязывалась к верхней области экрана. :-)

      • Да, оно 2 уровневое, по другому не получится, слишком уж обширна моя тематика, и так не знаю куда что пихать. Ну а настройки посмотрю, хотя вряд ли оно отключается. Я видела на одном сайте что-то подобное, просто шаблоны был из моей серии, если так можно сказать. )

        • Лариса, в настройках своей темы выбери «Header» —> «Дизайн и расположение» и убери галочку с опции «Фиксация при прокручивании». Тогда меню будет скрываться.
          А если захочешь оставить меню фиксированным, то якорь ставь не в самом подзаголовке, а перед последним абзацем, за которым идет этот подзаголовок. То есть переключаешь текстовый редактор в html-режим и перед нужным заголовком прописываешь так:

          Идентификатор тут ставишь свой.

1 2

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован. Обязательные поля помечены *