Аудит absolvo.ru

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

Сейчас у каждого второго маньяка, женатого на Интернете, есть свой бложек. Или аккаунт в «социальной сети» (вконтакты с одноклассниками, конечно, не в счет). Или твиттер, френдфидик, что-то еще. Мы все одновременно сошли с ума, думая, что всем интересны и нам есть что сказать миру (а мир это еще выслушает).

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

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

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

Осмотр

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

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

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

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

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

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

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

Анамнез

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

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

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

Что можно противопоставить смешению и выпадающему списку? Например, оставить здесь только самое важное, ссылки на облака тегов и рубрик оставить на страницах тегов и рубрик (с постов же на них ссылаются), Твиттер вынести в отдельный блок, вроде прикрепленного к верху поста только на главной, в которой поместится и информация об авторе.

Главная страница →

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

Надо либо как-то разносить их в разные места, не показывать часть на главной (теги), а часть внутри поста (ссылка на комментарии), использовать разное выделение.

Но, вообще, столкновение в одном месте множества разнородных элементов — это геноцид против удобства любого интерфейса.

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

Cтраницы и посты →

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

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

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

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

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

404 страница

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

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

Рубрики, теги и облачка

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

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

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

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

Поиск

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

RSS

Отдается без ката — в принципе, нормально для таких постов. Плохо, что не сохраняется оформление для псевдо-постовых (хотя бы серым фоном). Рекомендуемые ссылки можно отбить еще одним бээром только в RSS.

Вскрытие

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

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

При всей кроссплатформенности блога, он не проходит валидацию (ох, зря указан стрикт, ох зря!). Хотя большая часть ошибок — от сторонних плагинов и самого ВП, сующих свои атрибуты в теги и забывающего о правильных асмперсандах в URL'ах, отчего рушится XML парсер.

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

С head на страничках все нормально. Хотя меня очень пугают тайтлы — длинные и беспощадные. Еще для фавиконки желательно делать два линка — кроме «shortcut icon» еще и просто «icon» и обязательно указывать mime-тип изображения. Располагать же сам фавикон в корне — абсолютно правильно. Заодно можно сюда втюкнуть же RSS комментариев на пост, хотя им все равно никто не пользуется.

Стиль только один, чистый и небольшой, джаваскриптов несколько — вообще, это не сильно мешает, но при большом количестве посетителей, можно было бы и напрячься с объединением их в один файл. Картинок мало, в принципе, можно и не заморачивать CSS-спрайтами.

Кеширование страниц (например, Super Cache) все-таки нужно. Хорошо бы включить gzip-сжатие — сам плагин предложит один из вариантов, как это сделать для HTML. Все-таки на блоге есть большие странички, да и комментариев посты иногда много собирают, так что для слабых каналом это было бы хорошим одолжением.

Структура HTML вполне на уровне, хотя все-таик ну слишком много инлайновых стилей, закомментированных кусков, тегов h2 (все — в h2!!1), несемантичном использовании small, там где можно обойтись без них или выделением блока — ну и вообще семантики мало. Зато оформление блоков постов как нельяз лучше подходит для hAtom.

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

Закидывание постовых в тег цитаты — это интересно, хотя и не сильно семантично — но пусть останется.

Рекомендуемые статьи мало того, что содержат инлайновый повторяющийся стиль, так еще засунуты в раздельные дивы — тут нужен маркированный список.

Одинаковые id (которые должны быть всегда уникальными) на странице — прежде всего, в форме комментариев.

Использовать абзацы в форме не рекомендую — <br /> здесь более уместен. Подписи к форме легче выполнять не с помощью <small>, а — <label>. У <textarea> забыт атрибут cols, зато везде правильно проставлены tabindex'ы

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

Диагноз

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

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

Делаем ставки, господа.