воскресенье, июня 07, 2009

Верстка сайта. Что необходимо учесть?

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

Сервисы постинга в социальные закладки
В чем особенности дизайна блогов? Узнайте подробнее насколько это важно!

1. Цвет фона body

Даже если body не имеет никакого фона, обязательно прописывайте background, дабы избежать некорректного цвета, в случае если на компьютере изменена палитра.

body {background:#FFF}

2. Минимальная ширина

Если вы верстаете “резиновый” дизайн, вам необходимо напомнить заказчику, что должна быть минимальная ширина, при которой страница на развалится. Как правило, это либо 1004px, либо 780px. Если вы верстаете под IE6, то вам придется использовать специальную технику обертывания контента, либо воспользоваться JS скриптом, исправляющим многие недостатки IE6. Я использую скрипт IE7.js JavaScript library.

3. Наличие правил для отсутствующих элементов в дизайне.

Здесь я имею ввиду правила для заголовков H1-H6, посещенных и активных ссылок (a:visited, a:active), списков (ol, ul), таблиц, форм. Все стандартные элементы, которые не присутствуют в дизайне, но процент их использования велик - должны быть прописаны в CSS. Не стоит лениться, воспитывайте в себе обязательство всегда выполнять полноценную верстку.

4. Картинки-ссылки

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

a img {border:none}

5. Проверка в браузерах, указанных в ТЗ

Как правило, это FF2/FF3, Opera 9, IE6/IE7, Safari. Я тестирую верстку для IE6 в IETester (там же есть и 7й, и 8й).

6. Семантика во всем

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

7. Вес страницы

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

8. Валидность

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

А вы учитываете эти пункты при верстке? Буду рада вашим дополнениям к списку :)


Принимаю эстафету от Тани и расскажу о железе своей машины :)

Работаю я на ноуте ASUS F7Z:

Процессор AMD Turion 64 X2 RM-70 2 GHz
Кэш L2 1 Mb
Экран 17″ (43.2 см)
Разрешение экрана WXGA+ (1440×900)
Видео интегрированная ATI Mobility Radeon
Оперативная память 3072 Mb DDR2 RAM (расширяется до 4096 Mb)
Привод DVD-RW
Жесткий диск 320 Gb (5400 об/мин)
Программное обеспечение Windows Vista™ Home Premium
Порты и коммуникации 5 x USB 2.0
Wi-Fi
Bluetooth
Выход на внешний монитор VGA
IEEE 1394 (FireWire)
Веб-камера
HDMI
ТВ-тюнер
Габариты 403 x 299 x 32- 42 мм
Вес 3.5 кг

Передаю эстафету про железо Евгению, Антону и Александру.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru