Обзор kitich.in.ua

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

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

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

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

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

Оптимизация

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

Обязательно использовать Last-Modified или ETag для того, чтобы клиент мог не перегружать страницы без надобности.

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

Но самое важно, что нужно — это gzip отдачи HTML, CSS и JS, с проверками на старые браузеры. Таким путем можно даже не оптимизировать никакие файлы, увеличив скорость загрузки раза в три.

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

HTTP запросы

На несуществующих страницах не отдается 404 (а ведь ЧПУ через мод_реврайт, мешать не должен). Плюс, возможно, не отдается 340. Проверять можно с помощью специального сервиса.

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

Сайтмап и роботс

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

Подробней о синтаксисе robots.txt можно узнать в мануале, в моем посте и серии от Дениса Болтикова.

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

Хедер

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

Мета Content-Type должна идти сразу после head — иначе будут проблемы с кодировкой тайтла в Ослике и возможны трудности у Хрома (который может игнорировать такую мету). Далее лучше расположить тайтл, а потом сразу ссылку на css — экономия на спичках, но все же, чем раньше запустится поток на стили, тем лучше.

У двух линков на фавиконку не указан type="image/x-icon" (или пнг). Это желательно.

Еще три меты (author, description, keywords) лучше расположить друг за другом, это чисто логически. Проблема в том, что две последних меты принадлежат конкретной странице, а у тебя они везде одинаковые — и поэтому бессмысленны. Аналогично, в кейвордах много ненужных повторов вроде «Kitich, the Kitich, Китич, блог, blog» — все основные поисковики давно умеют транслитерировать, на мету обращают куда меньше внимания и все такое. В любом случае, этот момент избыточен.

Про RSS я тебе уже говорил, что было бы проще, если бы в линке (да и ссылке на самих страницах) был бы указан kitich.in.ua/feed/, который бы редиректил на фидбернер — тогда можно было бы гибко изменять значение, не теряя читателей.

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

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

CSS

CSS — инлайновый хак для ИЕ простить можно, но нельзя простить достаточно большой код. Два по 12 и 5 Кб — это много, даже если страницы как-бы-грузятся-как-бы-быстро.

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

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

Очень много этих padding-top и подобных — shorthand отменили? Они сократят и упростят код.

JS

Джаваскрипта много. Много маленьких кусков, которые проще слить в один-два по функционалу, чтобы сэкономить на HTTP-заголовках и потоках загрузки.

Что за скрипт для ФидБернера я не понял; нужен ли он вообще — тоже. Мой JSView говорит, что в список скриптов так же умудрился попасть какой-то HTML оттуда же.

Инлайновый скрипт можно легко внести в любой другой файл.

Ну и плюс 26 Кб shadowbox.js — это много, если не используется gzip. Нужные функции можно уместить и в меньшие по размеру файлы. К тому же, если он не используется на блоге, его там можно и не подключать здесь — разделение загрузок по времени может давать результаты.

Фид

Выкопав замечательный тег xmp, ты выкопал себе ямку, но мы об этом говорили — стандартом является связка pre-code (и blockcode в будущем).

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

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

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

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

Формат ссылок

Сейчас ссылки у тебя — файлы без расширения. Причем, если добавить слеш в конце урла поста, то откроется то же пост, а вот если попробовать /services/, то будет 404. Лучше всего использовать со слешем в конце и давать доступ и к страницам без слеша, а вот нужен ли редирект, или нет — решать тебе (он на чуточку увеличивает время загрузки).

Еще проблема с 404 — отсутствие min-height, так что у тебя высота контента остается меньше, чем высота окна браузера и появляется желтая полоса внизу.

HTML

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

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

Странные классы "menu column w20" и "menucopy" в дивах — хотя меню более привычней и семантичней верстать списками (сейчас — обычными, в будущем — специальными менюшными). Аналогично, нужно ли всем ссылкам давать классы, при том, что и в CSS их проще описать можно, не используя перечисление? Это имело бы смысл только, если ты раздельно бы изменял у этих элементов оформление.

Вот это тоже странный момент:

<div class='column w20'>
  <div class='leftcol'>
    <h5 class="rss">
        <a href="http://feeds2.feedburner.com/JustKitich">RSS</a>
    </h5>
  </div>
</div>

Есть ли смысл в таких вложениях? Почему наскоком пропущены все уровни заголовков и поставлен h5? Почему бы просто не сделать display:block ссылке и омикроформатить ее, просто добавив ид feed-link?

Это тоже классный момент:

<div class='navigation'>
    <div class='rarr arrow top'>
        <a href='blog/page1' title='Следующая страница'>→</a>
    </div>
</div>

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

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

Непонятно, зачем давать всем h3 заголовкам (почему h3? h2 же!) класс p%номер. Если только для того, чтобы выделить первый пост — достаточно указать это только у первого (и тут это id скорее, чем класс).

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

<p class='more'> — параграф никак не море, море — это ссылка <a>. В принципе, ты ее все равно сдвигаешь вправо, что можно сделать и со строчным элементом. Но еще лучше убрать ее из параграфа вообще, избавившись от лишнего вложения.

В самих постах заголовок поста все же остается h3, хотя можно и h1 заместо названия самого блога.

Комментарии не слиты в один объединяющий див, зато сами состоят из кучи дивов — хотя есть и разные cite, и прочее. В комментариях строки разбиваются не параграфами, а переносами стрко <br/> (в которых, кстати, желательо оставлять пробел перед слешем). Зато типографируются тире (но не сочетания из двух дефисов).

Форма комментариев опять в <p> — ну даже в дивах, но никак не текстовых параграфах! Текст при инпутах можно сделать все-таки в <label>, даже не назначая атрибут for. И добавить tabindex всем элементам формы, на всякий случай.

Ну и для хедера, футера и сайдбара вполне можно использовать привычные header, footer, sidebar вместо top, bottom, column.

Скрипт счетчика, разделенный на два блока script можно слить в один.

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

Уведомления на почту

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

Робот поздравляет меня с каким-то праздником под названием «доброе время суток» — ну, это лично я терпеть не могу это фидошное приветствие, но он так еще от робота. Далее идет связка, которую можно спокойно заменить на «%ник% оставил комментарий к '%посту%'». И отбить переносом строки от текста комментария, чтобы это не мешало сразу читать его.

И раз выдаешь HTML текста комментария, почему бы все письмо перевести из плейн-текста в ХТМЛ? Тогда и ссылку мжно будет сделать ссылкой, и все эти сущности глаз мозолить не будут.

А тем, кто хочет отписаться от новых писем — правильно, надо показывать кукиш. И черт с ними, с правилами этикета массовых рассылок.

Дизайн

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

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

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

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

Выделение первой (последней) статьи — оценил, еще раз повторюсь. Зато нет количества комментариев к записи на главной странице — это минус.

Кернинг можно править вручную — как у всего текста с помощью letter-spacing, так и заключая отдельные куску в <span>.

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

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

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

И эти just опять с двумя точками — это фетиш такой?

В копирайтах предпочительнее использовать настоящие имю и фамилию, а не ник.

Ну ладно, давай посмотрим на страницу поста →

Ээээ, там все сказано.

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

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

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

Содержание

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

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

Оценка — дезигнер-шайтан, продолжай!