Аудит www.ctrlc.ru

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

Так что я готов получить КПК за свою чистосердечную похвалу одному более-менее интересному бложеку. Серьезно, посмотрите на эти пастельные цвета, которые выигрышно смотрятся в этаком графическом оформлении «под карандаш, чернила и всякие классные принадлежности». С каркасом у страниц тоже (почти) полный порядок. Нет, ну конечно, блоги в этом смысле непритязательны: сайдбар да лента текста, плюс хедер с сайдбаром для полного счастья, — но здесь и посты при малой отбивке друг для друга, хорошо различимы, интерлиньяж и расстояние между абзацами тоже прекрасны.

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

Шапка на Ctrl+C — отличная. Мне вполне нравится решение с выделением баннеров (чуть банальненько, но чуть поддерживает проскальзывающую в некоторых местах тему с выступающими элементами — впрочем, «выступают» они все просто так), и блок с реферальными ссылками — неплохая идея. Главное, все вместе смотрится так хорошо, что начинает вериться, что не все блоггеры — халявщики и одержимые «золотой лихорадкой» (в наше время это утонченно называется «кнопка бабло», да).

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

Пишет автор больше о том, что его интересует, хотя не гнушается плыть по течению, обсуждая сеодайджесты и яндекс-ресёрчи. И, кстати, заметьте — если у него и стоит плагин Cyr-to-Lat, то слаги к постам сделаны красиво и ручками, без этих ужасных ne-piwite-"deti"-translitom-a-to-umrete.html. Ну, развлекается конкурсами иногда, пытаясь привлечь себе невидимых подписчиков — но мы же читаем человека обычно за то, что он человек хороший, да? Ну а если он твиттерянин — то и вообще чудненько.

(и черт с ней с орфографией, да — «вряд ли» пишется именно так, а не как на странице контактов)

Но, естественно, не все так клево, как хотелось бы.

Элементы

Начнем с малого.

Тексту с его красивыми пробельными расстояниями не хватает нормальных кавычек и тире — мой Типограф в помощь.

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

Во-первых, «протухания» посещенных ссылок в тексте поста нет (точнее, у селектора :visited тот же цвет).

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

В-третьих, нет реакции на рисованных элементах — в частности, «отрывки» с кросспостинг-блогами можно при наведении все-таки делать цветными — эффект замыленный, но рабочий. Кнопкам RSS и твиттера тоже не хватает поддержки — хотя это можно опустить, но «птичка» сидит слишком близко с подзаголовком, практически без перехода (также рисунок чужого авторства, и непосвященному вообще не понятно, что этот элемент — ссылка). У доски же почета ссылка «как сюда попасть» тоже неинтерактивна, особенно, если предполагать, что квадратики в будущем все-таки заполнятся до конца.

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

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

У блока же поиска синий круг с лупой играет роль привлечения внимания абсолютно правильно — при маленьких размерах, он не сбивает глаза, но ищется довольно легко. Однако в вебкитовском движке (на котором работает Safari и Chrome) из-за косяка верстки, сам инпут поиска чуть смещен вверх, что при дурацкой привычке этих браузеров подсвечивать прямоугольник, выглядит раздражающе.

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

Оформление ленты постов вполне приятное. Даты немного затушеваны цветом, но этого недостаточно — лучше уменьшить размер шрифта, чтобы выделить заголовок «верблюдом».

Использование стрелки здесь, кстати, ничем не обосновано — кроме, наверное, хабрамоды. Тем более, в пагинации и «читать полностью» используются «елочки», что само по себе кощунственно, хотя и как бы «принято». Да и при выделении блока more с горизонтальной линией как-то лишает смысла вообще наличие этого указателя направления.

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

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

Разделителем здесь служит реффер-баннер блогуна — вполне, но тогда не хватает отбивки снизу заголовка с количеством комментариев.

Отбивка комментариев, выделение меты — опять хорошо (ну что ж такое, я сейчас заплачу). Зато плохо то, что имена комментаторов со ссылками никак не отличаются от тех, что без ссылок — я понимаю, это хитрый ход, но из-за него приходится лишний раз передвигать руку с мышкой. Ну и не хватает возможности подставить имя человека, которому отвечаешь — если не устраивают древовидные комментарии (а здесь они не слишком нужны), — например, с помощью скрипта.

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

