Чек-лист (Checklist) для проверки качества вёрстки


Что это. Это контрольный список, по которому я проверяю как свою работу, так и работу ребят, с которыми я работаю удаленно.

Для чего это нужно. Главной причиной для меня является то, что это существенно экономит время на дебаг на этапе верстки и, вообще, является обязательным инструментом для любой стадии создания проекта. Так или иначе, мы все проверяем свою работу согласно известным нам показателям качества и хорошего тона, просто гораздо удобнее заранее составить продуманный список критериев для каждого этапа. Как говорят: голова - для того чтобы думать, а не помнить. 

Поскольку верстка у меня поставлена на поток, я проверяю свои труды по списку после завершения работ. Для ребят, которые работают со мной удаленно, я высылаю чек-лист заранее и прошу прочесть до работы и потом пройтись по списку после выполнения. Выгоды от этого очевидны.

Для чего я об этом пишу. Если вы еще не составили чек листы по этапам своей работы, надеюсь, эта статья немного вас подтолкнет и сделает вас чуточку эффективнее. Так же, я не против увидеть критику в комментариях, и ваши варианты.

Собственно сам чек лист:

1.    Кроссбраузерность, кодировка и DOCTYPE. Браузеры от ie8 . Верстаем на html5 с семантическими тегами по ситуации.

2.    Верстка с помощью div, все стили вешаются на div. Семантические теги html5 не должны быть стилизованы.

3.    Весь css вешается на классы (class="") не id (id="") верстка не должна быть привязана к id. В файле стилей не должно быть #

4.    Кодировка: UTF-8. это универсальность и совместимость. Это современный стандарт, за ним даже не будущее, а настоящее.

5.Обязательные семантические теги <header role="banner">, <nav role="navigation">, <section role="main">, <footer role="contentinfo"> и <article> для текста страницы

6.    CSS и JavaScript в отдельных файлах

7.    CSS и javaScript должны проверятся анализаторами качества кода: CSSLint и JSlint (есть соответствующие онлайн сервисы). Избежать всех ошибок этих анализаторов, за исключением предупреждений, если применение обосновано.

8.    Сайт должен нормально смотреться во всех стандартных разрешениях от 1024 и выше, не иметь горизонтального скролла

9.    Верстка не должна ломаться при уменьшении-увеличении экрана

10. Корректная работа при вбивании реального текста, надёжность вёрстки

11. Правильная структура заголовков (H1,H2,… и т.д. и TITLE)

12. Не должно быть js-ошибок!

13. для мелких картинок связанных логически должны использоваться CSS-спрайты

14. CSS3 border-radius, gradient, box-shadow, text-shadow вместо использования графики

15. Стили для ссылок по умолчанию :hover, :active и :focus

16. Значок копирайта &copy; и никак иначе.

17. Размер текста в em и никак иначе.

18. Проверить орфографию всего текста, даже рыбы.

Желаю удачи!

 


комментарии: