Обзор AlexNote.ru

Мое отрицательное отношение к так называемым «обзорам» блогов (так похожим на заказные из Блогуна) объясняется всего лишь одним фактом — они несут ничего полезного для автора. Никакой альтернативной точки зрения со стороны, ни мнений насчет удобства, никаких технических поправок, которые он упустил или, попросту, в которых не разбирается. Только посетители по ссылке.

Молюсь за то, чтобы мои аудиты (а это не последний) были бы чуть-чуть (на вот столечко) полезней.

---

Вот например, Записная книжка А из далекого С. AlexNote божится, что он гуманитарий. И это видно из хорошего слога текстов, креативных идей, отличного вкуса. Но вместе с тем, он явно лукавит — уровня его знаний хватает не только для того, чтобы перевести тему, но и реализовать собственную идею «пресс-центров». Причем с использованием только подручных средств. Русская смекалка, да.

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

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

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

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

• Аудит главной страницы →
• Аудит страницы поста →

Есть такие люди, работа которых видна сразу — у них есть свой стиль и бросающиеся в глаза характерные штрихи. NumberOne — как раз из таких, его дизайны я узнаю по приятному запаху. Так что многое из моей критики — достаточно субъективно, кроме того, списывается на обрастание темы всякими «фенечками» со временем.

Заголовочная часть HTML

Фавиконка иногда пропадает, рекомендуется использовать две конструкции вместо одной, кроме того, поместить ее в корневой каталог (чтобы она подцеплялась автоматически и сокращался код):

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

Как всегда много css (которые даже больше оригинального) и js-файлов.Кроме того, shCore.js и SyntaxHighlighter.css не используются — по крайней мере, в последних постах ты не используешь код (а если используешь, вставляешь его в <em>). cforms.css можно хоть немного сократить, убрав оттуда комментарии. Где используется calendar.css — я не увидел.

Странный shutter-reloaded не только подключает свой js и css, но и вставляет инлайновый javascript прямо в страницу — это необходимо пофиксить, убрав его в shutter-reloaded.js.

Заголовок

Для начала сама заголовочная картинка. Для меня немного странно, что она сделана вот так:

<h1><a href="http://www.alexnote.ru/" id="logo"><span>alex.note</span> Записная книжка А из далекого С<b></b></a></h1>

Смысла в использовании несемантичного <b> в такой клевой теме не вижу. К тому же, картинку можно было попросту повесить на <span>, избавившись от надписи с помощью text-indent.

Кроме того, сверху не хватает отступа, чтобы он был равен был нижнему.

Кнопка подписки на RSS, как я и указал, из-за подсветки выглядит слишком объемной по сравнению с элементами-"ленточками", которые использованы в оформлении. Но это уже вкусовщина.

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

На «Контактах и услугах» в таком случае можно оставить хорошее описание услуг, и добавить еще одну страницу — «Автор».

В навигации не выделена активная страница. К сожалению, косяк ВП, который я позже покажу, как исправить.

Лента

Вот здесь все отлично — и продолжение метафоры «ленточки»-"закладки", и шрифтовая работа. И даже немного нестандартно выглядящее разделение иконки обсуждения и ссылки на комментарии — отлично подыгрывает кнопке RSS наверху.

Основная проблема с катом и таксономией.

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

А вот насчет ката стоит задуматься. Во-первых, «читать далее» — нужен человеческий текст. Wordpress позволяет использовать расширенную версию <!--moreТут клевый текст ката-->, создавая каждой записи свой неповторимый тизер. К тому же, используется «, который — закрывающаяся «елочка», а не стрелка.

Чтобы такой кат правильно отдавался в фид, надо поправить немного движок.

В тегах и категориях текст отдается обрезанными анонсами — интересное решение, которое выгодно отделяет их от основной ленты.

Пагинация

Используется хорошая навигация по структуре категорий, меток и месяцев, так что расширенной пагинации не нужно.

Но, опять же, используется установленное по стандарту «&« Раньше» и «Позже &»». Желательно все-таки использовать стрелочки ← и → (&larr; и &rarr;), или хотя бы << и >> (&lt;&lt; и &gt;&gt;).

Футер

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

В копирайте можно написать проще — «Все права защищены». Остальное и так понятно.

Чтобы год подставлялся автоматически, используем PHP:

2008<?php if(date('Y')!='2008') echo "—".date('Y');?>

Копирайт, соответственно, вставляем с помощью сущности &copy;. В конце копирайта — точка (не после года, а именно в конце).

Сайдбар

У <h3> в качестве заголовках каждого блока сайдбара, на мой взгляд, слишком маленький размер шрифта. Чуть-чуть увеличить. Везде, кроме поиска — там хорошо, но кнопке не хватает темного фона.

Использование только прописных в заголовках — спорное решение. В «Я — вам» и «Вы — мне» не хватает нормального длинного тире &mdash;.

Расстояние между элементам списков в нижних блоках слишком большое, равное междустрочнику. Более привлекательно будет, если уменьшить. Хотя бы в пресс-центре. Кроме того, использовать xoxo микроформат.

У элементов списка же в навигации не хватает отступов слева, чтобы они отходили от подзаголовков «По рубрикам», «По меткам», «По месяцам».

