HTML - Верстка

Адаптивная верстка и работа с DOM

1. При адаптивной верстке, следует строго соблюдать разрешения экрана указанных в ТЗ. Каждый экран сайта должен быть сверстан с указанными требованиями ширины и высоты. Если требований по разрешению экрана не показано в техническом задании, следует исходить от стандартных размеров ширины экранов 1920px, 1600px, 1280px, 768px, 414px ,320px. (при этом стоит помнить что есть панель пуск, нижняя и верхняя часть браузера, и панель вкладок браузера).
2. Если в макете присутствует JS, изменяющий DOM — внимательно следить, чтобы все корректно работало в Опере, т. к. этот замечательный браузер при нажатии на кнопочку назад страницу не перезагружает, а отдает закешированный документ, причем очень важный момент: документ не просто закешированный, а еще и с учетом всех модификаций DOM, которые были выполнены с помощью JS
3. В макетах, где высота страницы зависит от контента (а таких, как правило, большинство), предусматривайте, чтобы футер был прибит к низу браузера при отсутствии/малом количестве контента, если не оговорено обратное.
4. Следите за оптимизацией изображений для каждого устройства. Если фотография 2мб загружается на компьютере за 1.2с, то на мобильном скорость загрузки может превысить и 10с при слабом интернете.
5. Оптимизируйте скорость загрузки всех файлов. Не нужно использовать js там, где достаточно обойтись CSS 3.

Кроссбраузерность (список браузеров)

1. IE 9+;
2. FF3+;
3. Chrome 15+;
4. Opera 9+;
5. Safari 4+;

Мобильность

1. Компьютер - 1920х1080
2. Компьютер - 1680х1050
3. Ноутбук - 1280х800
4. Планшет - 1366, 1024x768
5. Нетбук - 800х600
6. Смартфон - 320х480

Написание кода

1. Чистый код;
2. Наименьшая вложенность блоков в HTML структуре. Написание валидного и корректного кода с минимальным возможным размером.
3. HTML5 и CSS3 семантика.
4. Написание кода без повторяющихся или дублирующийся элементов.
5. Если кнопка. btn-green есть на всех страницах сайта, ее класс не может быть разным с одинаковыми стилями: btn-green, Btn-green, btnGreen. Используйте CSS правила для одного элемента, не дублируя лишний код.
6. Пишите корректные и понятные наименования классов и id для блоков. Все наименования на английском языке без грамматических ошибок.
7. Помечайте код комментариями. Разделение блоков в html пишите: <! -- FOOTER -->.
8. Не забывайте прописывать cursor:pointer для кнопок, сделанных не с помощью input. Если вы не знаете, будет на эту кнопку повешен обработчик событий с помощью JS или это будет ссылкой, лучше в любом случае использовать тег <a> или button.
9. Если вы делаете обработку событий при нажатии на ссылки, следите за тем, чтобы обработчики событий возвращали false, или же используйте href='javascript:void(0)' вместо популярного href='#', чтобы страница не скроллилась вверх. Так же в js можно прописывать event.preventDefault() для отмены перехода по href.
10. Использовать # запрещено
11. Если макет не проходит 100%-ную html-валидацию, постарайтесь по крайней мере делать так, чтобы использование не валидного кода было оправданно. После верстки проверить соответствие стандарту: http://validator.w3.org/#validate-by-uri
12. Коды счетчиков должны быть занесены в < noindex ></ noindex > .
13. Не используйте атрибут style=»…». Все стили хранить в отдельном файле CSS.
14. Все парные теги должны закрываться!
15. Правильно объявляйте доктайп. Используйте последнюю разметку кода HTML5. (<!DOCTYPEhtml>)
16. Отсутствие <font> <p> <span>
17. В контент-части может быть любой текст, ссылки, таблицы, вложенные таблицы, списки и т.д. При этом вид шрифта не должен меняться. Для этого обязательно наличие в файле стиля всех стандартных тегов: 
    1. TD, P (основной текст) {text-align: justify; font-size: XX%;} XX – заменить
    2. A, A:link, A:active, A:visited, A:hover
    3. H1, H2, H3, H4
    4. TABLE, IMG {border:0}
    5. BODY {margin: 0px; font-family: }
    6. UL, LI