Ах да, еще футер. Если стоит знак копирайта, то нужно и тире между цифрами — русское, т.н. «длинное» (ширины m — но в разных шрифтах это может быть — или –). Ну и владельцем копирайта не может выступать название блога (тем более с пояснением), если оно не зарегистрированное юридическое лицо. Здесь должен быть автор, или хотя бы псевдоним. Хотя плевать, авторское право в любом случае будет работать.

Навигация

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

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

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

Код

Хтмл вполне неплохой — хотя подключение многокилобатного JQuery из-за двух почти незаметных эффектов (а в Хроме блюр на кнопках кросспост-блогов вообще ничего не делает) довольно глупо — особенно, если нужный кроссбраузерный код уместится в какой-то жалкий килобайт. Стиль acp.css легко можно подключить вручную в style.css, тем самым отказавшись от лишнего http-запроса. Вообще, сайт при полной загрузке оформления еще долго «висит» на медленном канале — это сильно раздражает (а это часто значит и то, что половина js-эффектов работать не будет).

Тайтл должен идти сразу после content-type, за ним сразу — основной стиль, чтобы скорость загрузки была максимальной. У ссылки на фавикон не хватает объявления rel="icon" (оно такое же, но вместо rel="shortcut icon" — стандартный просчет, хотя фавикон и расположен в корневом каталоге).

nofollow и noindex на ссылке на фид — самая плохая идея, потому как поисковики по блогам всегда должны подцеплять эту ссылку.

Кнопки RSS, твиттера и кросспост-блогов сделаны в виде тега img (к тому же, с устаревшими атрибутами), обернутого в ссылку, а потом еще в див — достаточно было бы одних ссылок, на которую навешены стили display:block с соответствующей размерностью, а также бэкграундом. Тогда бы все эти мелкие картинки можно было бы запихнуть в CSS Sprite, добавить ховер с «оцвечиванием» кнопок, и при этом умудриться увеличить клиентскую скорость загрузки оформления блога.

Далее все более-менее неплохо, хотя встречаются инлайновые стили и лишние атрибуты.

При выделении дат постов в span'е неплохо бы еще отбивать их пробелом от текста — поисковик может и не разобраться, а также навешивать класс entry-date (в комментариях используется класс data — но по-английски это слово обозначает «информацию», да).

Верстка не резиновая, поэтому nobr на «читать дальше» попросту излишен. Да и, если надо будет делать резиновую верстку, то там в любом случае необходимо прописать минимальную ширину, и она будет далеко не в два слова.

Комментарии выделены в нумерованный список ol — при том, что нумерованным списком они являются постольку-поскольку, но это даже не недочет, можно оставить (а некоторым так кажется даже логичнее).

В форме комментария не нужен див — сам form является блочным элементом, и position:relative можно навесить на него в CSS. Подписи к полям можно все-таки заключить в <label for="id_инпута">Подсказка</label>, обязательно добавить подписку по почте — это стандарт де-факто, пока никто не придумал автоматической системы подписки на RSS комментариев (разместить чекбокс можно легко слева от кнопки — там есть пустое место).

РСС

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

При включенной вордпрессовской настройке «полный RSS» надо лишь установить мою исправленную версию LJ Crossposter, в которой, во-первых, можно влиять на то, что не пойдет в кросспост, а во-вторых, находится правильная обработка ката — достаточно лишь здесь включить опцию «отдавать только до ката», а все остальные кросспост-сервисы повесить на RSS именно ЖЖ.

Также, если используется не тег <--more-->, а надо выводить только анонс, то можно легко установить опцию «отдавать текст полностью», и при этом добавить на строчку 1230 в плагине что-то вроде

$post->post_content=substr(strip_tags($post->post_content),0,300).' <a href="'.get_permalink($post_id)'.">Читать в оригинале</a>';

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

Штуки

Самое странное в блоге, который ведется как бы на SEO-тематику — отсутствие нормального robots.txt и sitemap'а — конечно, и без них может быть все хорошо, но зачем же совсем игнорировать поисковики?

Ну и, на мой взгляд, ужасно, что основным доменом является www. — смысла в выделении домена второго уровня, кроме как — показать, что это сайт и гордо произносить «вэвэвэхахаха», — именно сейчас я не вижу.

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

Ну а что

Если дожать дизайн до конца, дать пользователю удобно находить информацию и чуть оптимизировать верстку (можно, конечно, еще и wp-super-cache поставить, для скорости) — то из этого манимейкерского блога получится конфетка.

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