| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | AA | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Требования к верстке | Комментарий | |||||||||||||||||||||||||
2 | 1 | HTML5 разметка. | |||||||||||||||||||||||||
3 | 2 | Сборщик проекта Gulp | |||||||||||||||||||||||||
4 | 3 | Предпочтительно использование SCSS или SASS в крайнем случае. | |||||||||||||||||||||||||
5 | 4 | Минимальное использование сторонних js библиотек, только при необходимости. | |||||||||||||||||||||||||
6 | 5 | Для минимизации каскада и построения надёжной, современной, масштабируемой вёрстки использовать: БЭМ, MCSS и SMACSS. | |||||||||||||||||||||||||
7 | 6 | Адекватное наименование классов: .katalog, .tovar, .konteyner - НЕТ .catalog, .product, .container - ДА | |||||||||||||||||||||||||
8 | 7 | Не допускается вешанье стилей на id. | |||||||||||||||||||||||||
9 | 8 | Адаптив сайта без использования js | |||||||||||||||||||||||||
10 | 9 | Картинки должны быть в отдельной папке, css — в отдельной и js — в отдельной. Графика, не являющаяся частью дизайна (всякие иллюстрации, фото в новостях и т. д.), нужно положить в отдельную папку http://skrinshoter.ru/s/160321/5d5t6P0V | |||||||||||||||||||||||||
11 | 10 | Все css стили должны быть в едином сжатом файле стилей. | |||||||||||||||||||||||||
12 | 11 | Все скрипты js должны быть в едином сжатом файле. | |||||||||||||||||||||||||
13 | 12 | Код CSS, HTML и JavaScript оптимизирован — удалены лишние пробелы, рабочие комментарии и т. п. | |||||||||||||||||||||||||
14 | 13 | Итоговый build должен содержать в себе: 1 файл css 1 файл js Другие файлы | |||||||||||||||||||||||||
15 | 14 | Если не используется фремворк, допускается использование normalize или reset. | |||||||||||||||||||||||||
16 | 15 | Все страницы сайта должны отображаться правильно, быть абсолютно идентичны утвержденному макету и требованиям ТЗ. Отступы между элементами одного и того же типа (например, между карточками товаров в каталоге) должны быть одинаковые. При изменении масштаба страницы в пределах 65-140 % нет должно быть проблем в верстке. | |||||||||||||||||||||||||
17 | 16 | Все кнопки, пункты меню и ссылки должны быть кликабельные и выводить на те страницы, на которые нужно. | Скворзное меню должно быть связано ссылками на те страницы, которые разрабатываются | ||||||||||||||||||||||||
18 | 17 | Скорость загрузки сайта(любой страницы) должна набирать максимальное количество баллов в Page Speed Insights. | Ускорение делать не нужно. Общаяя концепция, что даже верстка не должна тормозить во время загрузки скриптов или каких-то отдельных элементов | ||||||||||||||||||||||||
19 | 18 | Все страницы должны корректно отображаться во всех браузерах (последние версии), а так же на планшетах, мобильных телефонах на базе Android и IOS в горизонтальном и вертикальном положении устройства. Safari Yandex Opera MozillaFireFox GoogleChrome Мобильные устройства на базе IOS Мобильные устройства на базе Android Все должно показываться правильно, без обрезки, искажения и т.п. | Подразумевается поддержка браузерами от 3х последних версий | ||||||||||||||||||||||||
20 | 19 | Все страницы должны адаптироваться под любую ширину устройства, а так же корректно отображаться на RETINA. Все блоки на месте и без горизонтального скролла. | Если дизайн отрисован под ретину в любых других случаях верстка должна не разваливаться | ||||||||||||||||||||||||
21 | 20 | Все страницы должны проходит тесты на пригодность для мобильных устройств от Яндекса и Google. | |||||||||||||||||||||||||
22 | 21 | Верстка должна не терять вид при публикации текста или другого контента, в том числе при увеличении/уменьшении объема текста.Верстка не должна разваливаться если изображение не того размера, так же не разваливаться при перестроении расположения блоков. | |||||||||||||||||||||||||
23 | 22 | Должны быть ровные расстояния между блоками, центрирование текста, корректное отображение таблиц (не должны вызывать горизонтальный скролл), при наведении мыши все ссылки должны выделяться(Все ссылки должны как-то реагировать на :hover, :active и :focus.), интерактивные элементы сайта должны быть в рабочем состоянии, в текстах не должно быть грамматических ошибок и неодинакового отображения шрифтов и проч. | |||||||||||||||||||||||||
24 | 23 | Кодировка UTF-8. | |||||||||||||||||||||||||
25 | 24 | На всех страницах не должно быть ошибок валидации html/css согласно https://validator.w3.org/nu/ и https://jigsaw.w3.org/css-validator/ Допускаются только предупреждения. | |||||||||||||||||||||||||
26 | 25 | На страницах не должно быть никаких ошибок в веб-консоли браузера | |||||||||||||||||||||||||
27 | 26 | Должна быть микроразметки на страницах. | |||||||||||||||||||||||||
28 | 27 | Верстка должна соответствовать стандартам WCAG | |||||||||||||||||||||||||
29 | 28 | Если у пользователя стандартные шрифты не поддерживаются, то для корректного отображения страниц должны использоваться альтернативные шрифты, которые будут предоставлены с дизайном как альтернатива. | Должны быть предоставлены дизайнером | ||||||||||||||||||||||||
30 | 29 | Во всех формах на сайте должны быть указаны обязательные к заполнению поля и должна быть HTML5 валидация заполнения формы. У поля ввода телефона должна быть удобная маска для ввода номера | |||||||||||||||||||||||||
31 | 30 | Заголовки по сайту должны иметь правильную структуру H1, H2 и т.д. В сквозных блоках не должно быть заголовков h1-h6(Заголовки <h1> — <h6> не применяются в заголовках блоков. ). h1 должен быть 1 на странице | |||||||||||||||||||||||||
32 | 31 | При отключенных картинок все надписи на страницах должны остаться читабельными. | |||||||||||||||||||||||||
33 | 32 | При отключенных js страница должна корректно отображаться. | |||||||||||||||||||||||||
34 | 33 | Flash не должен использоваться нигде по сайту. | |||||||||||||||||||||||||
35 | 34 | Логотип должен быть в формате SVG, не ухудшаться в качестве при масштабировании. Логотип на всех страницах кроме главной должен быть ссылкой на главную. | |||||||||||||||||||||||||
36 | 35 | У input должны быть заданы правильные type=«email/url/tel» | |||||||||||||||||||||||||
37 | 36 | Должен быть добавлен Favicon (32×32, 48×48 и 64×64 вариациями и apple-touch-icon.) | Должно быть предоставлено дизайнером | ||||||||||||||||||||||||
38 | 37 | Любые ссылки на внешние ресурсы должны работать через target="_blank" | Практически никогда не относится к верстке | ||||||||||||||||||||||||
39 | 38 | В хлебных крошках не должно быть ссылки текущую страницу | |||||||||||||||||||||||||
40 | 39 | Подключение CSS должно быть в <head>, а JS — в конце HTML, перед </body> | |||||||||||||||||||||||||
41 | 40 | Все графические изображения должны быть оптимизированы. | Сжати через gulp или с помощью другого инструмента. Без явного ухудшения качества. | ||||||||||||||||||||||||
42 | 41 | В контентной странице, должны быть сверстаны и стилизованы стандартные редактора контента “TinyMCE - пример”: Таблица Цитата Жирный, курсив, зачеркнутый текст Списки(ul, ol, li) Ссылка Параграф Заголовки h1-h6 и т.д. | При наличии дизайна. Текстовая дизайн страница, которая содержит в себе дизайн всех необходимых элементов для наполнения текста. Также данное условие касается страниц где предусмотренен текстовый блок и которые не являются только текстовыми. | ||||||||||||||||||||||||
43 | 42 | Формат изображений: jpg - для фото png - для всего остального где нельзя использовать SVG | |||||||||||||||||||||||||
44 | 43 | На страницах не должно быть нерабочих ссылок. | Подразумевается то, что ссылки связанные с меню, попАпами должны быть активны и привязаны к логичным страницам, как пример главная | ||||||||||||||||||||||||
45 | 44 | В зависимости от языковой версии разрабатываемой верстки атрибут lang должен быть указан корректно. | |||||||||||||||||||||||||
46 | |||||||||||||||||||||||||||
47 | |||||||||||||||||||||||||||
48 | |||||||||||||||||||||||||||
49 | |||||||||||||||||||||||||||
50 | |||||||||||||||||||||||||||
51 | |||||||||||||||||||||||||||
52 | |||||||||||||||||||||||||||
53 | |||||||||||||||||||||||||||
54 | |||||||||||||||||||||||||||
55 | |||||||||||||||||||||||||||
56 | |||||||||||||||||||||||||||
57 | |||||||||||||||||||||||||||
58 | |||||||||||||||||||||||||||
59 | |||||||||||||||||||||||||||
60 | |||||||||||||||||||||||||||
61 | |||||||||||||||||||||||||||
62 | |||||||||||||||||||||||||||
63 | |||||||||||||||||||||||||||
64 | |||||||||||||||||||||||||||
65 | |||||||||||||||||||||||||||
66 | |||||||||||||||||||||||||||
67 | |||||||||||||||||||||||||||
68 | |||||||||||||||||||||||||||
69 | |||||||||||||||||||||||||||
70 | |||||||||||||||||||||||||||
71 | |||||||||||||||||||||||||||
72 | |||||||||||||||||||||||||||
73 | |||||||||||||||||||||||||||
74 | |||||||||||||||||||||||||||
75 | |||||||||||||||||||||||||||
76 | |||||||||||||||||||||||||||
77 | |||||||||||||||||||||||||||
78 | |||||||||||||||||||||||||||
79 | |||||||||||||||||||||||||||
80 | |||||||||||||||||||||||||||
81 | |||||||||||||||||||||||||||
82 | |||||||||||||||||||||||||||
83 | |||||||||||||||||||||||||||
84 | |||||||||||||||||||||||||||
85 | |||||||||||||||||||||||||||
86 | |||||||||||||||||||||||||||
87 | |||||||||||||||||||||||||||
88 | |||||||||||||||||||||||||||
89 | |||||||||||||||||||||||||||
90 | |||||||||||||||||||||||||||
91 | |||||||||||||||||||||||||||
92 | |||||||||||||||||||||||||||
93 | |||||||||||||||||||||||||||
94 | |||||||||||||||||||||||||||
95 | |||||||||||||||||||||||||||
96 | |||||||||||||||||||||||||||
97 | |||||||||||||||||||||||||||
98 | |||||||||||||||||||||||||||
99 | |||||||||||||||||||||||||||
100 |