8 правил верстки, за которые Вам будут благодарны клиенты
Известный факт, что верстка макета дизайна – это обязательный этап разработки сайта. Каждый разработчик работает по своему плану: он может разделить страницу на крупные элементы, например, шапка-контент-подвал и углубляться, либо начать с мелких кусочков, собирая их в большую модель.
Верстка – процесс творческий и четких алгоритмов здесь не существует, но она всегда должна быть профессиональной. Только такие страницы имеют структурированный код и малый вес. Первое облегчает индексацию сайта поисковиками, что способствует продвижению сайта и привлечению пользователей, второе сокращает время загрузки, помогая удержать посетителя на сайте (вы ведь делали сайт для посетителей, не так ли?). Также профессиональная верстка обеспечит сайту кроссбраузерность - корректное отображение страниц в разных браузерах.
К этому и необходимо стремиться при разработке сайтов. Поэтому приведем список основных правил, которые должны быть учтены при верстке, за соблюдение которых клиенты будут вам благодарны.
Отсутствующие элементы в дизайне
Если в макете не используются списки, таблицы, какие-то типы заголовков, то это не значит, что в CSS мы о них тоже не упоминаем. Наша компания при разработке сайтов использует такую систему управления, которая позволяет корректировать контент на сайте пользователям без специального обучения. Но для этого необходимо учесть, что человек может забивать и списки, и рисовать таблицы, и вставлять картинки в ссылки... все стандартные элементы, которые не присутствуют в дизайне, но процент их использования велик – должны быть прописаны в CSS: заголовки H1-H6, списки (ol, ul), элементы форм (input, select), таблицы (table, tr, td). А также не забываем о картинках в ссылках (a img {border:none}), различные состояния ссылок (hover, visited), размер шрифта стандартных элементов (body, table, td, p, li, a). Также хотелось бы обратить ваше внимание на теги <strong> и <em>. Если не пропистать для них правила в CSS, то в разных браузерах они могут вести себя по разному.
Специальные теги
При верстке сайта неплохо было бы вспомнить о специальных тегах, предназначенных для смыслового выделения информации. Используете ли вы, например: <abbr>, <address>, <blockquote>, <code>, <hr>...
Использование специальных кодов в html
Это означает, что если необходимо поставить многоточие, то для этого используется код «…»; знаки copyright и registered — это не буквы «с» и «r» в скобках, а коды «©» и ®» соответственно; а коды кавычек, длинных и коротких тире необходимо знать наизусть - ««» и «»» для левой и правой кавычки, длинное тире «—» и короткое тире «–».
Оптимизация html и css
Важно помнить о том, что бы вес загружаемой страницы должен быть как можно более минимальным. Если говорить о ручной оптимизации, то можно упомянуть о чистке html- и css-кода от лишних пробелов, об использовании более специфичных селекторов в css, вместо того, чтобы давать имена классов большому количеству элементов. Для автоматического сжатия css-файлов рекомендуется воспользоваться специальным инструментом (основанном на проекте CSS Tidy). При использовании данной утилиты из кода удаляются незначащие пробельные символы переводы строк и комментарии.
SEO-оптимизация
Разработчики сайтов никогда не должны забывать, что созданный ими проект будет жить и дальше. А чтобы он жил долго и счастливо, а не потерялся где в просторах интернета, его необходимо подготовить для поисковиков. Должны быть прописаны атрибуты alt к изображениям, title к ссылкам, keywords, description и остальные meta-теги. И не забываем, что коды счетчиков должны быть занесены в < noindex ></ noindex >.
Оптимизация изображений
Под оптимизацией изображений понимают такое его преобразование и подбор параметров формата, которое обеспечивает минимальный размер файла, поэтому при подборе изображений необходимо осознанно выбирать графический формат, количество цветов для изображений с фиксированной палитрой и степень сжатия для изображений с большим количеством цветов.
Для оптимизация графики можно использовать программы Adobe Fireworks, GIMP и консольную программу optipng (особенно полезна при сжатии png-файлов).
Если это позволяет верстка, можно объединять небольшие картинки в один файл и использовать их как background с разными значениями background-position.
Проверка в браузерах
Одним из требований профессиональной верстки является кроссбраузерность, поэтому необходимо проверять верстку в как можно большем числе браузеров: Opera, Safari, Internet Explorer, Firefox. А так же не забываем про разные версии одних и тех же браузеров. Нельзя терять посетителей из-за своих ошибок.
Проверка на валидность
И в заключение, не забудьте проверить верстку на валидность, впрочем как и CSS. В этом Вам поможет W3C-validator.
Профессиональная верстка не потеряет своего значения еще очень долго. Если разработчики сайтов подошли ответственно к написанию html-кода, который по сути обычному пользователю не виден, то и ко всему остальному подход будет такой же серьезный и ответственный.