18. Использовать TABLE по назначение, а именно для оформления таблиц и не более
19. Путь для файлов: В именах файлов использовать смысловые приставки. Например, ***_button.png для всех кнопок, чтобы отделить их от простых изображений.
    1. data/style.css – файл стилей
    2. data/javascript.js – файл для javascript
    3. images/ – для картинок
    4. Для увеличения скорости загрузки страниц необходимо упорядочить подключение внешних CSS и JS файлов.

Изображения

1. Все иконки следует хранить в спрайтах. Gulp помогает без труда собирать из многих файлов иконок один большой спрайт. Используйте этот инструмент, он очень важен.
2. Использовать GIF/PNG с 8-битным альфаканалом вместо PNG-24, где это возможно.
3. GIF (Формат для сжатия малоцветных изображений (менее 256 цветов)
4. JPEG Качество (Уровень сжатия) не менее 60). При сжатии не должно возникать видимых дефектов характерных данному формату.
5. Тяжелые картинки (от 30-50кб), носящие дизайнерский смысл, должны стоять как background у ячеек. За счет этого они загружаются в последнюю очередь.
6. В папке с изображениями не должно быть картинок, не использующихся в верстке. Если что-то исключили из верстки или переделали — не забывайте удалять уже ненужные картинки.

Текст

1. Для всех элементов, которые могут содержать текст различной длины, который должен быть вписан в одну строку (например, для кнопок или заголовков, если в дизайне не предусмотрено, что они могут занимать больше одной строки), обязательно задавайте CSS свойство white-space:nowrap.
2. Если в макете используются нестандартные шрифты, обязательно оговорите, можно ли элементы с нестандартным шрифтом делать картинками, если нельзя — обсудите, с помощью какой технологии будет реализовано их отображение (sIfr, Cufon, etc.)
3. В структуре заголовков h1-h6 должна соблюдаться иерархия. h1 должен быть один на всю страницу, т.е это заголовок основной сущности страницы, например, заголовок товара на карточке товара, заголовок статьи на карточке статьи или новости, далее структура должна быть ниспадающей.
4. Размер шрифта обязательно не фиксированный, а плавающий (через font-size: XX% или font-size: x-small), кроме отдельных случаев – элементов дизайна или некоторых видов меню и подписей, оговаривается отдельно.
5. Нужно предусмотреть, что любые надписи могут быть увеличены по длине текста. При этом дизайн не должен искажаться. Чтобы этого не происходило с длинными надписями в ограниченном пространстве, следует использовать таблицы с фиксированной шириной (TABLE-LAYOUT: fixed)

Скрипты

1. Все что можно сделать без Javascript, делать без него.
2. Если Javascript кода много — нужно его выносить в отдельный файл. Обработчики событий тоже лучше отделить и объявлять в отдельном файле.
3. Все JS файлы должны быть подключены перед закрывающим </body>.
4. Так же необходимо объединить по возможности JS-файлы в один. Например, можно спокойно объединять внешние библиотеки: jquery, jquery-ui и все jquery-плагины, а также в конец этого файла добавить jshttprequst – эти файлы мы точно не будем изменять.

CSS

1. CSS файл должен быть разбит с помощью строк с комментариями на блоки по функциональному назначению
2. Все CSS файлы должны подключаться внутри HEAD, если есть возможность объединить некоторые из файлов – нужно это сделать, в идеале хорошо бы объединить все в один.
3. Названия классов и id подбирайте по смыслу, пускай даже длинные, но понятные.

Оптимизация

1. Удалите код JavaScript, препятствующий показу страницы (Инфо: https://developers.google.com/speed/docs/insights/BlockingJS)
2. Оптимизируйте код CSS (Инфо: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery)
3. Сократить CSS (Инфо: https://developers.google.com/speed/docs/insights/MinifyResources)
4. Сократите объем ресурсов (HTML, CSS и JavaScript) (Инфо: https://developers.google.com/speed/docs/insights/MinifyResources)

Критерии эффективной работы

1. Выполнение указанных выше правил
2. Идентичность с макетом 1 в 1, при условии, что макеты должного уровня качества. Проверить готовую верстку методом наложения полупрозрачного скриншота из браузера на соответствующий PSD макет, при разных разрешениях. Совпадение должно быть 100%. Можете использовать программы Avocode или расширение для браузера PerfetcPixel

Источники требований:

Данные требования сформированы на основе:

• Данные Скибл
• https://habrahabr.ru/post/101464/
• http://www.bistro-site.ru/articles/conditions
• http://vismech.ru/html/obshie-trebovaniya-k-verstke/
• Владислав Войтович (https://vk.com/mrvladevoit)

Актуально на 11.03.2017