Блок «последние посты» отображается и на главной, зачем-то дублируя основную ленту. Исправить можно, вставив подключение, только если !is_home(). В него почему-то попадают и страницы.

В блоке «последних комментариев» ссылкой должен выделяться комментарий (возможно, еще более сокращенный, или замененный на заголовок комментируемой надписи), т.к. ссылка на авторе сейчас ведет на комментарий. Логики в этом нет.

ЧПУ

Выбранный тобой метод формирования ссылок такой же, как у меня. Есть недостаток в его реализации с помощью Вордпресс. По идее в site.ru/wordpress/chto-to-tam/, если стереть до предыдущего слеша, мы попадаем в категорию — т.е. ссылка на категорию это site.ru/wordpress/. Однако движок в выводе ссылок на категории ставит site.ru/category/wordpress/, что неправильно.

Надо будет написать хак, как это исправить.

С ЧПУ пресс-центра промашка — сам центр alexnote.ru/press-center/, а человек — alexnote.ru/personal/press-iskariot/. Логичней было бы выдержать построение ссылок и сделать так: alexnote.ru/personal/ — центр, а alexnote.ru/personal/iskariot/ — человек. Ведь у тебя же сделано страницами? Просто наследуй конкретные от прессцентра. Использовать же ники или названия доменов вместо имени в ссылках — решение правильное.

Лента комментариев

На картинках этого нет, но «Статьи по теме» в посте отбить чуть-чуть сверху отступом, чтобы отделить от текста.

Бесполезные трекбеки без ссылок — или в <noindex> с nofollow, или убрать, потому как искать их приходится с помощью Яндекса.

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

Дата в комментариях также бесполезна без указания времени отправки комментария.

Возможно, выделить авторские комментарии — например, жирным начертанием имени автора.

Аватары. Из-за обтекания получается перенос уже на третьей строчке комментария, сбивающий линию чтения. Возможно, у текста комментария сделать отступ слева по линии аватары.

Нет разделителя между ссылками «ответить» и «цитировать» — пиксельхантинг и возможность промахнуться. Кроме этого, анкор в этих ссылках у тебя должен вести на #respond (именно эта id у формы).

Иконка подписки. Возможно, стоит отказаться от дефолтовой и обыграть оформление блога — скажем, серая ленточка с двумя хвостиками. Хотя, можно и не делать, если не получится сделать удачной метафоры подписки.

В форме комментариев проблема с невыровненными подписями.

Оформление постов

То «елочки», то машинописные, то английские кавычки. Вместо длинного, «русского» тире &mdash; используется короткое &ndash;.

HTML в оформлении постов используется по минимуму, а зря. Везде — одни <strong> и <em>. В примерах кода стоит использовать <code>, к тому же, это позволит не терять при отображении кавычек — в примерах HTML они должны быть обязательно машинописные.

Файлы можно заключать в <kbd>header.php</kbd>, а переменные и функции, упоминаемые в тексте — <var>$theme</var>. Все остальное — <code>кодом. Тогда, определив эти теги в css, можно будет раздельно менять начертание, гарнитуру и пр.

Также не хватает использование подзаголовков <h3> — например, в описании тем, можно разделить текст на несколько логических блоков — «Характеристики темы», «Описание», «Настройки», «Дополнительная информация» (на самом деле, «Необходимые исправления»). И стандартно раскрывать все темы именно так.

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

Можно, например, использовать иконки рядом с ссылками (для демо — иконка Вордпресс, для скачивания — стилизованный архив, дли оригинала — стандартная иконка «внешняя»). Их стоит оформить в стиле (использовав серый или красный цвет). Также их высота должна чуть превышать высоту строки, чтобы создавать отступ между строками. Примеры — как у меня на странице Хабраштуки и Ремиксы плагинов Wordpress, хотя размеры чуть поменьше нужны.

Про то, что кат «дальше» надо отбивать от этих ссылок, сказано выше.

Пресс-центр

Идея не то, чтобы не нова, но многие ходили вокруг темы социальной сети внутри блога. Буду свободен — подумаем над технической реализацией (совместной). Если никто не опередит.

Сейчас там люди разделяются тремя звездочками «***», как в книгах. В твоем простом дизайне лучше сделать отбивку пустым местом (все теми же отступами).

Карта сайта

Карта сайта — правильное решение. Единственное, вместо вложенного списка лучше использовать заголовки <h3> вместо на категориях. У страницы два заголовка — «Карта сайта» и «Публикации», оба занесенные в <h2> подряд — один надо убрать

Рационализаторское предложение

Ну вот наконец мы и до него добрались.

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

Первый путь — собственноручное создание страницы и ее наполнение неудобен и потребует дополнительного времени для добавления темы.

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

Если тебя заинтересует идея, пиши — реализуем.

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

Вот как это может выглядеть →

Вердикт

Вердикт закономерен — я, утирая слезы умиления, любовался очередной работой NOD, как всегда аккуратного и знающего свое дело. Так что большинство моих поправок — небольшие шероховатости и невнимательность уже автора блога. Однако, при всем этом, AlexNote — тот блоггер, от которого не отписываются. И да, идею следующего «штампа» я украл именно у него.

Кто-нибудь хочет на обзор на следующей неделе?