1. Крок 1. Візуальна оцінка
2. Крок 2. Взаємодія ресурсу з користувачем.
3. Крок 3. Реакція контейнерів на додавання різного об'єму контенту
4. Крок 4. Узгодження зі специфікаціями
5. Крок 5. Помилка 404
6. Крок 6. Javascript
7. На замітку

У статті систематизовано покрокова інструкція перевірки верстки на наявність помилок, багів і інших недоліків.

Після завершення створення проекту необхідна обов'язкова перевірка на наявність помилок, відповідність зі стандартами і кросбраузерності. Все це дуже важливо, тому цей процес необхідно систематизувати та впорядкувати. Коли така шпаргалка під рукою - важко упускати будь-які деталі. Для зручності розділимо алгоритм перевірки на кілька етапів.

Крок 1. Візуальна оцінка

Для початку підберемо браузер, в якому будемо проводити перевірку. Пропоную в якості прикладу вибрати Chrome - один з найпоширеніших і адекватних браузерів.

1. Відразу шукаємо явні косяки: не відображається картинка, їде верстка, втрата стикування квітів та інше.
2. Далі слід перевірити збіг кінцевого продукту з макетом - чи всі нюанси дизайну були враховані.
3. Після чого необхідно перевіряти вирівнювання, все відступи повинні бути однакові або пропорційні. Це надає акуратність і привабливість сайту. Особливу увагу потрібно приділити формам.
4. Наступна перевірка полягає в поведінці ресурсу при різних дозволах - показник адаптивної верстки. Дозвіл можна змінювати через масштабування екрану браузера або за допомогою інструментів веб-панелі браузера:
   • не повинно бути ніяких зламів;
   • відсутність скролів при зміні дозволу;
   • фон повинен бути цілісним при великих розмірах екрану.
5. Далі йде перевірка ресайз текстового поля для повідомлень (тег textarea ). Зміна його розмірів не повинно кардинально змінювати розташування елементів на сторінці.
6. Перевірка підсвічування полів при визначенні для них фокуса.
7. Повинна бути обов'язкова підсвічування полів при неправильному їх заповненні.

Крок 2. Взаємодія ресурсу з користувачем.

Перевірка повинна продовжуватися в тому ж браузері.

1. Можливість виділення і копіювання контенту.
2. Перевірка кликабельности активних елементів і правильність їх роботи (кнопки і посилання).
3. Чи можна перевизначити фокус для поля при натисканні мишкою в ньому (або при використанні гарячих клавіш).
4. Перевірка зовнішнього вигляду курсора при наведенні на різні елементи за типом і призначенням. Зовнішній вигляд курсору управляється через властивість cursor . При наведенні на текст або поля форми покажчик миші повинен виглядати як курсор, при ресайз або наведенні на кнопки / посилання в формі руки, а для інших випадків - в стандартному вигляді.
5. Для всіх активних елементів повинна бути передбачена відповідна реакція на наведення.
6. Натискання на вміст тега label повинен привласнювати фокус відповідному полю.
7. Обов'язкова наявність атрибутів title у елементів з не явним призначенням або якщо об'єкт несе будь-якої логічний зміст.
8. Обов'язкова наявність клікабельно логотипу, який переносить користувача на головну сторінку.
9. Перевірка особливості роздруківки сторінки, якщо це було передбачено в технічному завданні.

Крок 3. Реакція контейнерів на додавання різного об'єму контенту

Браузер змінювати не рекомендується.

1. Використовуючи рибний текст, перевіряємо, як розтягуються різні блоки, в яких буде розміщуватися контент. Кількість контенту не має ламати верстку.
2. Проводиться обов'язкова перевірка за шаблоном з використанням реальної інформації.

Крок 4. Узгодження зі специфікаціями

Найнадійніший спосіб перевірки коду на відповідність до загальноприйнятих стандартів - офіційний ресурс W3C.

1. Після перевірки не повинно бути ніяких повідомлень про помилки у вікні валідатора. Винятком можуть послужити ті випадки, коли на помилку верстальник йде усвідомлено і у нього є на це вагомі причини.
2. Для коду CSS важливо, щоб правильно використовувався синтаксис звернень.
3. Потрібно перевірити таблицю стилів на наявність хаков - їх потрібно виносити окремими документами.
4. Налагодити коректну мікророзмітки.

Крок 5. Помилка 404

Потрібно упевнитися, що на сайті не виникає помилок 404.

Крок 6. Javascript

1. Перевірка коду на наявність помилок, що призводить до некоректного коду.
2. Перевірити роботу Javascript на відповідність з поставленими завданнями, його функціональність.
3. У коді скрипта не допускається наявність console.log ().

Крок 7. Перевірка коду

1. Дотримання вимог технічного завдання для коду.
2. Усунути закоментувавши код з усіх його носіїв.

Крок 8. Показники кросбраузерності

Виконати перевірку за всіма вищезазначеними показниками в найпопулярніших браузерах. При перевірці на сумісність в інших програмах в першу чергу слід звертати увагу на такі питання, як:

• Візуалізація коду.
• Взаємодія ресурсу з користувачем.
• Функціональні можливості відповідно до вимог замовника.

На додаток до цих пунктів для IE потрібно перевірити:

• Масштабованість.
• Реакція на різні дозволи.
• Фокусування необхідних блоків.
• Відсутність помилок при використанні js-коду.

Окремо для роботи ресурсу на планшетах потрібно вивчити:

• Роботу при альбомної орієнтації
• Взаємодія ресурсу з користувачем в умовах роботи планшета.

На замітку

Даний алгоритм передбачає загальний випадок. При деяких особливостях технічного завдання список обов'язкових пунктів перевірки може значно збільшиться.

Оцінок: 2 (середня 5 з 5)