Общие требования к верстке Цели:
- Корректное отображение во всех актуальных браузерах
- Наименьшее время загрузки
- Индексация сайта поисковыми ботами
Оформление кода
Оформляйте свой код, чтобы в нём легко могли разобраться другие. По окончанию работ проверьте все еще раз и перелинкуйте страницы.
HTML код:
- Вложенные теги сдвигайте с помощью tab, проще видеть иерархию документа.
- К закрывающим тегам добавляйте комментарий. Например:
<div class=«left_sidebar» >
…
…
…
</div><!– /left_sidebar –>
- Названия классов и id подбирайте по смыслу, пускай даже длинные, но понятные.
- Как можно меньше используйте атрибут style=»…». Взамен не стоит плодить 20 дополнительных классов в духе
margin-top_20. Если хорошо спланирована структура HTML, в них нет необходимости.
- Проверяй код на валидность: http://validator.w3.org/ или WebDeveloper toolbar для Mozila Firefox.
- Все парные теги должны закрываться!
- Правильно объявляйте доктайп:
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
<html xmlns=«http://www.w3.org/1999/xhtml» xml:lang=«en» lang=«en»>
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=«http://www.w3.org/1999/xhtml» xml:lang=«ru»>
- Все ссылки на внутренние
(собственные) страницы должны открываться в том же окне браузера, кроме
исключительных случаев, явно указанных в задании. Если на сайте
содержится ссылка на другой сайт, она должна открываться в новом окне.
Требования кодированию
- Чистота кода, минимальный размер html файла, обязательная оптимизация размера блоков из однотипных элементов, например, меню или перечислений.
- Если верстка не фиксированной
ширины, то разрешение экрана от 1024 (без прокрутки) до макс по ширине.
Если начинается от 1280 – оговаривается отдельно. На меньшем разрешении
верстка не должна съезжаться, а фиксируется на минимально допустимой
ширине, например 1024 или 800.
- По высоте верстка всегда должна быть растянута на 100%, т.е. даже если нет наполнения, подвал на большом
разрешения должен находится не в середине экрана, а в самом низу.
- Оптимизированные картинки, грамотное использование jpg или gif. Баланс между сжатием, количеством цветов и
размером файла. Тяжелые картинки (от 30-50кб), носящие дизайнерский
смысл, должны стоять как background у ячеек. За счет этого они
загружаются в последнюю очередь.
- Отсутствие style=»" внутри html кода, кроме случаев разового использования на всем сайте (например,
главная страница). Обусловлено тем, что файл стиля грузиться один раз и
дальше извлекается из кэша. А вот HTML код каждой страницы грузиться каждый раз заново.
- Отсутствие <font> <p> <span>
- В контент-части может быть любой
текст, ссылки, таблицы, вложенные таблицы, списки и т.д. При этом вид
шрифта не должен меняться. Для этого обязательно наличие в файле стиля
всех стандартных тегов:
- TD, P (основной текст) {text-align: justify; font-size: XX%;} XX – заменить
- A, A:link, A:active, A:visited, A:hover
- H1, H2, H3, H4
- TABLE, IMG {border:0}
- BODY {margin: 0px; font-family: }
- UL, LI
- см. пнель инструментов wysiwyg редактора
- Вместо стилей (style=»") следует использовать контейнер ID для передачи наследственных стилей В HTML: <td id=name>, в style.css: # name a {}
- Использование чистых (без style=»" и т.п.) <h1>, <h2>, <h3>, <a>, <b>,
<ul>, <li> в контент-части
- В структуре заголовков h1-h6 должна
соблюдаться иерархия. h1 должен быть один на всю страницу, т.е это
заголовок основной сущности страницы, например заголовок товара на
карточке товара, заголовок статьи на карточке статьи или новости, далее
структура должна быть ниспадающей.
- Использовать TABLE по назначение, а именно для оформления таблиц и не более
- Размер шрифта обязательно не
фиксированный, а плавающий (через font-size: XX% или font-size:
x-small), кроме отдельных случаев – элементов дизайна или некоторых
видов меню и подписей, оговаривается отдельно.
- Выделение комментариями начала и конца меню, контент-части, крупных блоков
- Путь для файлов:
- data/style.css – файл стилей
- data/javascript.js – файл для javascript
- images/ – для картинок
- В именах файлов использовать
смысловые приставки. Например, ***_button.png для всех кнопок, чтобы
отделить их от простых изображений.
- Нужно предусмотреть, что любые
надписи могут быть увеличины по длине текста. При этом дизайн не должен
искажаться. Чтобы этого не роисходило с длинными надписями в
ограниченном пространстве, следует использовать таблицы с фиксированной
шириной (TABLE-LAYOUT: fixed)
Оптимизация кода
Для увеличения скорости загрузки страниц необходимо упорядочить подключение внешних CSS и JS файлов.
Все CSS файлы должны подключаться внутри HEAD, если есть возможность
объединить некоторые из файлов – нужно это сделать, в идеале хорошо бы
объединить все в один.
Все JS файлы должны быть подключены перед закрывающим </body>.
Так же необходимо объединить по возможности JS-файлы в один.
Например можно спокойно объединять внешние библиотеки:
jquery, jquery-ui и все jquery-плагины, а так же в конец этого файла
добавить jshttprequst – эти файлы мы точно не будем изменять.
Такие действия позволят заметно ускорить загрузку страниц.
Критерии качества верстки
1) Соблюдение вышеупомянутых требований
2) Идентичность с макетом 1 в 1, при условии что макеты должного уровня качества.
Проверить готовую верстку методом
наложения полупрозрачного скриншота из браузера на соответсвующий PSD
макет, при разных разрешениях. Совпадение должно быть 100%.
3) Кроссбраузерность: IE от 6, Opera, Firefox, Google Chrome, Safari, Konqueror от 3.5
5) Семантика кода или использование
тегов/языковых конструкций по назначению. Проверяется отключением стилей и картинок, если страница остается читабельной, значит все в порядке,
если все «налеплено друг на друга» необходимо доработать HTML код (особенно проверь соблюдение п.10-12).
Источник: habrahabr.ru
|
