Верстка сайта

Как убедиться, что работа выполнена качественно? Как оценить качество вёрстки сайта? На самом деле, ответы на эти вопросы безумно просты и элементарны, ваша задача - всего лишь обратиться за помощью к нашему чек-листу по грамотной и эффективной верстке.

1. Предварительная проверка

1.1 Соблюдение пропорций макета

Расположение блоков должно быть 1:1 по сравнению с макетом. Допускается расхождение до 5px для текста. Разрешены и даже приветствуются правки размеров и расположения криво нарисованных блоков (разница размерах в 1-2px на разных страницах).

1.2 Проверить кроссбраузерность

https://autoprefixer.github.io/

1.3 Проверить страницу на переполнение контентом #

Введите в консоль браузера команду: document.body.contentEditable = true

1.4 Проверить валидность

CSSLint и JSHint

1.5 Оптимизировать визуализацию сайта

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

1.6 Перепроверить порядок верстки

Вёрстка должна тянутся, не разваливаться и не терять дизайнерский вид при изменении контента на странице. Его может быть больше или меньше чем на макете, он может быть обёрнут во всякие из визига и т.п. Обязательно нужно проверять удаление заголовков!

1.7 Сохранить доступность при выключенных(загружающихся) картинках

Надписи (особенно логотип и главное меню сайта) должны оставаться читабельными, у всех информационных картинок должны быть подписи аккуратным небольшим серым шрифтом (да, для img можно задавать font – это внешний вид alt-текста, что выводится вместо картинки)

1.8 Слинковать Label и input/select

Это нужно для удобства юзеров. Также это очень облегчает жизнь пользователям с ограниченными физическими возможностями. Проверяется кликом по label – должен активироваться соответствующий ему элемент ввода.

1.9 Точность в input type=”email/url/tel”.

Пока-что практическая ценность для пользователя лишь в том, что на iPhone будет показываться клавиатура соответствующая формату поля ввода. Проверяется на iPhone — в зависимости от типа поля ввода он должен показывать различную клавиатуру: стандартную/цифровую/для набора web/email-адресов.

1.10 Убедиться в работоспособности при выключенном JavaScript

JS может быть выключен согласно корпоративных требований безопасности. А в Opera Mini он работает только методом перезагрузки страницы. Но самое главное — сайт должен сохранять нормальный вид, пока он грузится на медленном 3G и js-скрипты ещё не выполнились!

1.11 Проверить работоспособность при выключенном Flash

Flash не работает на iOS-девайсах. Flash плохо индексируется поисковиками. Проверяется в FF отключением flash-плагина: Tools→Add-ons→Plugins→Shockwave Flash→disable.

1.12 Отсутствие багов при увеличенном шрифте

Проверяется в FF: Шрифты – включением View→Zoom→Zoom Text Only и последовательным нажатие клавиш Ctrl + — (или View→Zoom→Zoom In). -120 dpi – настраивается отдельным апплетом в Control Panel (Vista/Seven) или в свойствах драйвера видеокарты в XP.

1.13 Обратить внимание на важные мелочи

-Лого на внутряках должно вести на титулку. На титулке logo = h1, на внутряках H1=заголовок контента, а Logo=div; -Проверять что все интерактивные элементы страницы что должны работать - работают; -В вёрстке не должны оставаться закомментированные «на всякий случай» куски кода, лишние файлы и т.д.

2. Head

2.1 Мета-теги

Doctype: указывает на версию HTML-файла и находится в самом начале страницы. В Doctype должна быть указана пятая версия HTML. !doctype html

2.2 Charset: кодировка документа — UTF-8.

meta charset="utf-8"

2.3 X-UA-Compatible: управляет отображением страницы в Internet Explorer, поэтому его необходимо задать.

meta http-equiv="x-ua-compatible" content="ie=edge" a href="https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx"

2.4 Viewport: мета-тег Viewport задан правильно.

meta name="viewport" content="width=device-width, initial-s cale=1"

2.5 Title: тег Title используется на всех страницах.

Google вычисляет длину заголовка, и обрезает в выдаче те, которые больше 472 пикселей. Оптимальная длина для заголовка — около 55 символов.

2.6 Description: описание сайта внутри тега является уникальным и не превышает 150-и символов.

2.7 Favicon. link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico"

https://www.favicon-generator.org/ https://realfavicongenerator.net/

