Верстка сайта. Что необходимо учесть?
Прежде чем передавать готовую верстку заказчику, вы должны быть уверены, что все необходимые элементы учтены и изменение контента не приведет к “развалу” страницы. Поэтому хочу привести свой небольшой проверочный список пунктов, которые должны быть учтены при верстке.
Сервисы постинга в социальные закладки
В чем особенности дизайна блогов? Узнайте подробнее насколько это важно!
padlik.ru – записки интернет-маньяка о бабле
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 кг |
Передаю эстафету про железо , и .
Еще записи на эту тему
Dmoz
все правильно, спасибо что напомнила про 5-ый пункт, вечно о нем забываю.А еще, если в дизайне присутствуют графические кнопки или лого, то прописать текст для них, который будут видеть гуглбот и иже с ним. (я текст сдвигаю с помощю text-indent в -9999px). Или же, чтобы при отключенных рисунках было вместо логотипа текст, то я пользуюсь 1 советом из этой страницы
Цитировать
Полезная статья. Новички обычно забывают про 4 пункт.
пс. а давно ли у этого блога поменялась форма для комментариев?
Цитировать
Форма комментария не менялась изначально.
Цитировать
Соглашусь со всеми пунктами. И добавлю только, что проверять отображение сайта в браузере можно с помощью этого . А еще есть неплохая статья про правильный подбор разрешения к сайту.
Цитировать
>при которой страница на развалится
не развалится
Цитировать
Очень рада была передать эстафету))
Огорчает лишь изменившаяся политика, касаемо прямых ссылок…
Хотя, наверное так и надо…
Цитировать
Пункты 3 и 4 нужны всем, не только новичкам.
А вообще я бы хотел добавить одно. Пусть это и может относится к пункту 3 или это не самый важный пункт, но все же.
Для Мозилы, следует ссылкам назначать outline, чтобы они не выделялись при нажатии на них. Пример: a {outline:none;}
Цитировать
Хочу добавить по нескольким пунктам.
По мимо минимальной ширины должна быть и максимальная. Часто встречаются сайты когда для среднего блока содержащего контент забывают указать максимальную ширину.
Полностью согласен с пунктом 3. Я бы его даже первым сделал. Чтобы ничего не пропустить пользуюсь . Очень удобная вещичка :)
Цитировать
Обратите внимание -
Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘hilite_head’ was given in /home2/getincss/public_html/wp-includes/plugin.php on line 339
Цитировать
Борис, где вы увидели эту ошибку?
Цитировать
Ну.. это на самом деле. Основы всех основ))
Цитировать
Этого делать не стоит, вы потеряете посетителей которые работают без мышки.
Цитировать
Parikmail, спасибо, не подумал.
Цитировать
С пятым пунктом не будьте так самоуверены, отображения разметки для восьмого не соответствует действительности.
Цитировать
При создании print-страницы надо прятать ненужные для печати этементы: навигацию, баннеры, сайдбар, и т.д.
Цитировать
А я не когда не верстаю под IE =\
Простите не хочу вас обидеть, но… разве это так классно?
Цитировать
Пункты с 1 по 4 и, в большинстве случаев, 5 отпадают сами собой, если сперва сбрасывать стили (подключая reset.css, например).
Цитировать