Современные системы управления сайтом (CMS) максимально упрощают возможность построения и управления своим ресурсом. Но наряду с явными преимуществами существуют и недостатки таких систем. Один из таких недостатков в том, что шаблоны для CMS разрабатываются либо с точки зрения вебдизайнера, либо вебпрограмиста.
В первом случае все выглядит красиво, но только в том виде, который предусмотрел дизайнер и верстальщик, любое изменение влечет за собой разрушение структуры сайта (непропорционально большие заголовки, отступы, шрифты, размеры картинок, теги H1 H2 H3 и др.)
Когда сайтом занимается вебпрограмист, присутствует правильная организация тегов, шрифтов и др. элементов, но выглядит все это стандартно и однообразно. Очень редко можно встретить сайт, где гармонично сливается работа обоих и вебмастера и дизайнера.
В этой статье мы рассмотрим влияние заголовка вебстраницы или материала. Любой оптимизатор и программист скажет, что главным и определяющим фактором станет наличие в заголовке тега H1, этот тег имеет максимальный вес и авторитет для поисковой системы при ранжировании сайта. Поэтому он обязательно будет применять это правило для каждой статьи. Дизайнер и верстальщик будут руководствоваться выбором шрифта заголовка, его размером и цветом. Также грамотный верстальщик постарается визуально выделить зону заголовка, отделив ее отступами.
Вот два примера заголовков статьи, первый пример показывает работу вебпрограмиста, второй – дизайнера и верстальщика.
Что мы видим в первом случае, заголовок имеет тег H1, но во всем остальном явно проигрывает. Первый и самый явный недостаток – отсутствие отступов у заголовка со всех сторон, что ведет к потере визуального внимания читателя к нему.
Второй явный недостаток – цвет текста заголовка, он полностью сливается с остальным материалом и элементами страницы. Также можно отметить слишком большой заголовок, который читателю будет трудно прочитать в одно мгновение. Наличие многих мелких элементов вокруг заголовка (дата, кнопки социальных закладок, рекламный блок сверху) забивают пространство, отвлекая внимание читателя.
Второй пример показывает явную работу профессионального верстальщика. Во-первых, заголовок отделен от всего остального содержимого страницы визуальными отступами. Во-вторых, соблюден межстрочный интерльяж в заголовке, строки не сливаются друг с другом.
Размер шрифта подобран достаточно правильно – он сразу бросается в глаза и легко читается, при этом не выглядит огромным. Черный цвет шрифта на белом фоне логичен и уместен, например, зеленый или синий цвет мог бы привлечь больше внимания, но при этом нарушил бы правило цветовой гармонии.
Применение графического элемента внутри заголовка является нестандартным решением, он сразу приковывает к себе взгляд, не последнюю очередь в этом играет красный цвет круга. Наличие второго круга справа подразумевает совместное действие, читатель обязательно обратит на него свое внимание. Таким образом, можно привлечь внимание пользователя к дополнительной информации или рекламному предложению.