2.8 Canonical: Use rel="canonical" to avoid duplicate content.

link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html"

2.9 Inline critical CSS: The inline critical CSS is correctly injected in the HEAD.

The CSS critical (or above the fold) collects all the CSS used to render the visible portion of the page. It is embedded before your principal CSS call and between `style` in a single line (minified).

3. HTML-теги

3.1 Атрибут lang: должен указывать язык текущей HTML-страницы.

html lang="ru"

4. HTML

4.1 Семантические элементы HTML5: элементы HTML5 используются надлежащим образом (header, section, footer, main…).

https://htmlreference.io/

5. Тестирование HTML-верстки

5.1 W3C-валидатор: все страницы сайта необходимо протестировать валидатором на сайте W3C. Он поможет найти незамеченные ошибки в HTML-коде.

https://validator.w3.org/

5.2 Оформление HTML-кода: чтобы поправить недочеты в коде и сократить его размер, воспользуйтесь специальным сервисом.

https://www.10bestdesign.com/dirtymarkup/

5.3 Проверка ссылок на странице: все ссылки рабочие и не выдают 404 ошибку при переходе

https://validator.w3.org/checklink

5.4 Формат подключенного шрифта: форматы WOFF, WOFF2 and TTF поддерживаются всеми современными браузерами.

Вес шрифта: не превышает 2-х Мб.

6. Тестирование CSS

6.1 Порядок объявления CSS

Объявления логически связанных свойств должны быть сгруппированы в следующем порядке: Позиционирование Блочная модель и размеры Текстовые свойства Отображение Остальное Плавные переходы, анимация

6.2 Адаптивный дизайн: верстка на сайте адаптивная.

страницы сайта протестированы для разрешений: 320 px, 768 px, 1024 px (можно проверить и на других разрешениях в зависимости от цели сайта).

6.3 Уникальные ID: идентификаторы на странице не повторяются.

6.4 JS-префиксы: все классы или id, используемые в JS, начинаются с js- и не используются для задания стилей через CSS.

6.5 Печать с помощью CSS: таблицы печати настроены корректно для каждой страницы.

7. Оптимизация

7.1 Комментарии: перед публикацией страницы убедитесь, что удалили все комментарии и ненужный код.

7.2 Объединение CSS-файлов: все файлы CSS объединены в один файл. (Не подходит для HTTP/2).

7.3 Оптимизация: все CSS-файлы сжаты.

7.4 Неиспользуемый CSS-код: весь лишний код удален

https://uncss-online.com/

7.5 Проверка CSS

https://jigsaw.w3.org/css-validator/

8. Изображения

8.1 Оптимизация: Все изображения оптимизированы для отображения в браузере. Формат WebP можно использовать на важных страницах, например, на главной.

https://tinypng.com/

8.2 Спрайт-файл: маленькие картинки на сайте объединены в один спрайт-файл. Если это иконки, то их можно объединить в спрайт-картинку SVG формата.

https://ru.inettools.net/image/generator-css-spraytov

8.3 Описание изображения: все картинки img должны быть описаны словами в атрибуте alt.

9. JavaScript

9.1 JavaScript-код отдельными файлами: в HTML-документе не должно быть встроенного JS-кода. Лучше просто указать ссылку на файл с кодом.

9.2 Объединение: JavaScript-файлы объединены в один.

9.3 Оптимизация: все JavaScript-файлы минимизированы (можно добавить суффикс .min к названию).

10. Производительность

10.1 Вес страницы: каждая страница весит до 500 Кб.

https://tools.pingdom.com/

10.2 Оптимизация: HTML-код минимизирован.

https://validator.w3.org/

10.3 Отложенная загрузка элементов (Lazy loading): изображения, скрипты и CSS-стили загружаются по мере пролистывания страницы

11. Заголовки

11.1 H1: на всех страницах присутствует заголовок H1, который отличается от названия сайта, заданного в title.

11.2 Заголовки

заголовки использованы в правильном порядке — от H1 до H6.

12. Landmarks

12.1 Role banner: для тега Header указан атрибут role=«banner».

12.2 Role navigation: для Nav — атрибут role=«navigation».

12.3 Role main: для Main указан атрибут role=«main».

13. Формы

13.1 Label: связан с каждым отдельным input-ом в элементах формы. Если label не может быть отображен, нужно использовать aria-label.