Блог для каждого несет свои функции и выполняет индивидуальные цели. Для кого-то это просто способ самовыражения, для кого-то дополнительный источник дохода, для третьих - тусовка с читателями. В первом случае не так важно, как хорошо выглядит блог, насколько он удобен, выполнен ли без ошибок и т.п.
Если же целью ведущего блога является создание вокруг него группы читателей (единомышленников или даже дискуссионеров), создания своеобразного сообщества, уже стоит задуматься о читабельности, юзабилити, нормальном отображении в различных броузерах и т.п.
Если автор хочет получать с блога доход, данный вопрос встает еще острее. Я сам решил подчистить недочеты благодаря прочтению сообщения с блога по CSS.
Итак, давайте посмотрим, что же можно сделать? Как проверить правильность кода, стилей, отображения? Для этого нам понадобится совсем немного. Давайте по порядку.
1. Отображение в разных броузерах
Я буду ориентироваться на два наиболее распространенных сейчас броузера InternetExplorer и Mosilla FireFox. первый установлен на всех машинах, работающих под Windows, второй броузер бесплатный, Вы можете скачать его и установить на свой компьютер. Я сам довольно давно уже пользуюсь FireFox'ом. Перешел на него с подачи моего наставника Дмитрия Смакотина, и сейчас не хочу менять этот броузер ни на какой другой
Итак, самое простое - открыть Ваш блог одновременно в двух броузерах и сравнить, хорошо ли, правильно ли отображаются все элементы. Если Вы установили FireFox, то нет необходимости запускать еще и IE, т.к. "Лиса" (так зовут FireFox) имеет возможность показывать страницы, используя движок IE (плагин IE Tab). Т.о. прямо в одном броузере Вы можете посмотреть оба варианта отображения.
Результат сравнения Вас может сильно удивить, особенно, если в дизайне используются не таблицы, а div'ы.
Если у Вас установлены другие броузеры (Opera, IE7), проверьте и в них, как посетители видят Ваш блог.
2. Чистота кода
Это уже более тонкая проверка, если Вы не очень хорошо разбираетесь в CSS и HTML, можно ее опустить, но я бы советовал хотя бы проверить, есть ли проблемы в данном направлении или беспокоиться не о чем.
Дело в том, что некорректность кода может вызывать нестыковку отображения страниц в разных броузерах, которую мы разбирали выше. Т.е. корни проблемы, найденной Вами при выполнении первого пункта, могут крыться именно здесь.
Осуществить проверку нам поможет еще один плагин для FireFox под названием Web Developer. Я использую его около полугода - очень удобно и просто. Установите плагин, в верхней части окна появится дополнительная панель инструментов, коих там насчитывается довольно много. Нам все не нужны, будем использовать только несколько.
В правой части панели Вы можете увидеть три кнопочки-картинки, которые отображают статус анализа текущей страницы на правильность кода.
В первой проверяется правильно выдаваемых сервером данных, а нажимая на нее, Вы сможете посмотреть все характеристики страницы.
Вторая картинка отображает результат проверки файла стилей CSS. Если найдена ошибка, будет отображаться красный восклицательный знак. Кликнув на эту картинку Вы увидите лог анализа со списком ошибок, клик по каждой ошибке приведет к открытию файла на строке, в которая данная неполадка обнаружена.
Третья картинка похожа на вторую, но проверяет она не стили, а расположенные на странице java-скрипты.
Замечу, что я нашел небольшой глюк в своем файле стилей блога, когда начал проверку. Ошибка была несерьезная и не влияла на его отображение, но создавала некоторую неоднозначность кода. Теперь ошибка устранена, что Вы можете наблюдать, если уже установили вышеописанный плагин.
Кроме того, если Вы обладаете более детальными знаниями по верстке, можете воспользоваться несколькими проверками из раздела Tools того же плагина.
3. Соблюдение структуры
Этот пункт скорее направлен на выработку и поддержание единого стиля. Если Вы используете "дивовый" дизайн (от тэга div), а именно такой применяется в большинстве шаблонов WordPress, то и не стоит нарушать данную структуру, используя для размещения контента таблицы. Таблицы должны применятся для вывода табличных данных, а все форматирование в CSS.
По этому поводу до сих пор спорят приверженцы табличного и дивового дизайна. Ранее я использовал табличный, теперь стараюсь перейти к более продвинутому варианту.
Если для Вас все эти слова (верстка, HTML, CSS, тэги, div и т.д.) кажутся чем-то страшным и непонятным, либо почитайте литературу по верстке, либо не заморачивайтесь данной проблемой и отдайте ее профессионалам.
Проверить же, как у Вас используются таблицы, можно при помощи того же плагина.
Outline - Outline Tables - Tables Cells
В результате Вы увидите границы всех ячеек таблиц и сможете проанализировать, для каких целей они используются.
Кроме того, можно посмотреть, как расположены у Вас на странице слои (DIV'ы). Для этого в панели плагина выбирайте
Information - Display Div Order
У этого плагина так много очень полезных фишек, как для проверки страниц, так и для поиска несоответствий. Например, Information - Display Element Information позволяет посмотреть свойства любого бъекта на странице.
4. Целостность
Проверьте, все ли картинки, ссылки на Вашей странице в нормальном виде.
Для анализа картинок используйте Images - View Image Information
а для ссылок Tools - Validate Links
5. SEO
Владельцы и ведущие блогов часто не задумываются над оптимизацией контента под поисковики, но я все же затрону несколько вопросов, которые будут полезны и для блогов, и для других сайтов, если Вы начнете их приводить в порядок. Несколько (а то и десятки) дополнительных посетителей с поисковиков еще никому не мешали. правильно?
1) Мета-тэги
Проверьте, что у Вас показывается в мета-тэгах. Поисковики оринтируются на них при индексации сайта, да и пользователи видят описания в результатах поиска.
Это можно сделать просто открыв html-код страницы (Ctrl+U) или воспользовавшись все тем же плагином:
Information - View Meta Tag Information
2) Заголовки
Еще один важный момент, на который смотрят поисковики - тэги заголовков H1, H2, H3 и т.д.
H1 должен быть на странице один, H2 может быть несколько (как подзаголовки) и т.д. Своеобразная иерархическая структура
Проверьте, все ли в порядке с этими тэгами при помощи плагина:
Information - View Document Outline
В блогах на движке WordPress такая иерархия сделана автоматически, и, если вы сами ничего не правили, все должно быть в порядке.
3) Alt и Title
Раз уж взялись за SEO, стоит посмотреть, что твориться в параметре alt для картинок (это просто хороший стиль, если все картинки подписаны, т.к. до сих пор многие пользователи просматривают сайты с выключенными картинками) и параметре title для ссылок. Для этого включите
Images - Display Alt Attributes и Information - Display Title Attributes
Я думаю. этого будет достаточно для начала. Описанные процедуры позволят выявить основные ошибки на странице, а мелочи уже я оставлю для самостоятельного поиска.
Очень хороший броузер и отличный плагин, которые позволяют сделать много полезных проверок, не отходя от проверяемой страницы.
Я сам уже проверил свой блог, что нашел - поправил. Сейчас я планирую еще и обновить версию, т.к. она довольно старенькая.
Замечания, предложения и пожелания по данному материалу приветствуются.