Эй! Спасибо, что решили посмотреть на тему! Осмотритесь вокруг
и подпишитесь на RSS feed чтобы узнавать обо всех обновлениях. До встречи!

Архив Март, 2011

Green HTML

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

Шаблон — это «одежда» блога. У каждого она по-своему уникальна. Кто-то пытается приодеть свой блог в одёжку «от кутюр» (таких как, например, N.O.D., Блогоарт…), а кто-то занимается Hand Made (т.е. рисует собственную темку для своего сайта, что даже более уникально, чем шаблон от кутюр).

Ну а в большинстве случаев хозяин блога берет одну из бесплатных тем, навешивает всякие рюшечки в виде RSS кнопок, воробья Twitter, пузомерок, баннеров и т.п. Так и шаблон, уважаемой мной перфекционистки, стандартен: хедер-контент-сайдбар. Цветовая схема сайта выбрана, наверное, под цвет волос хозяйки блога, кстати фото в сайдбаре удачно вливается в оформление блога. Основное оформление в таких темах сконцентрировано в сайдбаре и хедере, поэтому давайте рассмотрим всё по порядку:

1. Шапка сайта.

Оформление шапки состоит из картинки на всю ширину блога, вес которой составляет более 100 кБ, что для рисунка в одной цветовой палитре слишком много, лучше было бы в таблице стилей для слоя "top" прописать атрибуты слоя, которые более подходят к оформлению сайта, т.е. вместо белого фонового цвета выбрать оттенок, который присутствует в рисунке «талантливого дизайнера» (от #FC9 до #FC6). И теперь, даже если по какой-то причине (отключена графика в браузере и т.п.) не загрузятся картинки, то оформление останется более-менее приемлемым (и не будет белого «бельма» на том месте, которое больше всего притягивает взгляд).

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

Примерно должно получиться вот так:

.top {
 background: #F7B53A url(images/top.jpg) no-repeat scroll right 0;
 height: 159px;
}

В шапке помимо прочего присутствует изюминка, видимая при более детальном рассмотрении — это вход в админку, ссылка оформлена в виде… Не знаю что-то мне это напоминает…

2. Контентная часть.

В футере блога написано, что верстку макета сайта осуществил любимый человек Лены. Не хотелось бы говорить про «кривые» или «не от туда растущие руки»…, спишем допущенные ляпы на занятость молодого человека зарабатыванием «саповских» рублей. Ему, наверное, легче заработать и сделать какой-нибудь подарок своей подруге, чем ковыряться в коде вордпрессовского шаблона.

Здесь я просто укажу на ошибки, которые стоит поправить:

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

Заголовок отделен от статьи переносами (на главной странице 3
и 2
на странице поста). Тег
должен использовать только один раз для вставки переноса строки. Использование нескольких тегов подряд для отступов не приветствуется. Можно задать нижний отступ для блока "title".

.title {
 margin:0 0 30px;
}

P.S. Кстати при этом доктайпе: "XHTML 1.0 Transitional" тег переноса должен быть закрыт слешем —
.

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

Gergia и Tahoma из разных шрифтовых семейств.

В заголовоке поста ссылка на эту же страницу (не самое конечно страшное, тем более что этой ошибкой страдают наверное более 90% личных страничек).

3. Сайдбар.

Вот наконец то добрались и до сайдбара. Здесь творится полный хаос.

Мои рекомендации:

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

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

Убрать кнопочки «читать в Яндекс», в Гугле, «получать по почте» (не уж то от этих кнопочек прибавляются подписчики).

Птичку Твиттера уменьшить и разместить в одну строку РСС.

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

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

Видно же что макет распадается после Donation Bar. Просто нужно убрать лишние теги неоткрытого списка:

  • Donation Bar

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

    
    

    Если изменить position: absolute; на position: fixed;, тогда другое дело.

    4. О разном.

    Таблица стилей ужасная, легче переписать заново, чем исправить.

    Нет закрывающих тегов , .

    Гугл-аналитик обычно размещают в самом конце перед (а ну да его же нет), но не как в теге .

    Счетчик от Liveinternet.ru в футер.

    Пагинация отделена переносом, в стилях нужно задать отступ.

    Вижу еще много недочетов, но уже устал… Вообщем нужно исправить или сменить темку, хотя читателям глубоко до лампочки, сколько ошибок в коде и доведен ли до ума дизайн, главное интересный контент. Буду рад если мои советы помогут. Удачи!